《angularJs知识点.docx》由会员分享，可在线阅读，更多相关《angularJs知识点.docx（23页珍藏版）》请在三一办公上搜索。
1、angularJs知识点Angular JS MVC： . 3 MVC . 3 JS MVC . 3 Angular JS MVC：MVVM . 4 $scope作用域 . 5 $scope . 5 作用域的生命周期 . 5 $rootScope . 6 控制器作用域继承 . 7 Angular JS run 方法 . 8 Angular JS依赖注入中代码压缩问题 . 9 Angular JS 的$watch方法 . 10 $digest循环 . 10 $watch列表：$watchers . 10 脏值检查 . 11 $watch方法 . 12 Angular JS 的$apply方法 .
2、 14 $apply . 14 何时使用$apply . 15 Angular JS工具方法 . 16 angular.bind(self,fn,args) . 16 angular.copy(source,destination) . 17 angular.equals(o1,o2) . 18 angular.extend(dst,src) . 18 angular.forEach(obj,iterator,context) . 19 angular.fromJson(string) . 19 angular.bootstrap(element,modules) . 20 Angular.e
3、lement . 21 其他. 21 类型判定 . 21 Angular JS使用jQuery . 22 Angular JS MVC： MVC MVC是一套设计模式，可以分层设计应用。将数据与用户视图解耦，通过中间控制器处理业务逻辑、用户输入以及相应的逻辑跳转。 l 模型：是应用程序中用于处理应用程序数据逻辑的部分，通常模型对象负责在数据库中存取数据。 l 视图：是应用程序中处理数据显示的部分，通常思路是依据模型数据创建的。 l 控制：是应用程序中处理用户交互的部分，通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。 JS MVC 传统web应用将大量的业务逻辑放在服务端执行，客
4、户端只负责页面交互，这样会导致服务端负载过大，分布式处理能力弱等缺陷。 JS MVC web应用程序架构主要致力于将服务端的逻辑处理转移到客户端。 优点： l 可扩展性：服务器处理能力保持不变的前提下，应用被越多的客户使用，只需增加客户端机器即可。 l 实时的用户响应：客户端代码可以立即对用户的输入作出反应，不需要等待网络传输。 l 结构清晰的编程模型：用户界面可以有效的分离应用程序的业务逻辑。 l 客户端状态管理：在客户端维护临时会话状态信息可以减少服务器上的内存负载。 l 离线应用：如果大部分应用程序的代码已经在客户端运行，那么创建一个离线版本的应用程序将变的更加容易。 Angular J
5、S MVC：MVVM Angular JS引入了软件设计的MVC模式。但不完全是MVC模式，而是更倾向于MVVM，而angular JS中的作用域$scope被认为是ViewModel。采用了数据绑定，View的变动，自动反映在 ViewModel，反之亦然。 l 模型：model就是数据模型。 视图对象需要被$scope引用，可以使用任何类型的JavaScript对象、数组、基本类型。并提供一些API监控其状态。 l 视图：view就是用HTML，CSS写的UI视图代码，其中包含Angular JS的指令，表达式。 l 业务控制：controller控制器起到设置$scope对象的初始状态以
6、及后续的动作关联。 在angular JS控制器中我们无需添加对于DOM级的事件监听，这些在Angular JS中已经内置了。在UI节点DOM事件发生后Angular JS会自动转到scope上的某个行为逻辑。 这样就奠定了angular JS MVC应用架构。$scope对象拥有数据的引用关系、控制器定义行为、视图处理页面展示布局以及相应的处理跳转。 $scope作用域 $scope $scope对象是定义应用业务员逻辑、控制器方法和视图属性的地方。 作用域是视图和控制器之间的胶水。在应用将视图渲染并呈现给用户之前，视图中的模板会和作用域进行连接，然后应用会对DOM进行设置以便将属性变化通知
7、给angular JS。 作用域是应用状态的基础。基于动态绑定，可以依赖视图在修改数据时立刻更新$scope，也可以依赖$scope在其发生变化时立刻重新渲染视图。 Angular JS将$scope设计成和DOM类似的结构，因此$scope可以进行嵌套，也就是说可以引用父级$scope中的属性。 Angular JS将应用的业务逻辑都放在控制器中，而将相关的数据都放在控制器的作用域中。 $scope对象就是一个普通的JavaScript对象，我们可以在其上随意修改或添加属性。 开发AngularJS应用的大部分工作内容，就是构建作用域及其相关的功能。 作用域包含了渲染视图时所需的功能和数据，
8、它是所有视图的唯一源头。可以将作 用域理解成视图模型。 作用域的生命周期 l 创建：在创建控制器或指令时， AngularJS会用$injector创建一个新的作用域，并在这个新建的控制器或指令运行时将作用域传递进去。 l 链接:当Angular开始运行时，所有的$scope对象都会附加或者链接到视图中。所有创建$scope对象的函数也会将自身附加到视图中。这些作用域将会注册当Angular应用上下文中发生变化时需要运行的函数。 这些函数被称为$watch函数， Angular通过这些函数获知何时启动事件循环。 l 更新:当事件循环运行时，它通常执行在顶层$scope对象上，每个子作用域都执行
9、自己的脏值检测。每个监控函数都会检查变化。如果检测到任意变化， $scope对象就会触发指定的回调函数。 l 销毁:当一个$scope在视图中不再需要时，angular JS将会自动清理和销毁这个作用域。也可以使用这个$scope上叫做$destory的方法来清理这个作用域。 $rootScope Angular JS启动并生成视图时，会将根ng-app元素同$rootScope进行绑定。$rootScope是所有$scope对象的最上层。 $rootScope是angular JS中最接近全局作用域的对象。 我们在$rootScope中设置了一个name变量并在视图中引用了它： var ap
10、p = angular.module(myApp, ); app.run(function ($rootScope) $rootScope.name = World; ); 在视图中可以引用这个name属性并将它展示给用户： Hello name 我们可以不将变量设置在$rootScope上，而是用控制器显式创建一个隔离的子$scope对象，把它设置到这个子对象上。使用ng-controller指令可以将一个控制器对象附加到DOM元素上，如下所示： Hello name ,age 我们可以创建一个控制器来管理与其相关的变量，而不用将name变量直接放在$rootScope上： app.cont
11、roller(MyController, function ($scope, $rootScope) $scope.name = Ari; $rootScope.age = 30; ); ng-controller指令为这个DOM元素创建了一个新的$scope对象，并将它嵌套在$rootScope中。 控制器作用域继承 AngularJS应用的任何一个部分，无论它渲染在哪个上下文中，都有父级作用域存在。对ng-app所处的层级来讲，它的父级作用域就是$rootScope。 有一个例外：在指令内部创建的作用域被称作孤立作用域。 除了孤立作用域外，所有的作用域都通过原型继承而来，也就是说它们都可以
12、访问父级作域。如果熟悉面向对象编程，对这个机制应该不会陌生。 默认情况下， AngularJS在当前作用域中无法找到某个属性时，便会在父级作用域中进查找。如果AngularJS找不到对应的属性，会顺着父级作用域一直向上寻找，直到抵$rootScope为止。如果在$rootScope中也找不到，程序会继续运行，但视图无法更新。 通过例子来看一下这个行为。创建一个ParentController，其中包含一个user对象，再创建一个ChildController来引用这个对象： app.controller(ParentController, function ($scope) $scope.pe
13、rson = greeted: false; ); app.controller(ChildController, function ($scope) $scope.sayHello = function $scope.person.name = Ari Lerner; ; ); 如果我们将ChildController置于ParentController内部，那ChildController的$scope对象的父级作用域就是ParentController的$scope对象。根据原型继承的机制，我们可以在子作用域中访问ParentController的$scope对象。 例如，我们可以在Ch
14、ildController的DOM元素中访问定义在ParentController中的person对象。 Say hello person person /点击前:Say hello greeted:false, /点击后:Say hellogreeted:false,name:Ari Lerner 控制器的这种嵌套结构和和DOM的嵌套结构很相似。 Angular JS run 方法 运行块在注入器创建之后被执行，它是所有AngularJS应用中第一个被执行的方法。 运行块是AngularJS中与main方法最接近的概念。运行块中的代码块通常很难进行单元测试，它是和应用本身高度耦合的。 运行块
15、通常用来注册全局的事件监听器或初始化全局数据，只对全局作用域起作用，如$rootScope。例如，我们会在.run块中设置路由事件的监听器以及过滤未经授权的请求。 假设我们需要在每次路由发生变化时，都执行一个函数来验证用户的权限，放置这个功能唯 一合理的地方就是run方法： angular.module(myApp, ).run(function($rootScope, AuthService) $rootScope.$on($routeChangeStart, function(evt, next, current) / 如果用户未登录 if (!AuthService.userLogged
16、In) if (next.templateUrl = login.html) / 已经转向登录路由因此无需重定向 else $location.path(/login); ); ); run函数接受一个参数。 Initialize Fn Angular JS在注入器创建后会执行这个函数。 Angular JS依赖注入中代码压缩问题 由于AngularJS是通过控制器构造函数的参数名字来推断依赖服务名称的。所以如果你要压缩控制器的JS代码，它所有的参数也同时会被压缩，这时候依赖注入系统就不能正确的识别出服务了。 如压缩前的代码为： var app = angular.module(app,);
17、app.controller(MainCtrl, function($scope, $timeout) $timeout(function console.log($scope); , 1000); ); 压缩后则会变为: app.controller(MainCtrl,function(e,t)t(functionconsole.log(e),1e3) 那么就不知道MainCtrl依赖于什么了。 为了克服压缩引起的问题，只要在控制器函数里面给$inject属性赋值一个依赖服务标识符的数组： MainCtrl.$inject = $scope, $timeout; 另一种方法也可以用来指定依赖
18、列表并且避免压缩问题使用Javascript数组方式构造控制器：把要注入的服务放到一个字符串数组里，数组最后一个元素是控制器的方法函数： app.controller(MainCtrl, $scope, $timeout, function($scope, $timeout) $timeout(function console.log($scope); , 1000); ); 上面提到的两种方法都能和Angular JS可注入的任何函数完美协作，要选哪一种方式完全取决于你们项目的编程风格，建议使用数组方式。 Angular JS 的$watch方法 $digest循环 在$watch方法前，先
19、讲一下$digest循环。 在标准的浏览器流程中，当事件被触发时，浏览器会执行注册给该事件的回调函数。当事件被触发时， JavaScript就会创建一个事件对象，并执行这个事件对所在的监听特定事件的所有函数。然后它会运行JavaScript函数内的回调方法，这会回到浏览器中，还可能更新DOM。同一时间不能运行两个事件。浏览器会等待前一个事件处理程序执行完成，再调用下一个事件处理程序。 在非Angular JavaScript环境中，可以给div的点击事件附加一个回调函数。无论何时，只要发现元素上的点击事件，这个回调函数就会运行： var div = document.getElementByI
20、d(clickDiv); div.addEventListener(click, function(evt) console.log(evt, evt); ); 无论何时，只要浏览器检测到点击事件， 就会调用使用addEventListener注册到文档上的函数。 当我们将Angular混入这个流程中时，它会扩展这个标准的浏览器流程，创建一个Angular上下文。这个Angular上下文指的是运行在Angular事件循环内的特定代码，该Angular事件循环通常被称作$digest循环。为了理解这个Angular上下文，需要看看在它里面到底发生了什么。那我们就来看看$digest循环中的重要部
21、分：$watch列表。 $watch列表：$watchers 每当我们在视图中追踪一个事件时，会给它注册一个回调函数，然后希望在页面中触发该事件时调用这个回调函数。例子： Hello name 无论何时，只要用户更新这个输入字段， UI中的 name 就会改变。发生这一变化是因为我们把UI中的输入字段绑定给了$scope.name属性。为了更新这个视图，Angular需要追踪变化。它是通过给$watch列表添加一个监控函数做到这一点的。 $scope对象上的属性只会在其被用于视图时绑定。在上述例子中，我们只给$watch列表添加了一个函数。记住，对于所有绑定给同一$scope对象的UI元素，只
22、会添加一个$watch到$watch列表中。 这些$watch列表会在$digest循环中通过一个叫做“脏值检查”的程序解析。 脏值检查 脏值检查是一个简单的过程，可归结为一个非常基础的概念：检查值是否发生了变化，而整个应用还没同步该变化。 Angular应用持续跟踪当前监控的值。 Angular会遍历$watch列表，如果从旧值更新后的值没有发生变化，它会继续遍历监控列表。如果值发生了变化，该应用会启用新值并继续遍历$watch列表，如图所示。 Angular遍历完整个$watch列表，只要有任何值发生变化，应用将会退回到$watch循环中，直到检测到不再有任何变化。 为什么要再次运行这一循
23、环？如果有一个名为$scope.full_name的属性由$scope.first_name + $scope.last_name组成，那么这些值的任何变化都会改变$scope.full_name，因此循环需要再次执行以确认不再有任何变化了。 如果这个循环运行10次或者更多次， Angular应用会抛出一个异常，同时停止运行。 退出$digest循环后，浏览器会重绘DOM已刷新视图。 $watch方法 $scope对象上的$watch方法会给Angular事件循环内的每个$digest调用装配一个脏值检查。如果在表达式上检测到变化， Angular总是会返回$digest循环。 $watch函
24、数本身接受两个必要参数和一个可选的参数： watchExpression(对象属性/函数) watchExpression可以是一个作用域对象的属性，或者是一个函数。在$digest循环中的每个$digest调用都会涉及它。 如果watchExpression是一个字符串， Angular会在$scope上下文中对它求值。如果它是一个函数，那么Angular会认为它会返回应该被监控的值。 listener/callback 作为回调的监听器函数，它只会在watchExpression的当前值与先前值不相等时调用。 objectEquality objectEquality是一个进行比较的布尔值
25、，用来告诉Angular是否检查严格相等。 $watch函数会给监听器返回一个注销函数，我们可以调用这个注销函数来取消Angular对当前值的监控。 /. var unregisterWatch = $scope.$watch(newUser.email,function(newVal, oldVal) if (newVal = oldVal) return; / 初始化 ); / . / 稍后，可以通过调用这个注销函数来注销这个监控器 unregisterWatch; 在这个例子中，假如完成了对newUser.email的监控，那么可以通过调用它所返回的注销函数来清除这个监控器。 例如，你想
26、要解析一个输入字段的值，然后使用空格分割全名的方式找到名字和姓氏。假定给定的视图看起来像这样： 我们在full_name属性上设置一个$watch监听器来检测值的任意变化。也就是在full_name属性上设置$watch函数。 angular.module(myApp).controller(MyController, $scope, function($scope) $scope.$watch(full_name, function(newVal, oldVal) / newVal表示在这里可以用的full_name新值 / 而oldVal表示full_name的旧值 ); ); 在这个例子
27、中，我们设置了一个AngularJS表达式，这会让Angular应用“监控full_name属性任何可能的变化，然后在检测到变化时运行指定的函数”。 监听函数会在初始化时被调用一次，而此时newVal和oldVal的值都为undefined。在这种情况下，如果正处在初始化阶段或者先前的值发生了变化，通常最好是检查内部的表达式。在监控函数内很容易实现这一检查，就像这样： $scope.$watch(full_name, function(newVal, oldVal) if(newVal = oldVal) / 只会在监控器初始化阶段运行 else / 初始化之后发生的变化 ); 在这段代码中，
28、 $scope.$watch函数在$scope对象上为full_name属性设置了一个扩展：$watchCollection(obj,listener),可以对某个对象或数组进行监控,只要对象中属性发生变化就触发监听回调。用法同$watch。 Angular JS 的$apply方法 $apply $apply函数可以从Angular框架的外部让表达式在Angular上下文内部执行。例如，假设你实现了一个setTimeout或者使用第三方库并且想让事件运行在Angular上下文内部时，就必须使用$apply。 $apply函数接受一个可选的参数： expression 这个表达式可选地接受一个
29、字符串或函数，并且是在当前作用域内执行。 如果传入一个字符串， $apply首先会在这个字符串上调用$eval，以强制Angular在局部作用域上下文中使用$eval运行字符串表达式。 如果传入一个函数，这个函数将会在所传入的函数作用域上执行。$exceptionHandler服务会捕获和处理$eval方法抛出的所有异常。最后， $apply方法还会直接调用$digest循环。 / 使用要eval的字符串调用$apply示例 $scope.$apply(message = Hello World); / 使用函数的方式并给函数传入一个作用域 $scope.$apply(function(sco
30、pe) / 然后在函数中使用传入作用域 scope.message = Hello World; ); / 使用函数时忽略作用域 $scope.$apply(function $scope.message = Hello World; ); / 或者通过在操作的尾部调用$apply以强制运行$digest循环，即强制检测$watch列表的变化。 $scope.apply; 简而言之，使用$scope.$apply时其实就是将对象的变化通知angular来刷新自己(视图，模型)。 如果在事件被触发时调用$apply，就会使用Angular事件循环来运行它。如果没有调用$apply，就不会在事件循
31、环内执行这个函数，而它会运行在Angular上下文外部。 注意：请把要执行的代码和函数传递给$apply 去执行，而不要自已执行那些函数然后再调用$apply。当我们将function传递给$apply执行时，这个function会被包装到一个trycatch块中，所以一旦有异常发生，该异常会被$exceptionHandler service处理。 何时使用$apply 通常可以依赖于Angular提供的可用于视图中的任意指令来调用$apply。所有ng-event指令都会自动调用$apply。 此外还可以依赖于一系列Angular内置的服务来调用$digest。比如$http服务会在XHR
32、请求完成并触发更新返回值之后调用$apply。 无论何时我们手动处理事件，使用第三方框架，都可以使用$apply函数让Angular返回$digest循环。 当我们将jQuery和Angular集成在一起时，就需要使用$apply，因为Angular不会察觉到执行在Angular上下文外部的事件。例如，在使用jQuery插件时，就需要使用$apply将来自jQuery的值传递到Angular应用中。在这里，我们构建了一个简单的指令，指令中我们在元素上使用了datepicker这个jQuery插件方法。datepicker插件暴露了一个onSelect事件，这个事件会在用户选择日期时触发。为了在
33、Angular应用内部获取用户选择的日期，我们需要在$apply函数内运行datepicker的回调函数。ele.datepicker函数是由jQuery datepicker插件提供的可用于DOM元素的属性方法。要让它工作起来，需要确保在页面上引入了jQuery和jQuery datepicker插件。 ctrl.$setViewValue函数是在DOM元素上使用ng-model时提供的指令。 app.directive(myDatepicker, function return function(scope, ele, attrs, ctrl) $(function / 在元素上调用datepicker方法 ele.datepicker( dateFormat: mm/dd/yy, onSelect: function(date) scope.$apply(function ctrl.$setViewValue(date); ); ); ); ); Angular JS
