Angularjs慕文龙.

AngularJSBy:慕文龙为克服HTML在构建应用上的不足而设计!内容摘要1.什么是AngularJs？2.MVC3.数据双向绑定4.指令5.服务与依赖注入6.过滤器一、什么是AngularJsAngularJS是一个前端JavaScript框架，背后有Google维护和支持。这个框架最早是09年发布的，随后发展迅速，尤其是最近，流行度很高。和其他框架不同，AngularJS有很多独特的特性，使得其非常与众不同。最为核心的有MVC结构、双向绑定、依赖注入等。二、MVC(MVVM)模式MVC顾名思义：Model-view-Controll设计模式，其实这个有点类似于Java的思想，模型、视图、控制器的分离。但是Angular又有点不同于传统的MVC，严格意义上说它是MVVM（model-view-viewModel）。Model是简单的javascript对象；ViewModel是$scope对象，Angular依靠$scope检测状态变化；Controller负责设置初始状态和参数化View是Angular解析渲染后生成的HTML。二、MVC(MVVM)模式遵循MVC模式开发，鼓励视图、数据、逻辑组件间松耦合。视图数据模型控制器服务A服务B服务C服务D通过依赖注入解耦通过数据、视图双向绑定解耦MVC的核心是$scope$scope是一个POJO(PlainOldJavaScriptObject)$scope提供了一些工具方法$watch()/$apply()$scope是表达式的执行环境$scope是一个树型结构，与DOM标签平行子$scope对象会继承父$scope上的属性和方法每一个Angular应用只有一个根$scope对象（一般位于ng-app上）$scope可以传播事件，类似DOM事件，可以向上也可以向下$scope是视图和控制器间的通道，视图在修改数据时会立刻更新$scope,同样的scope发生改变时也会重新渲染视图三、数据双向绑定将视图与业务逻辑解耦。在AngularJS中通过数据视图双向绑定实现。这将提高代码的可测试性UI视图视图、数据双向更新数据模型这个过程由AngularJs自动进行开发者无需关注三、数据双向绑定这应该算Angular比较特有的属性，概括来说，Angular通过监听变量的变化来实现双向数据绑定。传统技术上，当model改变时，开发与人员需要手动处理DOM元素并将属性反映到变化中。而在Angular中，当model改变时，页面也会自动随之更新，不用像Jquery那样，手动更新html或者事件监听。这些事都让Angular替我们做了，省掉了很多中间的代码。实现效果Jquery实现购物车例子bodydivclass=panelpanel-primaryid=cartdivclass=panel-headingtext-centerh3你的购物车/h1/divdivclass=panle-body/divtableclass=tabletable-borderedtable-hovertrid=totaltdcolspan=4class=text-center总计/tdtd/td/tr/table/div/bodyscriptsrc=“/js/jquery.min.js/scriptJquery实现购物车例子script$(function(){varitems=[{title:'方便面',quantity:8,price:2.5},{title:'可乐',quantity:18,price:3},{title:'口香糖',quantity:12,price:4},{title:'辣条',quantity:30,price:0.5}];$(items).each(function(index,element){vartr=$(tr+tdclass=\text-center\span+element.title+/span/td+tdclass=\text-center\+inputtype=\text\class=\form-control\value='+element.quantity+'+/td+tdclass=\text-center\￥span+element.price+/span/td+tdclass=\text-center\￥spanclass=\subTotal\+(element.quantity*element.price)+/span/td+td+buttontype=\button\class=\btnbtn-primary\删除+/button+/td+/tr);$(tr).insertBefore($('#total'));});Jquery实现购物车例子functiongetTotal(){varsum=0;$('#cartspan.subTotal').each(function(){sum+=parseFloat($(this).html());});$('#totaltd:last').html('￥'+sum);}$('#cartbutton.btn').click(function(){$(this).parent().parent().remove();getTotal();})$('#cartinput[type=text]').keyup(function(e){$(this).parent().nextAll(':eq(1)').find('span').html(parseInt($(this).val())*parseFloat($(this).parent().next().find('span').html()));getTotal();});getTotal();});/scriptAngularJs实现购物车例子bodyng-app=“myApp”divng-controller=CartControllerclass=panelpanel-primarydivclass=panel-headingtext-centerh3你的购物车/h1/divdivclass=panle-body/divtableclass=tabletable-borderedtable-hovertrng-repeat=iteminitemstdclass=text-centerspanng-bind=item.title/span/tdtdclass=text-centerinputtype=textng-model=item.quantityclass=form-control/tdtdclass=text-centerspan{{item.price|currency}}/span/tdtdclass=text-centerspan{{item.price*item.quantity|currency}}/span/tdtdbuttontype=buttonclass=btnbtn-primaryng-click=del($index)删除/button/td/trtrtdcolspan=4class=text-center总计/tdtd{{total}}/td/tr/table/div/body•ng-app：AngularJS程序入口，对该标签内的元素进行初始化。•ng-controller：在当前元素范围内绑定指定的控制器(controller)。•ng-model：指定当前元素与数据模型（$scope）中的属性绑定，如果数据模型中没有此属性，会自动新建一个。•ng-repeat：循环$scope中的属性，类似于{{#eachbeans}}•{{xxx}}：花括号表示读取某一属性值•filter：过滤器。filter可以根据指定的属性过滤数据(例子里是currency属性)。AngularJs实现购物车例子scriptsrc=/js/angular.min.js/scriptscriptvarmyApp=angular.module(''myApp,[]);myApp.controller('CartController',['$scope',function($scope){$scope.items=[{title:'方便面',quantity:8,price:2.5},{title:'可乐',quantity:18,price:3},{title:'口香糖',quantity:12,price:4},{title:'辣条',quantity:30,price:0.5}];$scope.total=total();$scope.del=function(index){$scope.items.splice(index,1);$scope.total=total();}functiontotal(){vartotal=0;$scope.items.forEach(function(item){total+=item.quantity*item.price;});returntotal;}}]);/script四、指令(Directive)指令比较有意思，可以帮助我们做很多的DOM操作，在DOM编译期间，和HTML关联着的指令会被检测到，并且被执行。这使得指令可以为DOM指定行为，或者改变DOM的结构。例如ng-controllerng-src{{xxx}}ng-repeatng-model等这些都是AngularJs自带的指令。当然指令也可以自己定义标签，它们可以用来装饰元素或者DOM属性。一个简单的例子定义命令：varapp=angular.module('MyApp',[],function(){console.log('here')});app.directive('sayHello',function(){return{restrict:'E',template:‘divhello,everyone!/div'};})使用命令：say-hello/say-hello•Restrict:用来指定指令的使用类型•Tamplate：用来描述你的指令长的什么样，这部分内容将出现在页面中四、指令(Directive)取值含义使用示例E标签my-menutitle=Products/my-menuA属性divmy-menu=Products/divC类divclass=my-menu:Products/divM注释!--directive:my-menuProducts--稍稍解释一下刚才用到的两个参数，restirct用来指定指令的使用类型，其取值及含义如下：五、服务和依赖注入Angular服务的作用就是对外提供某个特定的功能，通常是一些（单例对象）会被经常传来传去，保证你每次访问到的都是同一个实例，我们会用Service做持久化，让不同Controller共享Service数据做处理。Angular里的所有Service组件都是由依赖注入管理。Angular拥有内建的依赖注入（DI）子系统，能够分离表现、数据和控制器，可以帮助开发人员更容易开发，理解和测试应用。Angular的依赖注入实现每一个Angular应用都有一个injectorinjector负责自动处理依赖关系、实例化对象对用户代码来说，injector是透明的injector会自动分析函数签名，注入所需要的对象DI可以用在各种不同的地方，主要用在contr