AngularJS 初步认识

代码稍多，请自行打开

一、前言

早已听说AngularJS的大名，并在很久前也编写过些小demo，但是都没有系统学习过。由于，在下个版本项目中用到了AngularJS，so，那就一起再来研究研究呗。说到，这个AngularJS，其核心就是对HTML标签的增强。何为HTML标签增强？其实就是使你能够用标签完成一部分页面逻辑，具体方式就是通过自定义标签、自定义属性等，这些HTML原生没有的标签/属性在ng中有一个名字：指令（directive）。至于说AngularJS是MVC，亦或MVVM框架？都不是，它是MVW，最后的W意思就是说whatever，固有些人也称其为MV*。其中含义，以后实践久了，应该就豁然开朗了，至于现在，move on吧。

二、一切从hello world开始

啊，苍茫的天涯是我的爱，绵绵的青山脚下花会开，什么样的节奏是最呀最摇摆，什么样的歌声才是最开怀~~~现在这个年代，人非草木，什么都得有情怀，不然还混不下去了。所以，接下来我们编写个小demo，来抒发我们的抱负。这个demo要实现的功能很简单，就是在input框中，输入自定义内容，如hello world，间接改变另一显示区域。前提：如若没有angular.js文件，请点击这里（here）。实现代码如下：<！DOCTYPE html>
<head>
<metacharset="utf-8"/>
<scriptsrc="angular.js"></script>
</head>
<bodyng-app>
<inputtype="text" ng-model="custom"/>
<h1>{{custom}}</h1>
</body>
</html>效果图： 怎么样，是八是很惊奇，仅仅用了这几行代码，就实现了这个效果，倘若利用原生代码实现，我们还得监听input框，值若改变，取值，将其动态插入h1中。啧啧啧，相对于AngularJS显得稍稍笨重了许多，所以这也体现了AngularJS的优点，适合数据操作多的应用。在“前言”中，我们已经提到，AngularJS其核心就是对HTML标签的增强，且内置的Angular指令是以ng-开头的，如上述代码中的ng-app以及ng-model。 --ng-app指令声明所有被其包含的内容都属于angularjs应用 --ng-model指令将内部$scope的属性名绑定到input框中，从而实现双向绑定。好了，倘若我想给上述input框一个默认值 ’hello world’ 呢？在value=’hello world’？噗，No。因为我们在body已用ng-app指令表示在body中都属于angular应用啦，so<input type="text" ng-model="custom" value="hello world"/>是不起作用滴，不过可以利用angular内置指令ng-init来达到我们想要的效果。代码如下：<！DOCTYPE html><head><meta charset="utf-8"/><script src="angular.js"></script></head><body ng-app><input type="text" ng-model="custom" ng-init="custom="hello world""/><h1>{{custom}}</h1></body></html>除开这种便捷的方法，我们还可以利用控制器来实现同样的效果。如下：<！DOCTYPE html><head><meta charset="utf-8"/><script src="angular.js"></script></head><body ng-app><input type="text" ng-model="custom" ng-controller="customController"/><h1>{{custom}}</h1><script>function customController（$scope）{$scope.custom = "hello world";}</script></body></html>效果图如下：尼玛，怎么不是我们想要的效果？！！细看代码，发现，我们将控制器customController写在input中的，固出现上述状况。你可能会问，这是为什么呢？-.-小沈阳附体因为诸如ng-app、ng-controller这些标签，他们都会创建一个作用域，这个作用域呢，又是以html标签来划分的。如<body ng-app>，那么它所创建的作用域（$rootScope），就是在body中生效，即</body>止。如上述代码，我们将控制器customController写在input中，那么这个子作用域就是在input中，<h1>标签中的{{custom}}是获取不到的。好了，了解了原因，我们修改上述代码，如下，将customController控制器放到body中，即可。<！DOCTYPE html><head><meta charset="utf-8"/><script src="angular.js"></script></head><body ng-app ng-controller="customController"><input type="text" ng-model="custom"/><h1>{{custom}}</h1><script>function customController（$scope）{$scope.custom = "hello world";}</script></body></html>完美！咦，函数customController中参数$scope什么鬼，我们调用时并没有传入呢。这就涉及到Angular的另一核心特效依赖注入，我们现在先不管他内部原理如何实现的，大概过程就是将预定义好的对象名与具体操作绑定，我们使用时，在参数中调用即可，且注入名字必须与预定义的对象一样，不然会报错。另，$scope对象属于Angular内置对象，代表对应的作用域管理对象。上述代码中，再细细看来，还是不好呢。我们将控制器写在了全局对象中，虽然不影响代码运行，但不易于维护嘛，好在Angular允许我们使用angular.module方法来声明模块。该方法接收两个参数，第一个是模块的名称，第二个是依赖列表。利用angular.module修改上述代码，得下：<！DOCTYPE html><head><meta charset="utf-8"/><script src="angular.js"></script></head><body ng-app="myApp" ng-controller="customController"><input type="text" ng-model="custom"/><h1>{{custom}}</h1><script>var myApp = angular.module（"myApp", []）;myApp.controller（"customController", function（$scope）{$scope.custom = "hello world";}）;</script></body></html>效果图如下：

三、scope作用域

AngularJS 应用启动并生成视图时,会将根 ng-app 元素与 $rootScope 进行绑定，$rootScope 是所有 $scope 的最上层对象,可以理解为一个 AngularJS 应用中的全局作用域对象,所以为它附加太多逻辑或者变量并不是一个好主意,和污染 Javascript 全局作用域是一样的。通过诸如控制器、指令等这些命令，我们可以创建子作用域，所有的子作用域都通过原型继承而来（指令的孤立作用域除外），也就是说它们都可以访问父级作用域。好了，我们通过编写个demo感受一番： <！DOCTYPE html><head><meta charset="utf-8"/><script src="angular.js"></script></head><body ng-app="myApp">rootScope:{{name}}<div ng-controller="outterController">outter:{{name}}<div ng-controller="innerController">inner:{{name}}</div></div><script>var myApp = angular.module（"myApp", []）;myApp.run（function（$rootScope）{$rootScope.name = "rootScope";}）.controller（"outterController", function（$scope, $timeout）{$timeout（function（）{$scope.name = "outter";}, 1000）;}）.controller（"innerController", function（$scope, $timeout）{$timeout（function（）{$scope.name = "inner";}, 2000）;}）;</script></body></html>代码稍多，请自行打开 效果图如下：

四、过滤器

Angular过滤器用来格式化需要展示给用户的数据，通过 | 符号来达到过滤效果。假设我们需要在将一个数字过滤，让他保留两位小数，可以这么做：{{124.567 | number:2}}//124.57{{124 | number:2}}//124.00并且，我们可以使用多个filter连用，上一个filter的输出结果将作为下一个filter的输入，如：{{ expression | filter1 | filter2| … }}上述代码中的number为Angular的内置过滤器。如果我们需要传递参数给过滤器，只要在过滤器名字后面加冒号即可。如果有多个参数，可以在每个参数后面都加入冒号。Angular内置的过滤器有：currency（货币）、date（日期）、filter（子串匹配）、json（格式化json对象）、limitTo（限制个数）、lowercase（小写）、uppercase（大写）、number（数字）、orderBy（排序），总共九种，除此之外还可以自定义过滤器，这样，我们就可以满足任何要求的数据处理啦。下面先列举几个常用的内置过滤器，抛砖引玉，大家一同感受下。1、 filterfilter过滤器可以从给定数组中选择一个子集，并将其生成一个新数组返回。这个过滤器通常用来过滤需要进行展示的元素。该过滤器有两个参数，第一个参数可以是字符串、对象或是一个用来从数组中选择元素的函数。下面一一介绍：--字符串--返回所有包含这个字符串的元素。如果我们想返回不包含该字符串的元素，在参数前面加！符号即可。如下：{{["Ari", "Lerner", "Likes", "To", "Eat", "Pizza"] | filter:"！e"}}--对象--AngularJS会将待过滤对象的属性同这个对象中的属性名进行一一比较，如果过滤对象的属性包含这个属性名，则出现在新的数组中并返回。如下：{{[{"name": "Ari","age": 3 },
{"name": "Nate","age": 33 }] | filter: {"age": 3} }}--函数--对每个元素都执行这个函数，返回非假值得元素会出现在新的数组中并返回。如下：<！DOCTYPE html><head><meta charset="utf-8"/><script src="angular.js"></script></head><body ng-app="myApp">{{ ["Ari", "likes", "to", "travel"] | filter: isCapitalized}}<script>var app = angular.module（"myApp", []）;app.run（function（$rootScope）{//isCapitalized有且仅有一个参数$rootScope.isCapitalized = function（str）{return str[0] === str[0].toUpperCase（）;};}）;</script></body></html>Angular过滤器的第二个参数，可以是true。--true--对比较值进行，严格比较，如下：{{ ["Ari", "likes", "to", "travel", "e"] | filter: "e" : true}}
2、 numbernumber过滤器将数字格式化成文本，可以为一个数字加上千位分割符，如12345变为12,345。它的参数是可选的，用来控制小数点后的截取位数。另外，传入的是一个非数字字符，会返回空字符串。如下：{{12345 | number:2}}
3、 orderByorderBy过滤器可以将一个数组中的元素进行排序，接收一个参数来指定排序规则，参数可以是一个字符串，表示以该属性名称进行排序。可以是一个函数，定义排序属性。还可以是一个数组，表示依次按数组中的属性值进行排序（若按第一项比较的值相等，再按第二项比较），如下： <！DOCTYPE html><head><meta charset="utf-8"/><script src="angular.js"></script></head><body ng-app="myApp"><div>{{ childrenArray | orderBy : "age" }}</div><！--按age属性值进行排序，若是-age，则倒序--><div>{{ childrenArray | orderBy : ["age","name"] }}</div><！--如果age相同，按照name进行排序--><div>{{ childrenArray | orderBy : orderFunc }}</div><！--按照函数的返回值进行排序--><script>var app = angular.module（"myApp", []）;app.run（function（$rootScope）{$rootScope.childrenArray = [ {name:"Tom", age: 20}, {name:"Mari", age:19}, {name:"Ari", age: 21}, {name:"Jack", age: 19}];$rootScope.orderFunc = function（ele）{return [ele.age, ele.name];}}）;</script></body></html>代码稍多，请自行打开通过上面的例子，我们对Angular内置的过滤器有了一定了解。那么，接下来，我们就一起来看看自定义过滤是如何实现的。Angular的自定义过滤器也比较简单，使用module的filter方法，返回一个函数搞定，且该函数接收的参数值就是过滤值，最后返回处理后的结果。如下：<！DOCTYPE html><head><meta charset="utf-8"/><script src="angular.js"></script></head><body ng-app="myApp">{{ [1,2,3,4,5,6] | filterNumber}}<script>var app = angular.module（"myApp", []）;app.filter（"filterNumber", function（）{return function（input）{var arr = [],len,val;if（input）{len = input.length;while（len--）{（val = input[len]） > 3 && arr.push（val）; }}return arr;}}）;</script></body></html>好了，就先暂且探到这儿吧。一些AngularJS相关文章链接：AngularJS权威教程清晰PDF版 http://www.linuxidc.com/Linux/2015-01/111429.htm希望你喜欢，并分享我的工作~带你走近AngularJS系列：

带你走近AngularJS - 基本功能介绍 http://www.linuxidc.com/Linux/2014-05/102140.htm
带你走近AngularJS - 体验指令实例 http://www.linuxidc.com/Linux/2014-05/102141.htm
带你走近AngularJS - 创建自定义指令 http://www.linuxidc.com/Linux/2014-05/102142.htm

如何在 AngularJS 中对控制器进行单元测试 http://www.linuxidc.com/Linux/2013-12/94166.htm在 AngularJS 应用中通过 JSON 文件来设置状态 http://www.linuxidc.com/Linux/2014-07/104083.htmAngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htmAngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交数据 http://www.linuxidc.com/Linux/2014-07/104402.htmAngularJS 的详细介绍：请点这里
AngularJS 的下载地址：请点这里本文永久更新链接地址：http://www.linuxidc.com/Linux/2016-08/134158.htm