Angularjs,WebAPI 搭建一个简易权限管理系统 —— Angularjs名词与概念(一)
目录
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 内置的指令。当然我们也可以定义自己使用的指令。
- 通过指令可以实现对DOM操作
- 可以跟加简洁的实现某些功能
- 通过指令可以集成其他插件 例如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
如果这篇文章对你有帮助,麻烦帮忙点个推荐啦。
Angularjs,WebAPI 搭建一个简易权限管理系统 —— Angularjs名词与概念(一)的更多相关文章
- Angularjs,WebAPI 搭建一个简易权限管理系统 —— Angularjs 前端主体结构(五)
目录 前言 Angularjs名词与概念 Angularjs 基本功能演示 系统业务与实现 WebAPI项目主体结构 Angularjs 前端主体结构 6 Angularjs 前端主体结构 6.1 A ...
- Angularjs,WebAPI 搭建一个简易权限管理系统
Angularjs,WebAPI 搭建一个简易权限管理系统 Angularjs名词与概念(一) 1. 目录 前言 Angularjs名词与概念 权限系统原型 权限系统业务 数据库设计和实现 Web ...
- Angularjs,WebAPI 搭建一个简易权限管理系统 —— 基本功能演示(二)
目录 前言 Angularjs名词与概念 Angularjs 基本功能演示 系统业务与实现 WebAPI项目主体结构 Angularjs 前端主体结构 基本功能演示(二) 非常抱歉这个月实在太忙,一直 ...
- Angularjs,WebAPI 搭建一个简易权限管理系统 —— 系统业务与实现(三)
目录 前言 Angularjs名词与概念 Angularjs 基本功能演示 系统业务与实现 WebAPI项目主体结构 Angularjs 前端主体结构 系统业务与实现(二) 上一章我们讲解的 Angu ...
- Angularjs,WebAPI 搭建一个简易权限管理系统 —— WebAPI项目主体结构(四)
目录 前言 Angularjs名词与概念 Angularjs 基本功能演示 系统业务与实现 WebAPI项目主体结构 Angularjs 前端主体结构 5.0 WebAPI项目主体结构 5.1 总体结 ...
- [后端人员耍前端系列]AngularJs篇:使用AngularJs打造一个简易权限系统
一.引言 上一篇博文已经向大家介绍了AngularJS核心的一些知识点,在这篇博文将介绍如何把AngularJs应用到实际项目中.本篇博文将使用AngularJS来打造一个简易的权限管理系统.下面不多 ...
- AngularJs打造一个简易权限系统
AngularJs打造一个简易权限系统 一.引言 上一篇博文已经向大家介绍了AngularJS核心的一些知识点,在这篇博文将介绍如何把AngularJs应用到实际项目中.本篇博文将使用AngularJ ...
- 使用EF Code First搭建一个简易ASP.NET MVC网站,允许数据库迁移
本篇使用EF Code First搭建一个简易ASP.NET MVC 4网站,并允许数据库迁移. 创建一个ASP.NET MVC 4 网站. 在Models文件夹内创建Person类. public ...
- express + mongodb 搭建一个简易网站 (四)
express + mongodb 搭建一个简易网站 (四) 目前网站整体页面都已经能全部展示了,但是,整个网站还有两个块需要做完才能算完整,一个连接数据库,目前网站上的数据都是抓取的本地假数据,所以 ...
随机推荐
- jade模板引擎学习笔记(WebsStorm9.0.3+ nodejs+express+jade)
jade环境搭建 jade标签写法 jade注释 jade添加类名.id.属性 jade添加脚本,css jade变量 jade多行文本显示 jade流程代码:for,each,while jade流 ...
- ux.form.field.SearchField 列表、树形菜单查询扩展
//支持bind绑定store //列表搜索扩展,支持本地查询 //支持树形菜单本地一级菜单查询 Ext.define('ux.form.field.SearchField', { extend: ' ...
- MyBatis知多少(21)更新操作
上一章展示了如何使用MyBatis对表进行读取操作.本章将告诉你如何在一个表中使用MyBatis更新记录. 我们已经在MySQL下有EMPLOYEE表: CREATE TABLE EMPLOYEE ( ...
- 七牛portal可用性测试记
引言:2013年年底应七牛公司朋友的邀请,给他们的Portal进行可用性测试.七牛(http://www.qiniu.com/)一直专注于云存储基础服务,在业内颇有声誉.七牛云存储的后台选用并不常用的 ...
- 前端技术Bootstrap的hello world
----对于用户来说,界面就是程序本身.那么一个漂亮的web一定是你继续使用这个应用的前题. 这一节我们来一起写个Bootstrap的hello wrold. Bootstrap Bootstrap ...
- 谷歌联合 Adobe 发布 Noto 字体【免费下载】
Noto 涵盖了世界上所有主要语言,包括欧洲,非洲,中东,印度语,南亚和东南亚,中亚,美洲和东亚语言.也支持几个少数民族和历史语言.不久前,还发布了针对文.日文.韩文的开源字体——Noto Sans ...
- 第一次接触终极事务处理——Hekaton
在这篇文章里,我想给出如何与终极事务处理(Extreme Transaction Processing (XTP) )的第一次接触,即大家熟知的Hakaton.如果你想对XTP有个很好的概况认识,我推 ...
- CMD魔法堂:支持显示UTF8编码的中文
一.前言 在Unbuntu中用sqlite3-command-line操作sqlite3还好好的,到了windows下查询表内容时发现中文全部乱码了!马上想到sqlite3内部使用utf-8对字符进行 ...
- MongoDB安装说明以及MongoVUE使用
简单介绍mongoDb MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. MongoDB是一个介于关系数据库和非关系数据库之间的产 ...
- 使用RazorEngine对ASP.NET MVC的Views进行UnitTest
有的时候我们需要对Razor最后生产的文本(HTML OR XML OR..)进行单元测试. 使用Nuget安装RazorEngine. 新建一个ASP.NET MVC项目,并且带有测试项目. 修改I ...