Angularjs,WebAPI 搭建一个简易权限管理系统

Angularjs,WebAPI 搭建一个简易权限管理系统

Angularjs名词与概念（一）

1. 目录

2. 前言

Angularjs开发CRUD类型的Web系统生产力惊人，与jQuery,YUI,kissy,Extjs等前端框架区别非常大，初学者在学习的过程中容易以自己以往的经验来学习Angularjs 往往走入误区，最典型的特征是在的开发过程中，使用大量的 指令（directive） 来实现许多操作DOM的功能，从而失去了angularjs快速开发的特性，最后不得不放弃使用。此系列的文章并不会像其他介绍Angularjs技术文档一样将每个技术细节统统照顾到，而是通过实战项目先让初学者有个大概的了解，然后大家在由浅入深逐渐熟悉每一个细节。
　

Github Angularjs
写此博客的时候angularjs官方稳定版已经更新到 “1.4.2”，内部测试版更新到“2.0.0-alpha.30”
本篇博客使用angularjs 1.4.2 版本
angularjs 1.4.2下载地址

首先放一个招牌Demo:

<!--设置angularjs在页面上的访问域-->
<html ng-app="Yiim">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="http://files.cnblogs.com/files/Arrays/angular.min.js"></script>
    <script type="text/javascript">
        (function () {
            //创建一个app模块（你就想象成C#里面的一个类库吧）
            var app = angular.module("Yiim", []);
            //在app模块中创建一个"tmplController"控制器
            app.controller("tmplController", ["$scope", function ($scope) {
                //设置（val）变量值
                $scope.val = "Google是最棒的搜索引擎。";
            }]);
        })()
    </script>
</head>
<body>
    <!--设置当前div的控制器为"tmplController"-->
    <div ng-controller="tmplController">
        <div>{{val}}</div>
    </div>
</body>
</html>

点击此运行

3.Angularjs名词与概念

2.1 单页Web应用（SinglePage）:

顾名思义，只使用一个页面的Web应用程序.单页面应用是指用户通过浏览器加载独立的HTML页面，Ajax加载数据页面无刷新，实现操作各种操作。

2.2 模板（template）:

这里的模板是指前端模板，在angularjs 之外已经有非常丰富的JavaScript模板引擎了，例如artTemplate，Mustache，doT.js等。
Angularjs 内置有自己的模板引擎。
通过下面的DEMO我们一起了解一下Angularjs 内置模板引擎：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>angularjs 模板解释</title>
    <script src="http://files.cnblogs.com/files/Arrays/angular.min.js"></script>
    <script type="text/javascript">
        (function () {
            var app = angular.module("Yiim", []);
            app.controller("tmplController", ["$scope", function ($scope) {
                //给变量val赋值
                $scope.val = "Google是最好的搜索引擎";
                //给变量list赋值
                $scope.list = [
                    { title: "博客园", url: "http://www.cnblogs.com" },
                    { title: "知乎", url: "http://www.zhihu.com" },
                    { title: "codeproject", url: "http://www.codeproject.com/" },
                    { title: "google", url: "http://www.google.com/" }
                ]
                //给变量hasValue赋值
                $scope.hasValue = false;
            }]);
        })()
    </script>
</head>
<body ng-app="Yiim">
    <div ng-controller="tmplController">
        <!--普通输出-->
        <div>{{val}}</div>
        <!--循环-->
        <ul ng-repeat="item in list">
            <li><a href="{{item.url}}" rel=nofollow>{{item.title}}</a></li>
        </ul>
        <!--条件语句-->
        <div ng-if="!hasValue">
            Angularjs条件语句
        </div>
    </div>
</body>
</html>

点击此运行

以上代码首先创建一个"Yiim"模块，然后在模块中添加了一个名词为"tmplController"的控制器，然后给scope添加三个属性“val”，“list”，“hasValue”，并赋值。
在模板页面设置angularjs作用域为"body"标签内,名词为"Yiim"

<body ng-app="Yiim">

在作用域中设置控制器为"tmplController"

 <div ng-controller="tmplController">

例子中提供了3种输出方式（普通输出，循环，条件语句），当然angularjs不仅仅这几种方式
“ng-repeat”，“ng-if” 这都是通过指令实现。我们在下一节（2.5 ）将详细讲解

2.3 控制器（controller）:

控制器可以理解为控制页面某个区块的方法。其中有一个非常重要的对象 $scope是这个控制器与页面控制器区域沟通的桥梁。angularjs最精华的部分是双向绑定，失去了双向绑定angularjs就失去了自己的灵魂。这也是和其他以DOM操作的框架比最大的区别。放DEMO

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>angularjs控制器介绍</title>
    <script src="http://files.cnblogs.com/files/Arrays/angular.min.js"></script>
    <script type="text/javascript">
        (function () {
            var app = angular.module("Yiim", []);
            app.controller("cntoController", ["$scope", function ($scope) {
                var defaults = "知乎 - 与世界分享你的知识、经验和见解";
                //设置值
                $scope.val = defaults;
                $scope.click = function () {
                    $scope.val = defaults;
                };
            }]);
        })()
    </script>
</head>
<body ng-app="Yiim">
    <div ng-controller="cntoController">
        <!--绑定值-->
        <div><textarea ng-model="val"></textarea></div>
        <!--输出值-->
        <div>{{val}}</div>
        <!--绑定方法-->
        <div><button ng-click="click()">重置</button></div>
    </div>
</body>
</html>

控制器演示效果 点击此运行

与2.2节例子相同是,我们首先创建了一个模块，然后在模块中添加一个控制器方法 "cntoController".
在控制器里我们给scope添加了一个属性"val" 和一个方法 "click"。
在页面中我们使用"ng-model"指令绑定控制器中设置的"val"

  <div><textarea ng-model="val"></textarea></div>

紧接着我们把绑定的值输出处理

 <div>{{val}}</div>

通过内置的绑定方法click 我们重置字符串

$scope.click = function () {
       $scope.val = defaults;
};

2.4 路由（route）:

单页Web应用由于没有后端URL资源定位的支持，需要自己实现URL资源定位。angularjs使用浏览器URL "#" 后的字符串来定位资源，区分不同的功能模块。
路由并非在angularjs核心文件内，你需要另外加入一段脚本 “angular-route.min.js”
需要注意的是在创建 “app” 对象是需要填写对 ngRoute 依赖

  var app = angular.module("Yiim", [‘ngRoute‘]);//注意 ngRoute

下面我们同样的展示一个demo
主页面 route.html

<!DOCTYPE html>
<html ng-app="Yiim" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>angularjs路由介绍</title>
    <script src="http://files.cnblogs.com/files/Arrays/angular.min.js"></script>
    <script src="http://files.cnblogs.com/files/Arrays/angular-route.min.js"></script>
    <script type="text/javascript">
        (function () {
            //设置当前模块依赖，“ngRoute”，用.NET的理解就是给这个类库添加“ngRoute”引用
            var app = angular.module("Yiim", [‘ngRoute‘]);
            //配置路由
            app.config([‘$routeProvider‘, function ($routeProvider) {
                var route = $routeProvider;
                //指定URL为“/” 控制器：“indexController”，模板：“route.html”
                route.when(‘/list‘, { controller: ‘listController‘, templateUrl: ‘route-list.html‘ });
                //注意“/view/:id” 中的 “：id” 用于捕获参数ID
                route.when(‘/view/:id‘, { controller: ‘viewController‘, templateUrl: ‘route-view.html‘ });
                //跳转
                route.otherwise({ redirectTo: ‘/list‘ });
            }]);

            //创建一个提供数据的服务器
            app.factory("service", function () {
                var list = [
                   { id: 1, title: "博客园", url: "http://www.cnblogs.com" },
                   { id: 2, title: "知乎", url: "http://www.zhihu.com" },
                   { id: 3, title: "codeproject", url: "http://www.codeproject.com/" },
                   { id: 4, title: "google", url: "http://www.google.com/" }
                ];
                return function (id) {
                    //假如ID为无效值返回所有
                    if (!id) return list;
                    var t = 0;
                    //匹配返回的项目
                    angular.forEach(list, function (v, i) {
                        if (v.id == id) t = i;
                    });
                    return list[t];
                }
            })

            //创建控制器 indexController
            app.controller("listController", ["$scope", "service", function ($scope, service) {
                //获取所有数据
                $scope.list = service();
            }]);
            //创建查看控制器 viewController, 注意应为需要获取URL ID参数 我们多设置了一个 依赖注入参数 “$routeParams” 通过它获取传入的 ID参数
            app.controller("viewController", ["$scope", "service", ‘$routeParams‘, function ($scope, service, $routeParams) {
                $scope.model = service($routeParams.id || 0) || {};
            }])
        })()
    </script>
</head>
<body>
    <div><a href="#/list">列表</a></div>
    <div ng-view>
    </div>
</body>
</html>

列表页面 route-list.html

<ul ng-repeat="item in list">
    <li><a href="#view/{{item.id}}">{{item.title}}</a></li>
</ul>

详细页面 route-view.html

<div>
    <div>网站ID：{{model.id}}</div>
    <div>网站名称：<a href="{{model.url}}" rel="nofollow">{{model.title}}</a></div>
    <div>访问地址：{{model.url}}</div>
</div>

演示效果：点击此运行

以上代码中，我们首先配置了三条个处理个局部页面的路由
路由处理列表页并设置控制器为"listController",指定模板页为"route-list.html"

route.when(‘/list‘, { controller: ‘listController‘, templateUrl: ‘route-list.html‘ });

与上面不同的是第二条路由中包含":id"用于捕获URL后面的参数 。

route.when(‘/view/:id‘, { controller: ‘viewController‘, templateUrl: ‘route-view.html‘ });

处理所有未匹配到的路由跳转到 "‘/list‘"内。

route.otherwise({ redirectTo: ‘/list‘ });

我们还使用了模块方法 "factory" 创建一个"service" 服务，用于获取数据列表
后面我们声明了两个控制器"listController","viewController",同时配置对"service"的依赖，"viewController" 中我们还添加对"$routeParams" 的依赖，用于获取路由捕获的id。
需要注意的是我们再主页面声明了"ng-view"用于指定局部页面和控制器作用范围。

<div ng-view></div>

2.5 指令（directive）:

指令（directive）并不是什么高深的东西，我们简单理解为通过声明 特殊的标签，属性..等来处理浏览器无法渲染的功能。通过JavaScript将指令替换成浏览器可以识别的标签。
当前这不是它存在的唯一意义。在上面的例子中我们已经见到了“ng-if”,"ng-repeat"等这些angularjs 内置的指令。当然我们也可以定义自己使用的指令。

  1. 通过指令可以实现对DOM操作
  2. 可以跟加简洁的实现某些功能
  3. 通过指令可以集成其他插件 例如jQuery插件
<!DOCTYPE html>
<html ng-app="Yiim" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>angularjs指令演示</title>
    <script src="//cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
    <script src="http://files.cnblogs.com/files/Arrays/angular.min.js"></script>
    <script type="text/javascript">
        (function () {
            var app = angular.module("Yiim", []);

            //创建一个提供数据的服务器
            app.factory("service", function () {
                var list = [
                   { id: 1, title: "博客园", url: "http://www.cnblogs.com" },
                   { id: 2, title: "知乎", url: "http://www.zhihu.com" },
                   { id: 3, title: "codeproject", url: "http://www.codeproject.com/" },
                   { id: 4, title: "google", url: "http://www.google.com/" }
                ];
                return function (id) {
                    //假如ID为无效值返回所有
                    if (!id) return list;
                    var t = 0;
                    //匹配返回的项目
                    angular.forEach(list, function (v, i) {
                        if (v.id == id) t = i;
                    });
                    return list[t];
                }
            })
            //创建指令imCheck 在HTML中的语法为 im-check
            app.directive("imCheck", [function () {
                return {
                    restrict: ‘A‘,
                    replace: false,
                    link: function (scope, element) {
                        var all = "thead input[type=‘checkbox‘]";
                        var item = "tbody input[type=‘checkbox‘]";
                        //当点击选择所有事便利所有项目
                        element.on("change", all, function () {
                            var o = $(this).prop("checked");
                            var tds = element.find(item);
                            tds.each(function (i, check) {
                                $(check).prop("checked", o);
                            });
                        });
                        //子项修改时的超值
                        element.on("change", item, function () {
                            var o = $(this).prop("checked");
                            var isChecked = true;
                            if (o) {
                                element.find(item).each(function () {
                                    if (!$(this).prop("checked")) {
                                        isChecked = false;
                                        return false;
                                    }
                                    return true;
                                });
                            }
                            element.find(all).prop("checked", o && isChecked);
                        });
                    }
                };
            }])

            app.controller("dectController", [‘$scope‘, ‘service‘, function ($scope, service) {
                $scope.list = service();
            }])
        })();
    </script>
</head>
<body>
    <!--注意一下标签 im-check 指定使用的指令-->
    <table ng-controller="dectController" im-check>
        <thead>
            <tr>
                <th><input type="checkbox">选择</th>
                <th>网站ID</th>
                <th>网站名称</th>
                <th>链接地址</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in list">
                <td><input type="checkbox"></td>
                <td>{{item.id}}</td>
                <td>{{item.title}}</td>
                <td>{{item.url}}</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

演示效果 点击此运行

上面的例子中，我们使用模块创建了一个指令"imCheck",并在指令方法"link"注册了使用当前指令的dom对象注册了两个delegate方法 处理全选和子选择项状态改变处理的方法。
"imCheck" 对应在html页面的属性为 "im-check" 注意大小写。

<table ng-controller="dectController" im-check>

还要注意的是我们使用了jQuery来操作dom节点。

2.6 前端模块化开发:

模块化开发不是什么新鲜的概念，后端开发过程中包,类库这些把功能相近的东西放在一起。前端开发很长一段时间混乱无比，脚本之间的冲突，依赖，变量函数覆盖各种奇奇怪怪的问题。模块化开发在前端的定义：将功能相近的组件封装到一块，通过前端依赖注入解决依赖顺序和变量作用域的问题. 代表框架有Seajs,Requirejs。
使用模块化编程实现angularjs多种模块，解决依赖问题

<!DOCTYPE html>
<html ng-app="Yiim" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>angularjs 模块化开发</title>
    <script src="http://files.cnblogs.com/files/Arrays/angular.min.js"></script>
    <script type="text/javascript">
        (function () {
            //创建一个Yiim.service 模块
            var service = angular.module("Yiim.service", []);
            //创建一个Yiim.controller 模块
            var controller = angular.module("Yiim.controller", []);
            //指令模块
            var directive = angular.module("Yiim.directive", []);
            //过滤器模块
            var filter = angular.module("Yiim.filter", []);

            //Yiim.service添加一个服务
            service.factory("service", [function () {
                return { key: "Service" };
            }]);
            //Yiim.controller添加一个控制器
            controller.controller("indexController", [‘$scope‘, ‘service‘, function ($scope, service) {
                $scope.service = service;
            }]);

            //获取依赖
            var app = angular.module("Yiim", [‘Yiim.service‘, ‘Yiim.controller‘, ‘Yiim.directive‘, ‘Yiim.filter‘]);
        })();
    </script>
</head>
<body>
    <div ng-controller="indexController">{{service.key}}</div>
</body>
</html>

点击此运行

2.7 过滤器（filter）:

angularjs过滤器,用来格式化数据(转化，排序，筛选等操作)。

<!DOCTYPE html>
<html ng-app="Yiim" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>angularjs 过滤器</title>
    <script src="http://files.cnblogs.com/files/Arrays/angular.min.js"></script>
    <script type="text/javascript">
        (function () {
            var app = angular.module("Yiim", []);
            app.controller("namesController", ["$scope", function ($scope) {
                $scope.names = [
                     { "Name": "Alfreds Futterkiste", "City": "Berlin", "Country": "Germany" },
                     { "Name": "Berglunds snabbköp", "City": "Luleå", "Country": "Sweden" },
                     { "Name": "Centro comercial Moctezuma", "City": "México D.F.", "Country": "Mexico" },
                     { "Name": "Ernst Handel", "City": "Graz", "Country": "Austria" },
                     { "Name": "FISSA Fabrica Inter. Salchichas S.A.", "City": "Madrid", "Country": "Spain" },
                     { "Name": "Galería del gastrónomo", "City": "Barcelona", "Country": "Spain" },
                     { "Name": "Island Trading", "City": "Cowes", "Country": "UK" },
                     { "Name": "Königlich Essen", "City": "Brandenburg", "Country": "Germany" },
                     { "Name": "Laughing Bacchus Wine Cellars", "City": "Vancouver", "Country": "Canada" },
                     { "Name": "Magazzini Alimentari Riuniti", "City": "Bergamo", "Country": "Italy" },
                     { "Name": "North/South", "City": "London", "Country": "UK" },
                     { "Name": "Paris spécialités", "City": "Paris", "Country": "France" },
                     { "Name": "Rattlesnake Canyon Grocery", "City": "Albuquerque", "Country": "USA" },
                     { "Name": "Simons bistro", "City": "København", "Country": "Denmark" },
                     { "Name": "The Big Cheese", "City": "Portland", "Country": "USA" },
                     { "Name": "Vaffeljernet", "City": "Århus", "Country": "Denmark" },
                     { "Name": "Wolski Zajazd", "City": "Warszawa", "Country": "Poland" }
                ];
            }])
        })()
    </script>
</head>
<body>
    <div ng-controller="namesController">
        <p>输入过滤：</p>
        <p><input type="text" ng-model="name"></p>
        <ul>
            <li ng-repeat="x in names | filter:name | orderBy:‘Country‘">
                {{ (x.Name | uppercase) + ‘, ‘ + x.country }}
            </li>
        </ul>
    </div>
</body>
</html>

演示效果 点击此运行


我们使用angularjs内置的过滤器 "filter","orderBy"。

x in names | filter:name | orderBy:‘Country‘

含义为将集合 "names" 传入过滤器 "filter"匹配字符串为"name"的项目，然后将匹配后的集合传入 "orderBy"过滤器，以"Country"属性进行排序。
在输出变量时我们使用"uppercase"过滤器转化大小写

x.Name | uppercase

如果这篇文章对你有帮助,麻烦帮忙点个赞。

分类: javascript/jQuery/angularjs

时间： 2024-10-08 10:29:11

Angularjs,WebAPI 搭建一个简易权限管理系统的相关文章

[后端人员耍前端系列]AngularJs篇：使用AngularJs打造一个简易权限系统

一.引言 上一篇博文已经向大家介绍了AngularJS核心的一些知识点,在这篇博文将介绍如何把AngularJs应用到实际项目中.本篇博文将使用AngularJS来打造一个简易的权限管理系统.下面不多说,直接进入主题. 二.整体架构设计介绍 首先看下整个项目的架构设计图: 从上图可以看出整个项目的一个整体结构,接下来,我来详细介绍了项目的整体架构: 采用Asp.net Web API来实现REST 服务.这样的实现方式,已达到后端服务的公用.分别部署和更好地扩展.Web层依赖应用服务接口,并且使

AngularJs打造一个简易权限系统

AngularJs打造一个简易权限系统 一.引言 上一篇博文已经向大家介绍了AngularJS核心的一些知识点,在这篇博文将介绍如何把AngularJs应用到实际项目中.本篇博文将使用AngularJS来打造一个简易的权限管理系统.下面不多说,直接进入主题. 二.整体架构设计介绍 首先看下整个项目的架构设计图: 从上图可以看出整个项目的一个整体结构,接下来,我来详细介绍了项目的整体架构: 采用Asp.net Web API来实现REST 服务.这样的实现方式,已达到后端服务的公用.分别部署和更好

使用EF Code First搭建一个简易ASP.NET MVC网站,允许数据库迁移

本篇使用EF Code First搭建一个简易ASP.NET MVC 4网站,并允许数据库迁移. 创建一个ASP.NET MVC 4 网站. 在Models文件夹内创建Person类. public class Person { public int ID { get; set; } public string FirstName { get; set; } public string LastName { get; set; } } 在Controls文件夹内创建PersonControlle

如何搭建一个简易的Web框架

Web框架本质 什么是Web框架, 如何自己搭建一个简易的Web框架?其实, 只要了解了HTTP协议, 这些问题将引刃而解. 简单的理解:  所有的Web应用本质上就是一个socket服务端, 而用户的浏览器就是一个socket客户端. 用户在浏览器的地址栏输入网址, 敲下回车键便会给服务端发送数据, 这个数据是要遵守统一的规则(格式)的, 这个规则便是HTTP协议. HTTP协议主要规定了客户端和服务器之间的通信格式 浏览器收到的服务器响应的相关信息可以在浏览器调试窗口(F12键开启)的Net

如何快速用0代码应用平台搭建一个学生信息管理系统？

学生和班级信息管理是一个非常繁琐的工作,数量之大,传统的管理方式使用起来极其不方便,但在平时的工作生活中是不可避免的. 典型的场景有: ? 学生和班级的关系 ? 学生信息核查的情况 蜘蛛表格可以快速.灵活的搭建应用单元对象,通过字段关联使得表与表之间联系起来,轻松实现以上场景,让工作人员从此告别EXCEL和纸质化. 下面我们通过之前给高昌区第四中学做的一个学生和班级管理系统,来展示搭建此类应用的具体步骤. 应用搭建步骤: 确定数据对象 若要设计一个应用,需要明确整个应用所设计到的角色,也就是数据

python -m http.server 搭建一个简易web下载服务器

在打vulnhub靶场的时候遇到的一个问题 目录 一.进到需要发送的安装包目录 二.开启http服务 三.访问服务器 一.进到需要发送的安装包目录 比如设置一个专门发送,传输的文件的文件夹,cmd命令打开即可以 二.开启http服务 python2 python -m SimpleHTTPServer 9000 python3 python -m http.server 9000 (这里要注意了,python2跟python3的命令是不一样的,我之前就是上网搜搭建方法,大都是搜到了python3

自己动手搭建一个简易的SpringBoot环境

什么是springboot? Spring Boot俗称微服务.Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置.通过这种方式,Spring Boot致力于在蓬勃发展的快速应用开发领域(rapid application development)成为领导者. 1, 新建一个maven工程 先选择workspace 点击[next] 直接默认,再点击[n

实验楼mysql实验-搭建一个简易的成绩管理系统的数据库

网址如下https://www.shiyanlou.com/courses/running ,pass之后的体验还蛮好的,. 首先打开终端,双击xfce终端或右键打开终端 开启数据库服务 ,连接数据库 首先创建新的数据库create database gradesystem; 接着选择新创建的数据库 use gradesystem; 进行建表,使用create table 语句,分别建立三个表,student,course,mark 其中stdent表的sid和course表的cid分别是mar

Thinkphp开发的一个简易的管理系统，新手易学。

本系统采用Thinkphp3.2版本开发 管理系统登录界面 <!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="{$Think.const.CSS_URL}login.css"> <script type="text