AngularJS的介绍与研究-黎瀛

AngularJS的介绍与研究黎瀛2014年1月内容提要•第一部分：什么是AngularJs?•第二部分：一个简单的例子•第三部分：指令•第四部分：模块与服务•第五部分：依赖注入•第六部分：AngularJS的优势与缺点第一部分什么是AngularJs?什么是AngularJs?•AngularJS是协助搭建单页面工程的开源前端框架。它通过MVC模式使得开发与测试变得更容易。•AngularJS试图成为WEB应用中的一种端对端的解决方案。它将指导开发整个应用。•AngularJS于2009年发布第一个版本，由Google进行维护，压缩版94k。AngularJs的核心思想•将视图与业务逻辑解耦。在AngularJS中通过数据视图双向绑定实现。这将提高代码的可测试性。UI视图数据模型视图、数据双向更新这个过程由AngularJs自动进行开发者无需关注•遵循MVC模式开发，鼓励视图、数据、逻辑组件间松耦合。视图控制器服务A服务B服务C服务D通过依赖注入解耦通过数据、视图双向绑定解耦•将测试与应用程序编写同等重要。在编写模块同时编写测试。因为各组件的松耦合，使得这种测试得以实现。•应用程序页面端与服务器端解耦。两方只需定义好通信API，即可并行开发。第二部分一个简单的例子一个简单的例子问题：假设我们需要编写一个手机列表，并且支持对手机信息进行模糊搜索，并且按指定字段排序，要怎么实现呢？HandlebarsvsAngularJS使用Handlebars的一般思路获取字符串模板编译模板生成HTML插入HTML处理数据获取数据•这个过程将重复多次。期间将会涉及到多次DOM操作。•其中只有一步“处理数据”是涉及业务逻辑的。•这就导致DOM操作很容易和业务逻辑混合。来看看使用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会自动响应更新。对比两种实现方法——Handlebars的优劣1、实现了数据与视图一定程度上的解耦，不再需要拼接HTML和数据了。2、简单易用。只需要学习少量的API和模板语法就可以应用于项目。3、符合常规编程习惯，容易上手。4、不参与DOM操作。只生成HTML字符串，DOM操作由其他工具完成，所以提供了更大的灵活性。1、每次都生成全新的HTML字符串，无法自动注册事件。2、没有做到逻辑与DOM操作分离。如果修改了界面，那么不仅仅需要修改模板，还要修改DOM操作语句，这会影响到业务逻辑的实现。3、缺乏对项目的统一管理，需要多个插件结合使用，这时候项目的质量往往取决于编码人的水平。对比两种实现方法——AngularJS的优劣1、DOM操作与业务逻辑完美分离，通过数据视图的双向绑定来实现两者间的响应，当修改视图的时候，只需要修改模板，DOM操作语句几乎不需要修改。2、提供项目管理方法，使项目组织结构良好，利于扩展测试。3、使用DOM作为模板，而不是字符串。所以每次数据列表改变的时候，不需要重新绑定事件。1、因为高度封装，所以导致了开发风格十分怪异，不利于上手。2、引入了很多新概念，新语法，新的开发方式，导致学习难度增大。3、对于需要非常规DOM操作，需要新建指令来实现，这显得十分的笨拙。第三部分指令什么是指令？•指令是AngularJS用来扩展浏览器能力的技术之一。在DOM编译期间，和HTML关联着的指令会被检测到，并且被执行。这使得指令可以为DOM指定行为，或者改变DOM的结构。例如：ng-controllerng-src{{xxx}}ng-repeatng-model等AngularJS的编译第一步：编译DOM第二步：链接指令从ng-app开始，获取DOM节点，使用$compile方法遍历DOM节点收集指令，将这些指令放入一个队列中。然后逐个调用这些指令的$compile方法，逐个返回链接函数。这些函数会被集合在一个方法对象里。最后$compile方法会返回这个方法对象。调用第一步$compile返回的方法，将作用域（scope，即数据对象）与模板链接起来。在这些链接函数里，会对DOM模板添加监听事件，同时建立对作用域（scope）的监听，实现双向绑定。将这两部分分开是为了提高效率，以应对ng-repeat等需要重复产生节点的情况，避免重复编译。生成链接函数集合简单的AngularJS指令写法自定义指令的一般格式：angular.module('modulename',[]).directive('directiveName',function($timeout,dateFilter){returnfunction(scope,element,attrs){//这是链接函数}});来看一个自定义指令的例子：编写一个可以按指定格式显示的、文字时钟定义指令angular.module('time',[]).directive('myCurrentTime',function($timeout,dateFilter){returnfunction(scope,element,attrs){varformat,timeoutId;functionupdateTime(){element.text(dateFilter(newDate(),format));}scope.$watch('format',function(value){format=value;updateTime();});functionupdateLater(){timeoutId=$timeout(function(){updateTime();updateLater();},1000);}element.bind('$destroy',function(){$timeout.cancel(timeoutId);console.log(timeoutId);});updateLater();}});•module：这个方法将新建一个模块。AngularJS以模块管理代码。•directive：在模块中新建指令，指定的方法在编译步骤会被执行，执行后返回一个自定义的链接函数，这个链接函数在完成双向绑定后执行。•scope,element,attrs：自定义链接函数的三个参数，scope是数据域，element是当前应用指令的元素。Attrs是当前指令作用对象的属性值。•$watch：这个方法监听scope属性值的改变，数据更新后这个方法会得到通知执行。使用指令HTML：bodyng-app=timedivng-controller=Ctrl2Dateformat:inputng-model=formathr/Currenttimeis:spanmy-current-time/span/div/bodyJS：functionCtrl2($scope){$scope.format='M/d/yyh:mm:ssa';}•ng-app=time：在angularjs启动时候指定初始化的模块(module)。当前指定的是自定义的time模块。•my-current-time=format：调用自定义的myCurrentTime指令，将$scope中的format属性赋值给指令，在指令的attr参数里面可以取到这个值。•Ctrl2：自定义的控制器，完成$scope中format属性的初始化。$watch和$apply——双向绑定的实现•$watch：$scope提供$watch方法来监听数据对象的改变。ng-model等指令会自动创建一个$watch，以保证对数据对象属性的监听。这些$watch会形成一个列表，等待通知执行。•$apply：$scope提供$apply方法传播数据对象的改变。不在angularjs执行上下文中对数据模型进行赋值的时候（例如在setTimeout方法中赋值），将无法监听到数据模型的变化，这时候就需要$apply方法将数据变化语句包裹起来：setTimeout(function(){$scope.$apply(function(){$scope.attr='change';});}，1000);这时候，数据模型改变的时候将会触发对应的$watch。在$apply执行后会触发一个$scope.$digest()，这个方法会依次检查被监听的属性，发现数据改变的时候会调用$watch中的回调。第四部分模块与服务模块•在AngularJS中，模块负责组织、启动、实例化应用。模块的简单写法：angular.module('modulename',[x1,x2])//依赖于x1、x2模块.directive('directiveName',function(){}).factory('a',function(){return123;})//创建服务.filter('b',function(){})//创建过滤器.value('d',123)//创建变量，创建后可修改.contract('c',324)//创建常量创建后不可修改模块的两个部分——配置块、运行块angular.module('modulename',[x1,x2]).config(function($provide,$compileProvider,$filterProvider){$provide.value('a',123)$provide.factory('a',function(){return123;})$compileProvid