《AngularJS的介绍.ppt》由会员分享，可在线阅读，更多相关《AngularJS的介绍.ppt（23页珍藏版）》请在三一办公上搜索。
1、AngularJS的介绍,内容提要,第一部分：什么是AngularJs?第二部分：一个简单的例子 第三部分：四大特性（MVC，模块化，双向数据绑定，指令）第四部分：依赖注入 第五部分：服务，路由，过滤器 第六部分：AngularJS的优势与缺点,第一部分,什么是AngularJs?,什么是AngularJs?,AngularJS是协助搭建单页面工程的开源前端框架。它通过MVC模式使得开发与测试变得更容易。AngularJS试图成为WEB应用中的一种端对端的解决方案。它将指导开发整个应用。AngularJS于2009年发布第一个版本，由Google进行维护，压缩版94k。,AngularJs的核
2、心思想,将视图与业务逻辑解耦。在AngularJS中通过数据视图双向绑定实现。这将提高代码的可测试性。,UI视图,数据模型,视图、数据双向更新,这个过程由AngularJs自动进行开发者无需关注,遵循MVC模式开发，鼓励视图、数据、逻辑组件间松耦合。,将测试与应用程序编写同等重要。在编写模块同时编写测试。因为各组件的松耦合，使得这种测试得以实现。,应用程序页面端与服务器端解耦。两方只需定义好通信API，即可并行开发。,一个简单的例子,来看看使用AngularJs怎么做,几乎没有DOM操作，更专注于业务逻辑！,编写HTML,按名字排序 按年龄排序 phone.name phone.snippet
3、 phone.age,ng-app：AngularJS程序入口，对该标签内的元素进行初始化。ng-controller：在当前元素范围内绑定指定的控制器(controller)。ng-model：指定当前元素与数据模型（$scope）中的属性绑定，如果数据模型中没有此属性，会自动新建一个。ng-repeat：循环$scope中的属性，类似于#each beansxxx：花括号表示读取某一属性值filter、orderBy：过滤器。filter可以根据指定的属性过滤数据(例子里是quer属性)。orderBy是排序过滤器。这两个过滤器都是内置的。过滤器是可自定义的。,编写控制器Controlle
4、r,var PhoneListCtrl=$scope,$http,function($scope,$http)$http.get(./json/test-1.json).success(function(data)$scope.phones=data;);$scope.sortType=age;,PhoneListCtrl 控制器。控制器的声明方式是 var c1=ser1,ser2,functionc1是控制器的名字，ser1、ser2是控制器所依赖的服务，以声明的方式注入到控制器中。例子中注入了$scope(数据模型)、$http(封装了ajax的服务)。这两个服务都是angularjs内
5、置服务，服务是可以自定义的。$scope.phones=data;在这个地方后台返回的数据应用到了数据模型中，这时前台UI会自动响应更新。,四大核心特性,模块化,MVC,指令,双向数据绑定,模块,在AngularJS中，模块负责组织、启动、实例化应用。,模块的简单写法：,angular.module(modulename,x1,x2)/依赖于x1、x2模块.directive(directiveName,function().factory(a,function()return 123;)/创建服务.filter(b,function()/创建过滤器.value(d,123)/创建变量，创建后
6、可修改.contract(c,324)/创建常量创建后不可修改,双向数据绑定,目前为止，js中唯一实现双向数据绑定,greeting.text,Angular,指令,指令是AngularJS用来扩展浏览器能力的技术之一。在DOM编译期间，和HTML关联着的指令会被检测到，并且被执行。这使得指令可以为DOM指定行为，或者改变DOM的结构。,E（元素）A（属性，默认值）C（类名）M（注释）,依赖注入,AngularJS中的依赖注入,function mycontroller($scope,$timeout)/直接在方法参数中声明,第一种方式：通过方法参数名声明依赖。这种方式不推荐使用，因为js文件
7、压缩后方法参数名会改变。,var mycontroller=$scope,$timeout,function(scope,tout),第二种方式：声明一个数组，依赖列表放数组的前部，注入目标放数组最后一个元素。推荐使用这个方法。,var mycontroller=function(scope,tout);mycontroller.$inject=$scope,$timeout;,第三种方式：通过$inject属性来声明依赖列表。,过滤器,常用过滤器：date，currency，uppercase，json,Hello Angular|Myfilter,服务,AngularJS应用中的服务是一些
8、用依赖注入捆绑在一起的、可替换的对象。这些对象可以提供一些封装好的逻辑操作，以供调用。,自定义服务写法：,AngularJS内置了很多有用的服务，例如前面见过的$timeout、$http等，我们可以通过使用内置服务完成大部分业务逻辑。但很多时候我们还需要自定义服务。,angular.module(modulename,x1,x2).factory(sreviceId,ser1,function(ser1)return function()/服务的逻辑);,我们定义的其实并不是服务本身，而是定义的服务的工厂。,路由,路由写法：,var myUIRoute=angular.module(MyUI
9、Route,ui.router,ngAnimate);myUIRoute.config(function($stateProvider,$urlRouterProvider)$urlRouterProvider.otherwise(/state1);$stateProvider.state(state1,url:/state1,templateUrl:tpls/state1.html).state(state1.list,url:/list,templateUrl:tpls/state1.list.html,controller:function($scope)$scope.items=A,L
10、ist,Of,Items;).state(state2,url:/state2,templateUrl:tpls/state2.html);,我们可以使用AngularJS提供的when和otherwise两个方法来定义应用的路由。用config函数在特定的模块或应用中定义路由,AngularJS的优势在哪？,解耦视图、逻辑解耦，具有更大的灵活性。,组件化通过指令方式可以灵活封装html组件。,功能完整提供完整的解决方案。内置丰富的服务。,利于测试因为模块化管理，可以对模进行块单元测试。,模块化引入依赖注入技术管理各模块。,AngularJS和jquery,AngularJS在配合jquery插件进行开发的时候，需要将插件再次封装。,不建议同时使用,相关网站,慕课网（http:/）,AngularJS中文网（）,AngularJS中文社区（http:/,AngularJS官网（）,
