angular总结

angular

1、四大核心特性

MVC model(数据模型) view（视图） controller（业务逻辑控制逻辑）

模块化

指令系统 （angular 自带很多指令，以属性形式插入的html中。带ng前缀）

双向数据绑定 (传统：模板和数据 拼接到一起，到视图。)（视图和模型对应，借助事件机制，实现双向绑定）

2、前端开发环境（自动化工业化）

代码编辑工具（sublime、webstorm）

断点调试工具（chrome,batarang【针对angular】）

版本管理工具（git）

代码合并和混淆工具（grunt）

依赖管理工具（bower，自动安装工具，依赖检测，bower install/uninstall jquery）

单元测试工具（karma，jasmine[describe/it/expect/to**(arg)]）

集成测试工具（protractor[专门为angular准备的]）

3、不要试图去复用controller，一个controller一般只负责一块视图
控制器负责一小块视图，多为业务逻辑。本身复用性不强
不要在controller中操作dom，这不是控制器的职责
指令中操作dom，rewrite,repand,昂贵
不要在controller中做数据格式化，ng有很好的表单控件
不要在controller中做数据过滤操作，ng有$filer服务
不要在controller中操作dom，这不是控制器的职责
一般来说controller是不会相互调用的，控制器之间的交互有事件进行

4、$scope 对象 是表达式执行环境（作用于），提供了一些工具方法（$watch，$apply）树形结构与dom标签平行，会继承府scope的方法。
$rootscope一般位于（ng-app上），$scope可以传播事件，向上($emit)或向下($broadcast)，是MVC基础也是双向数据绑定的基础。
可以用angular.element($0).scope()调试

creat -- watcher registration -- modelmutation -- mutation abservation -- scope destruction

5、模块是个框子集合，controllers,services,filters,directives,routes都是模块。
//依赖注入
var bookStoreApp = angular.module('bookStoreApp',[
'ngRoute','ngAnimate','bookStoreCtrls','bookStoreFilters',
'bookStoreServices','bookStoreDirectives'
]);

6、首页用ng-bind 绑定数据，后续可以用{{}}绑定。交给angular管理，加载好之后，就不会{{}}

7、指令三阶段：
加载（加载angularJS，找到np-app，确定应用边界）--
编译（遍历dom，根据指令代码中的template，replace，transclude装换dom结构，如果存在compile函数就调用）--
链接（调用每一条指令的link函数，link函数一般用来操作dom，绑定事件和作用域）

compile 函数用来对模板自身进行转换，link函数负责在模型和视图之间进行动态关联。
作用域在链接阶段才被绑定到编译之后的link函数上
compile函数仅仅在编辑阶段运行一次，而对于指令的每个实例，link都会执行一次。
compile可以返回preLink和postLink函数，而link函数只会返回postLink函数
如果需要修改DOM结构，应该在postLink中来做，在preLink做会报错
大多数我们只需编写link函数

8、scope 绑定策略

@把当前属性作为字符串传递。你还可以绑定来自外层scope的值，在属性中插入{{}}即可 scopeAt

=与父scope中的属性进行双向绑定 scopeEqual

&传递一个来自父scope的函数，稍后调用 scopeAnd

9、service

service都是单例的

service由$injector负责实例化

service在整个应用周期都存在，可以共享数据

service在需要的地方利用依赖注入机制注入service

自定义的service需要写在内置的service后面

内置的service命名都以$符号打头，自定义的应该避免

service和provicder，factory本质都是provider

10、module

module是angular中重要的模块组织方式，它提供了将一组内聚的业务组件（controller、service、filter、directive…）封装在一起的能力。这样做可以将代码按照业务领域问题分module的封装，然后利用module的依赖注入其关联的模块内容
同时module也是我们angular代码的入口，首先需要声明module，然后才能定义angular中的其他组件元素，如controller、service、filter、directive、config代码块、run代码块等。

关于module的定义为：angular.module(‘com.ngbook.demo’,[])。关于module函数可以传递3个参数，它们分别为：

1. name：模块定义的名称，它应该是一个唯一的必选参数，它会在后边被其他模块注入或者是在ngAPP指令中声明应用程序主模块；
2. requires：模块的依赖，它是声明本模块需要依赖的其他模块的参数。特别注意：如果在这里没有声明模块的依赖，则我们是无法在模块中使用依赖模块的任何组件的；它是个可选参数。
3. configFn： 模块的启动配置函数，在angular config阶段会调用该函数，对模块中的组件进行实例化对象实例之前的特定配置，如我们常见的对$routeProvider配置应用程序的路由信息。它等同于”module.config“函数，建议用”module.config“函数替换它。这也是个可选参数。

11、Scope 对象下 的 $watch ，$apply 和 $digest

每次你绑定一些东西到你的UI上时你就会往$watch队列里插入一$watch。想象一下$watch就是那个可以检测它监视的model里时候有变化的东西。

当浏览器接收到可以被angular处理的事件(表单时间)时，$digest循环就会触发，处理$watch队列。

使用$apply 自动进入$digest。在没有绑定ng事件下的情况。http://www.angularjs.cn/A0a6

$apply()会执行整个循环，也就是$rootScope起。$digest()只会在当前的$scope中循环更新。$apply(function(){})可以加一个函数参数，执行完次函数后调用$digest()。$digest()循环是脏检查(Dirty Checking)，它用来处理在listener函数被执行时可能引起的model变化。因此，$digest循环会持续运行直到model不再发生变化，

现在，假设你给一个按钮添加了ng-click指令，并且为他传递了一个函数。当你点击这个按钮的时候，AngularJS会把这个函数放进 $apply()中进行调用。所以，你的函数能够正常的执行，改变数据模型(如果有的话)，并且，$digest循环会开始来保证你的更改会反映到视图(view)中。

可以通过检查$$phase来检查$digest是否正在进行中。

12、ui-router

state name: 表示路由状态，@后跟的就是这个name
url ：根据不同状态加的后缀链接，状态有.就是相对路径，参数判断

13、指令处理与dom有关操作，服务共享数据等，他们都是模块化

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!