目录

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

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

Angularjs,WebAPI 搭建一个简易权限管理系统 —— Angularjs名词与概念(一)的更多相关文章

  1. Angularjs,WebAPI 搭建一个简易权限管理系统 —— Angularjs 前端主体结构(五)

    目录 前言 Angularjs名词与概念 Angularjs 基本功能演示 系统业务与实现 WebAPI项目主体结构 Angularjs 前端主体结构 6 Angularjs 前端主体结构 6.1 A ...

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

    Angularjs,WebAPI 搭建一个简易权限管理系统 Angularjs名词与概念(一)   1. 目录 前言 Angularjs名词与概念 权限系统原型 权限系统业务 数据库设计和实现 Web ...

  3. Angularjs,WebAPI 搭建一个简易权限管理系统 —— 基本功能演示(二)

    目录 前言 Angularjs名词与概念 Angularjs 基本功能演示 系统业务与实现 WebAPI项目主体结构 Angularjs 前端主体结构 基本功能演示(二) 非常抱歉这个月实在太忙,一直 ...

  4. Angularjs,WebAPI 搭建一个简易权限管理系统 —— 系统业务与实现(三)

    目录 前言 Angularjs名词与概念 Angularjs 基本功能演示 系统业务与实现 WebAPI项目主体结构 Angularjs 前端主体结构 系统业务与实现(二) 上一章我们讲解的 Angu ...

  5. Angularjs,WebAPI 搭建一个简易权限管理系统 —— WebAPI项目主体结构(四)

    目录 前言 Angularjs名词与概念 Angularjs 基本功能演示 系统业务与实现 WebAPI项目主体结构 Angularjs 前端主体结构 5.0 WebAPI项目主体结构 5.1 总体结 ...

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

    一.引言 上一篇博文已经向大家介绍了AngularJS核心的一些知识点,在这篇博文将介绍如何把AngularJs应用到实际项目中.本篇博文将使用AngularJS来打造一个简易的权限管理系统.下面不多 ...

  7. AngularJs打造一个简易权限系统

    AngularJs打造一个简易权限系统 一.引言 上一篇博文已经向大家介绍了AngularJS核心的一些知识点,在这篇博文将介绍如何把AngularJs应用到实际项目中.本篇博文将使用AngularJ ...

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

    本篇使用EF Code First搭建一个简易ASP.NET MVC 4网站,并允许数据库迁移. 创建一个ASP.NET MVC 4 网站. 在Models文件夹内创建Person类. public ...

  9. express + mongodb 搭建一个简易网站 (四)

    express + mongodb 搭建一个简易网站 (四) 目前网站整体页面都已经能全部展示了,但是,整个网站还有两个块需要做完才能算完整,一个连接数据库,目前网站上的数据都是抓取的本地假数据,所以 ...

随机推荐

  1. dnspod动态域名使用感受

    继花生壳不能用之后,3322也开始不太好用了,首先就是360把所有3322的域名全部判定为危险域名,甚至拦截程序对于3322url的api请求. 所以想把3322换成我们自己的独立域名,但是3322他 ...

  2. wait、notify、notifyAll的阻塞和恢复

    前言:昨天尝试用Java自行实现生产者消费者问题(Producer-Consumer Problem),在coding时,使用到了Condition的await和signalAll方法,然后顺便想起了 ...

  3. 写出几种IE6 BUG的解决方法

    1.双边距BUG float引起的  使用display:inline 2.3像素问题 使用多个float和注释引起的 使用dislpay:inline -3px   3.超链接hover 点击后失效 ...

  4. ThoughtWorks 2016年第1期DNA活动总结

    今天受邀参加了2016年ThoughtWorks公司成都分公司的2016年第一期DNA活动. 什么是DNA? DNA 即 Design And Analysis.设计与分析.这个活动主要是针对产品经理 ...

  5. MSIL 教程(三):类和异常处理(转)

    转自:http://www.cnblogs.com/Yahong111/archive/2007/08/16/857771.html 续上文[翻译]MSIL 教程(二):数组.分支.循环.使用不安全代 ...

  6. 由于无法创建应用程序域,因此未能执行请求。错误: 0x80070002 系统找不到指定的文件

    前两天安装了一堆补丁后突然发现,原本正常使用了一年的应用系统打不开了,到事件日志中发现有.net framewok 2.0的补丁安装失败的日志,于从从重装补丁开始.到重新注册.net框架,再到所有.n ...

  7. [转]SpringMVC Controller&View数据传递

    Spring MVC3在controller和视图之间传递参数的方法:   一, 从controller往视图传递值, controller---->视图   1)简单类型,如int, Stri ...

  8. iOS 7.1 安装 企业应用 提示 无法下载应用程序

    首先这种情况排除https影响,这个就不提了.请自行查询iOS https 部署. 其次系统版本是iOS 7.1,之后的版本安装都没问题. 说下我是怎么发现问题的,我找了个真机,发现直接调试提示bun ...

  9. NavMesh系统动态碰撞的探讨

    Unity3D提供的NavMesh系统可以方便的解决游戏的寻路问题,但是该系统有一个比较让人不理解的问题: NavMesh导航时会忽略Physics系统本身的碰撞,也就是说NavMeshAgent在移 ...

  10. AppStore下载慢的真实原因

    今天有个朋友说他的app下载很慢,他说下载其他的不会,就他的会很慢很卡.我心想这东西苹果的我也没办法了呀,不过我心里也想我平时下载挺快的呀.于是就开始试试.搜索了几个app下载发现确实是有快有慢,并且 ...