AngularJS技术使用经验-达观数据探究.docx

AngularJS技术使用经验-达观数据AngularJs诞生于2009年，最初由Misko Hevery和Adam Abrons开发，后来成为Google的项目。AngularJS 是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言，通过扩展HTML的语法，让你能更清楚、简洁地构建你的应用组件。它的创新点在于，利用?数据绑定?和?依赖注入，它使你不用再写大量的代码了。这些全都是通过浏览器端的Javascript实现，这也使得它能够完美地和任何服务器端技术结合。（达观数据陈高星）本文主要涵盖：AngularJsMVC模型、$scope，controller和数据双向绑定（$apply(),$digest(),$watch）、module模块、AngularJs路由、过滤器和自定义过滤器（filter）、服务和自定义服务（provider, factory，service）、指令和自定义指令（directive）、依赖注入（DI）、Angular继承。一、AngularMVC模型：MVC作为web应用程序的一种优秀的设计模式，由model，veiw，controller三部分组成，它隔离了应用逻辑从用户界面层和支持的关注点分离，所以常受欢迎。Model负责管理应用程序的数据。它响应来自视图的请求，同时也响应指令从控制器进行自我更新。Veiw即视图，它以一种特定的格式或者说样式来显示数据。Controller负责响应于用户输入并执行交互数据模型对象。控制器接收到输入，它验证输入，然后执行修改数据模型的状态的业务操作。通常认为angular采用了MVC模型的设计模式（也有争论认为MVW或MVVM），后面涉及到的会较为详细解释。二、Angular的$scope，controller和数据双向绑定（$apply(),$digest(),$watch）：$scope?对象在?AngularJS?中充当数据模型的作用,也就是一般?MVC?框架中?Model?得角色.但又不完全与通常意义上的数据模型一样,因为?$scope?并不处理和操作数据。我理解$scope类似于种子或者桥梁的角色，使controller可以获取数据模型的信息。进一步系统的划分它的作用和功能:1.提供了观察者可以监听数据模型的变化2.可以将数据模型的变化通知给整个?App3.可以进行嵌套,隔离业务功能和数据4.给表达式提供上下文执行环境$scope类似于javascript的原型链?。搜索的时候，优先找自己的scope，如果没有找到就沿着作用域链向上搜索，直至到达根作用域rootScope。$rootScope是由angularJS加载模块的时候自动创建的，每个模块只会有1个rootScope。rootScope创建好会以服务的形式加入到?$injector中。也就是说通过?$injector.get($?rootScope?);能够获取到某个模块的根作用域。更准确的来说，$rootScope是由angularJS的核心模块ng创建的。在AngularJS中，控制器Controller是一个Javascript函数（类型/类）, 能通过表达式或者ng事件指令调用。（比如，ngClick）,从而达到处理数据的目地。需要注意的一点是，一个控制器不应该做太多工作。它应该只包含单个视图的业务逻辑，保持控制器职责单一的最常见做法是将那些不属于控制器的工作抽离到服务中，然后通过依赖注入在控制器中使用这些服务。后面会讨论依赖注入服务。AngularJs最迷人的一点便是双向数据绑定，AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入。AngularJS将会遍历DOM模板, 来生成相应的NG指令,所有的指令都负责针对view(即HTML中的ng-model)来设置数据绑定。在HTML中：在JS中：但是需要注意，这种双向绑定仅限于angular的上下文,如果你在AngularJS上下文之外的任何地方修改了model，那么你就需要通过手动调用$apply()来通知AngularJS。例如：这里，我们使用JavaScript的settimeout()来更新一个ScopeModel，所以我们把代码wrapped到$scope.$apply()中（也可以用$watch来监控model变化），它会自动触发$rootScope.$digest()，从而让watchers被触发用以更新view。三、Module 模块：如果全局的声明Controller等等，这样会污染全局命名空间。模块化的方法还可以让代码的复用更加便捷，单元测试也更加方便。例如：四、AngularJs路由：AngularJS路由功能是一个纯前端的解决方