AngularJS的介绍

AngularJS的介绍内容提要•第一部分：什么是AngularJs?•第二部分：一个简单的例子•第三部分：四大特性（MVC，模块化，双向数据绑定，指令）•第四部分：依赖注入•第五部分：服务，路由，过滤器•第六部分：AngularJS的优势与缺点第一部分什么是AngularJs?什么是AngularJs?•AngularJS是协助搭建单页面工程的开源前端框架。它通过MVC模式使得开发与测试变得更容易。•AngularJS试图成为WEB应用中的一种端对端的解决方案。它将指导开发整个应用。•AngularJS于2009年发布第一个版本，由Google进行维护，压缩版94k。AngularJs的核心思想•将视图与业务逻辑解耦。在AngularJS中通过数据视图双向绑定实现。这将提高代码的可测试性。UI视图数据模型视图、数据双向更新这个过程由AngularJs自动进行开发者无需关注•遵循MVC模式开发，鼓励视图、数据、逻辑组件间松耦合。视图控制器服务A服务B服务C服务D通过依赖注入解耦通过数据、视图双向绑定解耦•将测试与应用程序编写同等重要。在编写模块同时编写测试。因为各组件的松耦合，使得这种测试得以实现。•应用程序页面端与服务器端解耦。两方只需定义好通信API，即可并行开发。一个简单的例子来看看使用AngularJs怎么做控制器服务UI视图第一步：编写HTML第三步：编写服务，例如数据过滤等第二步：编写控制器，利用服务操作数据模型几乎没有DOM操作，更专注于业务逻辑！编写HTMLbodyng-appng-controller=PhoneListCtrlinputng-model=quer/selectng-model=sortTypeoptionvalue=name按名字排序/optionoptionvalue=age按年龄排序/option/selectulling-repeat=phoneinphones|filter:quer|orderBy:sortType{{phone.name}}p{{phone.snippet}}/pp{{phone.age}}/ppimgng-src={{phone.imsrc}}//p/li/ul/body•ng-app：AngularJS程序入口，对该标签内的元素进行初始化。•ng-controller：在当前元素范围内绑定指定的控制器(controller)。•ng-model：指定当前元素与数据模型（$scope）中的属性绑定，如果数据模型中没有此属性，会自动新建一个。•ng-repeat：循环$scope中的属性，类似于{{#eachbeans}}•{{xxx}}：花括号表示读取某一属性值•filter、orderBy：过滤器。filter可以根据指定的属性过滤数据(例子里是quer属性)。orderBy是排序过滤器。这两个过滤器都是内置的。过滤器是可自定义的。编写控制器ControllervarPhoneListCtrl=['$scope','$http',function($scope,$http){$http.get('../json/test-1.json').success(function(data){$scope.phones=data;});$scope.sortType='age';}];•PhoneListCtrl控制器。控制器的声明方式是varc1=['ser1','ser2',function]c1是控制器的名字，ser1、ser2是控制器所依赖的服务，以声明的方式注入到控制器中。例子中注入了$scope(数据模型)、$http(封装了ajax的服务)。这两个服务都是angularjs内置服务，服务是可以自定义的。•$scope.phones=data;在这个地方后台返回的数据应用到了数据模型中，这时前台UI会自动响应更新。四大核心特性模块化MVC指令双向数据绑定模块•在AngularJS中，模块负责组织、启动、实例化应用。模块的简单写法：angular.module('modulename',[x1,x2])//依赖于x1、x2模块.directive('directiveName',function(){}).factory('a',function(){return123;})//创建服务.filter('b',function(){})//创建过滤器.value('d',123)//创建变量，创建后可修改.contract('c',324)//创建常量创建后不可修改双向数据绑定•目前为止，js中唯一实现双向数据绑定!doctypehtmlhtmlng-appheadmetacharset=utf-8/headbodydivinputng-model=greeting.text/p{{greeting.text}},Angular/p/div/bodyscriptsrc=js/angular-1.3.0.js/script/html指令•指令是AngularJS用来扩展浏览器能力的技术之一。在DOM编译期间，和HTML关联着的指令会被检测到，并且被执行。这使得指令可以为DOM指定行为，或者改变DOM的结构。E（元素）my-directive/my-directiveA（属性，默认值）divmy-directive=expression/divC（类名）divclass=my-directive:expression;/divM（注释）--directive:my-directiveexpression--依赖注入AngularJS中的依赖注入functionmycontroller($scope,$timeout){}//直接在方法参数中声明•第一种方式：通过方法参数名声明依赖。这种方式不推荐使用，因为js文件压缩后方法参数名会改变。varmycontroller=['$scope','$timeout',function(scope,tout){}]•第二种方式：声明一个数组，依赖列表放数组的前部，注入目标放数组最后一个元素。推荐使用这个方法。varmycontroller=function(scope,tout){};mycontroller.$inject=['$scope','$timeout'];•第三种方式：通过$inject属性来声明依赖列表。过滤器•常用过滤器：date，currency，uppercase，jsonhtmlng-app=MyModuleheadmetahttp-equiv=content-typecontent=text/html;charset=utf-8/scriptsrc=framework/angular-1.3.0.14/angular.js/scriptscriptsrc=MyFilter.js/script/headbody{{'HelloAngular'|Myfilter}}/body/html服务•AngularJS应用中的服务是一些用依赖注入捆绑在一起的、可替换的对象。这些对象可以提供一些封装好的逻辑操作，以供调用。自定义服务写法：•AngularJS内置了很多有用的服务，例如前面见过的$timeout、$http等，我们可以通过使用内置服务完成大部分业务逻辑。但很多时候我们还需要自定义服务。angular.module('modulename',[x1,x2]).factory('sreviceId',['ser1',function(ser1){returnfunction(){//服务的逻辑}}]);我们定义的其实并不是服务本身，而是定义的服务的工厂。路由路由写法：varmyUIRoute=angular.module('MyUIRoute',['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,List,Of,Items];}}).state('state2',{url:/state2,templateUrl:tpls/state2.html})});我们可以使用AngularJS提供的when和otherwise两个方法来定义应用的路由。用config函数在特定的模块或应用中定义路由AngularJS的优势在哪？解耦视图、逻辑解耦，具有更大的灵活性。组件化通过指令方式可以灵活封装html组件。功能完整提供完整的解决方案。内置丰富的服务。利于测试因为模块化管理，可以对模进行块单元测试。模块化引入依赖注入技术管理各模块。AngularJS和jquery•AngularJS在配合jquery插件进行开发的时候，需要将插件再次封装。•不建议同时使用相关网站•慕课网（）•AngularJS中文网（）•AngularJS中文社区（）•AngularJS官网（）