AngularJS学习总结&详细介绍.docx_文客久久网wenke99.com

资源描述

1、新晨科技股份有限公司 AngularJS 介绍 AngularJS 学习文档欧阳龙蛟 2014/1/15 在此处键入文档的摘要。摘要通常是对文档内容的简短总结。在此处键入文档的摘要。摘要通常是对文档内容的简短总结。 AngularJS 学习文档 2 目录 1 前言 4 2 AngularJS 概述 .4 2.1 AngularJS 是什么？ 4 2.2 AngularJS 简单介绍 5 2.3 什么时候该用 AngularJS.5 3 AugularJS 特性 .5 3.1 特性一：双向的数据绑定 .5 3.2 特性二：模板 6 3.3 特性三：MVC 7 3.4 特性四：服务和依赖注入

2、.7 3.5 特性五：指令（Directives） .8 4 功能介绍 9 4.1 数据绑定 .9 4.2 scopes、module、controller .10 4.2.1 scopes .10 4.2.2 module.10 4.2.3 ng-controller 10 4.3 ajax11 4.4 表达式 .12 4.5 过滤器 .12 4.5.1 过滤器使用方式 .13 4.5.2 ng 的内置过滤器 13 4.5.3 自定义过滤器及示例 .15 4.6 指令 .16 4.6.1 样式相关的指令 .17 4.6.2 表单控件功能相关指令 .18 4.6.3 事件绑定相关指令 .18

3、4.6.4 特殊的 ng-src 和 ng-href.19 4.6.5 示例 20 4.7 服务 .21 4.7.1 服务（service）介绍 21 4.7.2 自定义服务 .21 4.7.3 管理服务的依赖关系 .22 4.7.4 示例 23 4.8 依赖注入 DI 24 4.9 路由 26 4.9.1 ngRoute 内容 .26 4.9.2 ng 的路由机制 26 4.9.3 示例 27 4.10 NG 动画效果 29 4.10.1 NG 动画效果简介 .29 4.10.2 示例 30 AngularJS 学习文档 3 5 功能演示 30 6 AngularJS 进阶 .31 6.1

4、数据绑定原理研究 .31 6.1.1 AngularJS 扩展事件循环 .31 6.1.2 $watch 队列（$watch list） 31 6.1.3 $digest 循环 .32 6.1.4 如何进入 angular context .33 6.1.5 使用$watch 来监视 34 6.1.6 总结 36 6.2 自定义指令详解 36 6.2.1 指令的编译过程 .37 6.2.2 指令的使用方式及命名方法 37 6.2.3 自定义指令的配置参数 .37 6.2.3 指令的表现参数 restrict 等 38 6.2.4 指令的行为参数：compile 和 link .40 6.2.5

5、指令的划分作用域参数：scope 42 6.2.6 指令间通信参数：controller 和 require45 6.3 性能及调优 .47 6.3.1 性能测试 .47 6.3.2 七大调优法则 .48 7 总结 50 7.1 页面效果 50 7.2 委派事件（代理事件） 51 7.2.1 NG 循环及事件绑定 .51 7.2.2 jQuery 委派事件 51 AngularJS 学习文档 4 1 前言前端技术的发展是如此之快，各种优秀技术、优秀框架的出现简直让人目不暇接，紧跟时代潮流，学习掌握新知识自然是不敢怠慢。 AngularJS 是 google 在维护，其在国外已经十分火热，

6、可是国内的使用情况却有不小的差距，参考文献/网络文章也很匮乏。这里便将我学习 AngularJS 写成文档，一方面作为自己学习路程上的记录，另一方面也给有兴趣的同学一些参考。首先我自己也是一名学习者，会以学习者的角度来整理我的行文思路，这里可能只是些探索，有理解或是技术上的错误还请大家指出；其次我特别喜欢编写小例子来把一件事情说明白，故在文中会尽可能多的用示例加代码讲解，我相信这会是一种比较好的方式；最后，我深知 AngularJS 的使用方式跟 jquery 的使用方式有很大不同，在大家都有 jquery、ext 经验的条件下对于 angular 的学习会困难重重，不过我更相信在

7、大家的坚持下，能够快速的学好 AngularJS，至少咱也能深入了解到 AngularJS 的基本思想，对咱们以后自己的插件开发、项目开发都会有很大的启示。 2 AngularJS 概述 2.1 AngularJS 是什么？ AngularJs（后面就简称 ng 了）是一个用于设计动态 web 应用的结构框架。首先，它是一个框架，不是类库，是像 EXT 一样提供一整套方案用于设计 web 应用。它不仅仅是一个 javascript 框架，因为它的核心其实是对 HTML 标签的增强。何为 HTML 标签增强？其实就是使你能够用标签完成一部分页面逻辑，具体方式就是通过自定义标签、自定义

8、属性等，这些 HTML 原生没有的标签/属性在 ng 中有一个名字：指令（directive）。后面会详细介绍。那么，什么又是动态 web 应用呢？与传统 web 系统相区别，web 应用能为用户提供丰富的操作，能够随用户操作不断更新视图而不进行 url 跳转。 ng 官方也声明它更适用于开发 CRUD 应用，即数据操作比较多的应用，而非是游戏或图像处理类应用。为了实现这些，ng 引入了一些非常棒的特性，包括模板机制、数据绑定、模块、指令、依赖注入、路由。通过数据与模板的绑定，能够让我们摆脱繁琐的 DOM 操作，而将注意力集中在业务逻辑上。另外一个疑问，ng 是 MVC 框架吗

9、？还是 MVVM 框架？官网有提到 ng 的设计采用了 MVC 的基本思想，而又不完全是 MVC，因为在书写代码时我们确实是在用 ng-controller 这个指令(起码从名字上看，是 MVC 吧)，但这个 controller 处理的业务基本上都是与 view 进行交互，这么看来又很接近 MVVM。让我们把目光移到官网那个非醒目的 title 上： “AngularJS Superheroic JavaScript MVW Framework”。 2.2 AngularJS 简单介绍 AngularJS 重新定义了前端应用的开发方式。面对 HTML 和 JavaScript 之间的界线

10、， AngularJS 学习文档 5 它非但不畏缩不前，反而正面出击，提出了有效的解决方案。很多前端应用的开发框架，比如 Backbone、EmberJS 等，都要求开发者继承此框架特有的一些 JavaScript 对象。这种方式有其长处，但它不必要地污染了开发者自己代码的对象空间，还要求开发者去了解内存里那些抽象对象。尽管如此我们还是接受了这种方式，因为网络最初的设计无法提供我们今天所需的交互性，于是我们需要框架，来帮我们填补 JavaScript 和 HTML 之间的鸿沟。而且有了它，你不用再“直接”操控 DOM，只要给你的 DOM 注上 metadata（即 AngularJS

11、里的 directive 们），然后让 AngularJS 来帮你操纵 DOM。同时，AngularJS 不依赖（也不妨碍）任何其他的框架。你甚至可以基于其它的框架来开发 AngularJS 应用。 API 地址：http:/docs.angularjs.org/api/； AngularJS 在 github 上的中文粗译版地址： 2.3 什么时候该用 AngularJS AngularJS 是一个 MV* 框架，最适于开发客户端的单页面应用。它不是个功能库，而是用来开发动态网页的框架。它专注于扩展 HTML 的功能，提供动态数据绑定（data binding），而且它能跟其它框架

12、（如 jQuery）合作融洽。如果你要开发的是单页应用，AngularJS 就是你的上上之选。Gmail、Google Docs、Twitter 和 Facebook 这样的应用，都很能发挥 AngularJS 的长处。但是像游戏开发之类对 DOM 进行大量操纵、又或者单纯需要极高运行速度的应用，就不是 AngularJS 的用武之地了。 3 AugularJS 特性 AngularJS 是一个新出现的强大客户端技术，提供给大家的一种开发强大应用的方式。这种方式利用并且扩展 HTML，CSS 和 javascript，并且弥补了它们的一些非常明显的不足。本应该使用 HTML 来实现

13、而现在由它开发的动态一些内容。 AngularJS 有五个最重要的功能和特性： 3.1 特性一：双向的数据绑定数据绑定可能是 AngularJS 最酷最实用的特性。它能够帮助你避免书写大量的初始代码从而节约开发时间。一个典型的 web 应用可能包含了 80%的代码用来处理，查询和监听 DOM。数据绑定是的代码更少，你可以专注于你的应用。我们想象一下 Model 是你的应用中的简单事实。你的 Model 是你用来读取或者更新的部分。数据绑定指令提供了你的 Model 投射到 view 的方法。这些投射可以无缝的，毫不影响的应用到 web 应用中。传统来说，当 model 变化了。开

14、发人员需要手动处理 DOM 元素并且将属性反映到这些变化中。这个一个双向的过程。一方面，model 变化驱动了 DOM 中元素变化，另一方面， DOM 元素的变化也会影响到 Model。这个在用户互动中更加复杂，因为开发人员需要处理和 AngularJS 学习文档 6 解析这些互动，然后融合到一个 model 中，并且更新 View。这是一个手动的复杂过程，当一个应用非常庞大的时候，将会是一件非常费劲的事情。这里肯定有更好的解决方案！那就是 AngularJS 的双向数据绑定，能够同步 DOM 和 Model 等等。这里有一个非常简单的例子，用来演示一个 input 输入框和元素的双向

15、绑定(例 01)： Name: Hello, user.name! 说明：实际效果请大家看 AngularJS/demo/index.html 3.2 特性二：模板在 AngularJS 中，一个模板就是一个 HTML 文件。但是 HTML 的内容扩展了，包含了很多帮助你映射 model 到 view 的内容。 HTML 模板将会被浏览器解析到 DOM 中。DOM 然后成为 AngularJS 编译器的输入。 AngularJS 将会遍历 DOM 模板来生成一些指导，即，directive（指令）。所有的指令都负责针对 view 来设置数据绑定。我们要理解 AuguarJS 并不把模

16、板当做 String 来操作。输入 AngularJS 的是 DOM 而非 string。数据绑定是 DOM 变化，不是字符串的连接或者 innerHTML 变化。使用 DOM 作为输入，而不是字符串，是 AngularJS 区别于其它的框架的最大原因。使用 DOM 允许你扩展指令词汇并且可以创建你自己的指令，甚至开发可重用的组件。最大的好处是为设计师和开发者创建了一个紧密的工作流。设计师可以像往常一样开发标签，然后开发者拿过来添加上功能，通过数据绑定将会使得这个过程非常简单。这里有一个例子，我们使用 ng-repeat 指令来循环图片数组并且加入 img 模板，如下： functi

17、on AlbumCtrl($scope) scope.images = “image“:“img/image_01.png“, “description“:“Image 01 description“, “image“:“img/image_02.png“, “description“:“Image 02 description“, “image“:“img/image_03.png“, “description“:“Image 03 description“, “image“:“img/image_04.png“, “description“:“Image 04 description“,

18、“image“:“img/image_05.png“, “description“:“Image 05 description“ ; AngularJS 学习文档 7 这里还有一件事值得提一句，AngularJS 并不强制你学习一个新的语法或者从你的应用中提出你的模板。 3.3 特性三：MVC 针对客户端应用开发 AngularJS 吸收了传统的 MVC 基本原则。MVC 或者 Model-View- Controll 设计模式针对不同的人可能意味不同的东西。AngularJS 并不执行传统意义上的 MVC，更接近于 MVVM（Moodel-View-ViewModel)。 Model mo

19、del 是应用中的简单数据。一般是简单的 javascript 对象。这里没有必要继承框架的 classes，使用 proxy 对象封装或者使用特别的 setter/getter 方法来访问。事实上我们处理 vanilla javascript 的方法就是一个非常好的特性，这种方法使得我们更少使用应用的原型。 ViewModel viewmodel 是一个用来提供特别数据和方法从而维护指定 view 的对象。 viewmodel 是$scope 的对象，只存在于 AnguarJS 的应用中。$scope 只是一个简单的 js 对象，这个对象使用简单的 API 来侦测和广播状态变化。 Co

20、ntroller controller 负责设置初始状态和参数化$scope 方法用以控制行为。需要指出的 controller 并不保存状态也不和远程服务互动。 View view 是 AngularJS 解析后渲染和绑定后生成的 HTML 。这个部分帮助你创建 web 应用的架构。$scope 拥有一个针对数据的参考，controller 定义行为，view 处理布局和互动。 3.4 特性四：服务和依赖注入 AngularJS 服务其作用就是对外提供某个特定的功能。 AngularJS 拥有内建的依赖注入（DI）子系统，可以帮助开发人员更容易的开发，理解和测试应用。 DI 允许你请求你

21、的依赖，而不是自己找寻它们。比如，我们需要一个东西，DI 负责找创建并且提供给我们。为了而得到核心的 AngularJS 服务，只需要添加一个简单服务作为参数，AngularJS 会侦测并且提供给你： function EditCtrl($scope, $location, $routeParams) AngularJS 学习文档 8 / Something clever here. 你也可以定义自己的服务并且让它们注入： angular.module(MyServiceModule, ). factory(notify, $window, function (win) return fu

22、nction (msg) win.alert(msg); ; ); function myController(scope, notifyService) scope.callNotify = function (msg) notifyService(msg); ; myController.$inject = $scope, notify; 3.5 特性五：指令（Directives）指令是我个人最喜欢的特性。你是不是也希望浏览器可以做点儿有意思的事情？那么 AngularJS 可以做到。指令可以用来创建自定义的标签。它们可以用来装饰元素或者操作 DOM 属性。可以作为标签、属性、注释

23、和类名使用。这里是一个例子，它监听一个事件并且针对的更新它的$scope ，如下： myModule.directive(myComponent, function(mySharedService) return restrict: E, controller: function($scope, $attrs, mySharedService) $scope.$on(handleBroadcast, function() $scope.message = Directive: + mySharedService.message; ); , replace: true, template: ;

24、 ); 然后，你可以使用这个自定义的 directive 来使用：使用一系列的组件来创建你自己的应用将会让你更方便的添加，删除和更新功能。 AngularJS 学习文档 9 4 功能介绍 4.1 数据绑定 AngularJS 的双向数据绑定，意味着你可以在 Mode(JS)中改变数据，而这些变动立刻就会自动出现在 View 上，反之亦然。即：一方面可以做到 model 变化驱动了 DOM 中元素变化，另一方面也可以做到 DOM 元素的变化也会影响到 Model。在我们使用 jQuery 的时候，代码中会大量充斥类似这样的语句： var val = $(#id). val(); $(#i

25、d).html(str);等等，即频繁的 DOM 操作（读取和写入），其实我们的最终目的并不是要操作 DOM，而是要实现业务逻辑。ng 的绑定将让你摆脱 DOM 操作，只要模板与数据通过声明进行了绑定，两者将随时保持同步，最新的数据会实时显示在页面中，页面中用户修改的数据也会实时被记录在数据模型中。从 View 到 Controller 再到 View 的数据交互（例 01）： Hello, user.name ！关键： ng-app 、 ng-model 和 user.name 首先：元素的 ng-app 属性。标识这个 DOM 里面的内容将启用 AngularJS 应用。其

26、次：告诉 AngularJS，对页面上的“user.name” 这个 Model 进行双向数据绑定。第三：告诉 AngularJS，在“ user.name”这个指令模版上显示“user.name”这个 Model 的数据。从 Server 到 Controller 再到 View 的数据交互（例 02）： AJAX 获取名字 demoApp.controller(“demoController“, function($http, $scope) $scope. getAjaxUser = function() / $http.get(url:“/xxx.action“).success(

27、function(data) / $scope.user= data; / ); $scope.user = “name“:“从 JOSN 中获取的名称“,“age“:22; ; ); 改变$scope 中的 user，View 也会自动更新。 AngularJS 学习文档 10 4.2 scopes、module、controller 4.2.1 scopes $scope 是一个把 view（一个 DOM 元素）连结到 controller 上的对象。在我们的 MVC 结构里，这个 $scope 将成为 model，它提供一个绑定到 DOM 元素（以及其子元素）上的 excecution

28、context。尽管听起来有点复杂，但 $scope 实际上就是一个 JavaScript 对象，controller 和 view 都可以访问它，所以我们可以利用它在两者间传递信息。在这个 $scope 对象里，我们既存储数据，又存储将要运行在 view 上的函数。每一个 Angular 应用都会有一个 $rootScope。这个 $rootScope 是最顶级的 scope，它对应着含有 ng-app 指令属性的那个 DOM 元素。 app.run(function($rootScope) $rootScope.name = “张三“; ); 如果页面上没有明确设定 $scope

29、，Angular 就会把数据和函数都绑定到这里，第一部分中的例子就是靠这一点成功运行的。这样，我们就可以在 view 的任何地方访问这个 name 属性，使用模版表达式，像这样： name 4.2.2 module 首先需要明确一下模板的概念。在我还不知道有模板这个东西的时候，曾经用 js 拼接出很长的 HTML 字符串，然后 append 到页面中，这种方式想想真是又土又笨。后来又看到可以把 HTML 代码包裹在一个标签中当作模板，然后按需要取来使用。在 ng 中，模板十分简单，它就是我们页面上的 HTML 代码，不需要附加任何额外的东西。在模板中可以使用各种指令来增强它的

30、功能，这些指令可以让你把模板和数据巧妙的绑定起来。在标签上多了一个属性 ng-app=”MyApp”，它的作用就是用来指定 ng 的作用域是在标签以内部分。在 js 中，我们调用 angular 对象的 module 方法来声明一个模块，模块的名字和 ng-app 的值对应。这样声明一下就可以让 ng 运行起来了。示例： var demoApp = angular.module(demoApp, ); 4.2.3 ng-controller 要明确创建一个$scope 对象，我们就要给 DOM 元素安上一个 controller 对象，使用的是 ng-controller 指令属性

31、： person.name ng-controller 指令给所在的 DOM 元素创建了一个新的$scope 对象，并将这个$scope 对象包含进外层 DOM 元素的 $scope 对象里。在上面的例子里，这个外层 DOM 元素的 AngularJS 学习文档 11 $scope 对象，就是 $rootScope 对象。这个 scope 链是这样的：所有 scope 都遵循原型继承（prototypal inheritance），这意味着它们都能访问父 scope 们。对任何属性和方法，如果 AngularJS 在当前 scope 上找不到，就会到父 scope 上去找，如果在父 sc

32、ope 上也没找到，就会继续向上回溯，一直到 $rootScope 上。即如果 controller 是多层嵌套的，就会从最里面一直往外找，这个 scope 链是这样的：唯一的例外：有些指令属性可以选择性地创建一个独立的 scope，让这个 scope 不继承它的父 scope 们，这个会在指令详解中说明。 4.3 ajax $http 服务是 AngularJS 的核心服务之一，它帮助我们通过 XMLHttpRequest 对象或 JSONP 与远程 HTTP 服务进行交流。 $http 服务是这样一个函数：它接受一个设置对象，其中指定了如何创建 HTTP 请求；它将返回一个承诺（*

33、参考 JavaScript 异步编程的 promise 模式），其中提供两个方法： success 方法和 error 方法。 demoApp.controller(“demoController“, function($http, $scope) $scope. getAjaxUser = function() $http.get(url:“/xxx.action“).success(function(data) alert(data); ).error(function() AngularJS 学习文档 12 Alert(“出错了！”); ); ; ); AngularJS 的 AJAX

34、与 jquery 等框架的 AJAX 基本一致，这里就不多说了。 4.4 表达式 ng 中的表达式与 javascript 表达式类似但是不可以划等号，它是 ng 自己定义的一套模式。表达式可以作为指令的值，如 ng-modle=”people.name”、ng-click=”showMe()” ，看起来是如此像字符串，故而也叫字符串表达式。也可以在标记中使用表达式，如1+2，或者与过滤器一起使用1+2 | currency。在框架内部，字符串不会简单的使用 eval()来执行，而是有一个专门的$parse 服务来处理。在 ng 表达式中不可以使用循环语句、判断语句，事实上在模板中

35、使用复杂的表达式也是一个不推荐的做法，这样视图与逻辑就混杂在一起了我们在使用其他模板库时，一般都会有模板的循环输出、分支输出、逻辑判断等类似的控制。要想理解指令属性的运作，我们必须先理解表达式。在之前的例子里我们已经见过表达式，例如 user.name 。请查看例 03、例 04、例 05。 8 + 1 9 person “name“:“Ari Lerner“ 10 * 3.3 | currency $33.00 表达式粗略来看有点像 eval(javascript) 的结果。它们会经过 Angular.js 的处理，从而拥有以下重要而独特的性质：所有表达式都在 scope 这

36、个 context 里被执行，因此可以使用所有本地 $scope 中的变量。如果一个表达式的执行导致类型错误或引用错误，这些错误将不会被抛出。表达式里不允许任何控制函数流程的功能（如 if/else 等条件语句）表达式可接受一个或多个串联起来的过滤器。 4.5 过滤器过滤器（filter ）正如其名，作用就是接收一个输入，通过某个规则进行处理，然后返回处理后的结果。主要用在数据的格式化上，例如获取一个数组中的子集，对数组中的元素进行排序等。过滤器通常是伴随标记来使用的，将你 model 中的数据格式化为需要的格式。表单的控制功能主要涉及到数据验证以及表单控件的增强。ng 内置了

37、一些过滤器，它们是： currency(货币)、date(日期)、 filter(子串匹配)、json(格式化 json 对象)、limitTo(限制个数)、 lowercase(小写)、uppercase( 大写) 、number( 数字) 、orderBy(排序) 。 AngularJS 学习文档 13 4.5.1 过滤器使用方式总共九种。除此之外还可以自定义过滤器，这个就强大了，可以满足任何要求的数据处理。Filter 还是很简单的，需要明白的是内置的 filter 如何使用，以及自己如何定义一个 filter。 filter 的两种使用方法： 1. 在模板中使用 filter 我

39、使用 filter 我们的 js 代码中也可以使用过滤器，方式就是我们熟悉的依赖注入，例如我要在 controller 中使用 currency 过滤器，只需将它注入到该 controller 中即可，代码如下： app.controller(testC,function($scope,currencyFilter) $scope.num = currencyFilter(123534); 在模板中使用num就可以直接输出 $123,534.00 了！在服务中使用 filter 也是同样的道理。如果你要在 controller 中使用多个 filter，并不需要一个一个注入吗，ng 提供了

40、一个 $filter 服务可以来调用所需的 filter，你只需注入一个$filter 就够了，使用方法如下： app.controller(testC,function($scope,$filter) $scope.num = $filter(currency)(123534); $scope.date = $filter(date)(new Date(); 可以达到同样的效果。好处是你可以方便使用不同的 filter 了。 4.5.2 ng 的内置过滤器 ng 内置了九种过滤器，使用方法都非常简单，看文档即懂。不过为了以后不去翻它的文档，我在这里还是做一个详细的记录。 currency(

41、货币)、date(日期)、 filter(子串匹配)、json(格式化 json 对象)、limitTo(限制个数)、 lowercase(小写)、uppercase( 大写) 、number( 数字) 、orderBy(排序) 1. currency (货币处理) 使用 currency 可以将数字格式化为货币，默认是美元符号，你可以自己传入所需的符 AngularJS 学习文档 14 号，例如我传入人民币： num | currency : ￥ 2. date (日期格式化) 原生的 js 对日期的格式化能力有限，ng 提供的 date 过滤器基本可以满足一般的格式化要求。用法如下： d

42、ate | date : yyyy-MM-dd hh:mm:ss EEEE 参数用来指定所要的格式，y M d h m s E 分别表示年月日时分秒星期，你可以自由组合它们。也可以使用不同的个数来限制格式化的位数。另外参数也可以使用特定的描述性字符串，例如“shortTime”将会把时间格式为 12:05 pm 这样的。ng 提供了八种描述性的字符串，个人觉得这些有点多余，我完全可以根据自己的意愿组合出想要的格式，不愿意去记这么多单词 3. filter(匹配子串) 这个名叫 filter 的 filter。用来处理一个数组，然后可以过滤出含有某个子串的元素，作为一个子

43、数组来返回。可以是字符串数组，也可以是对象数组。如果是对象数组，可以匹配属性的值。它接收一个参数，用来定义子串的匹配规则。下面举个例子说明一下参数的用法，我用现在特别火的几个孩子定义了一个数组： $scope.childrenArray = name:kimi,age:3, name:cindy,age:4, name:anglar,age:4, name:shitou,age:6, name:tiantian,age:5 ; $scope.func = function(e)return e.age4; childrenArray | filter : a /匹配属性值中含有 a 的 c

44、hildrenArray | filter : 4 /匹配属性值中含有 4 的 childrenArray | filter : name : i /参数是对象，匹配 name 属性中含有 i 的 childrenArray | filter : func /参数是函数，指定返回 age4 的 4. json(格式化 json 对象) json 过滤器可以把一个 js 对象格式化为 json 字符串，没有参数。这东西有什么用呢，我一般也不会在页面上输出一个 json 串啊，官网说它可以用来进行调试，嗯，是个不错的选择。或者，也可以用在 js 中使用，作用就和我们熟悉的 JSON.strin

45、gify()一样。用法超级简单： jsonTest | json AngularJS 学习文档 15 5. limitTo(限制数组长度或字符串长度) limitTo 过滤器用来截取数组或字符串，接收一个参数用来指定截取的长度，如果参数是负值，则从数组尾部开始截取。个人觉得这个 filter 有点鸡肋，首先只能从数组或字符串的开头/尾部进行截取，其次，js 原生的函数就可以代替它了，看看怎么用吧： childrenArray | limitTo : 2 /将会显示数组中的前两项 6. lowercase(小写) 把数据转化为全部小写。太简单了，不多解释。同样是很鸡肋的一个 filter，

46、没有参数，只能把整个字符串变为小写，不能指定字母。怎么用我都懒得写了。 7. uppercase(大写) 同上。 8. number(格式化数字 ) number 过滤器可以为一个数字加上千位分割，像这样，123,456,789 。同时接收一个参数，可以指定 float 类型保留几位小数： num | number : 2 9. orderBy(排序) orderBy 过滤器可以将一个数组中的元素进行排序，接收一个参数来指定排序规则，参数可以是一个字符串，表示以该属性名称进行排序。可以是一个函数，定义排序属性。还可以是一个数组，表示依次按数组中的属性值进行排序（若按第一项比较的值相等，

47、再按第二项比较），还是拿上面的孩子数组举例： childrenArray | orderBy : age /按 age 属性值进行排序，若是-age，则倒序 childrenArray | orderBy : orderFunc /按照函数的返回值进行排序 childrenArray | orderBy : age,name /如果 age 相同，按照 name 进行排序内置的过滤器介绍完了，写的我都快睡着了。。。正如你所看到的，ng 内置的过滤器也并不是万能的，事实上好多都比较鸡肋。更个性化的需求就需要我们来定义自己的过滤器了，下面来看看如何自定义过滤器。 4.5.3 自定

48、义过滤器及示例 filter 的自定义方式也很简单，使用 module 的 filter 方法，返回一个函数，该函数接收 AngularJS 学习文档 16 输入值，并返回处理后的结果。话不多说，我们来写一个看看。比如我需要一个过滤器，它可以返回一个数组中下标为奇数的元素，代码如下： app.filter(odditems,function() return function(inputArray) var array = ; for(var i=0;iinputArray.length;i+) if(i%2!=0) array.push(inputArrayi); return array; ); 格式就是这样，你的处理逻辑就写在内部的那个闭包函数中。你也可以让自己的过滤器接收参数，参数就定义在 return 的那个函数中，作为第二个参数，或者更多个参数也可以。自定义过滤器实例（例 04）： /* View html */ First name： Last name： First name：user.firstName Last name：user.

展开阅读全文