angularJS总结

简介：

AngularJS（谷歌开发）是一个javascript框架，以数据为核心，可以通过script标签添加到HTML页面，通过指令扩展了HTML，通过表达式绑定数据到HTML，可以克隆和复制、隐藏和显示HTML元素，支持输入验证。是MVC设计模式。

适用场景：表单多、业务复杂（企业信息资源管理、erp）、hybrid APP

目标：构建可以复用，申明式UI

特点：

1、MVC模式：model（存储数据）、view（表现层html+css）、controller（负责处理业务逻辑）

2、Mvvm数据视图双向绑定（model-view-viewmodel）

优点：

1、ＭＶＶＭ设计模式（适用于桌面型软件，安装在本地的），model与viewmodel实现互动，将监听model的变化，并通过view来发送和渲染，由HTML来展示代码；View可以通过$routeProvider对象来支配，所以你可以深度的链接和组织你的View和Controller，将他们变成导航URL。AngualrJS同时提供了无状态的Controller，可以用来初始化和控制$scope对象。

2、依赖注入和数据绑定：view层的数据和model层数据是双向绑定的，其中一个发生更改，另一个也会发生更改，无须写任何变化。以后端语言的设计模式赋予前端代码，提高了代码的重用性和灵活性（依赖注入），

3、代码模块化：每个模块的代码独自拥有自己的作用域，model   controller

4、测试驱动开发：可以很容易的进行单元测试和端对端测试，解决了传统js代码难以测试和维护的缺陷

缺点：

1、在Angular的作用域中任何操作的执行都会引发Dirty-checking，随着绑定数量的增加性能就会越低。

2、ngView只能有一个，不能嵌套多个视图

3、不适合需要SEO的，交互频繁的（如游戏之类的），以及太过简单的

注意事项：

1、创建一个angularJS项目，首先需要创建一个针对项目根目录的根模块

2、angular.module(“root”,[ ])(创建一个没有依赖关系的模块)，如果不写[ ],表示获取当前模块root的详细信息

3、模块与模块之间的交互：angular采用继承的方式和依赖注入来解决模块之间的交互或模块之间的调用关系。横向（依赖注入），纵向（继承）

4、模块的命名方式：需要唯一性，可以用公司的域名，把域名倒过来在加项目名称

5、在angularJS项目中，所有的类都应该属于某一个模块

6、angularJS以数据为中心，不能随便操作dom（jQuery），只有在angular的自定义指令中link方法中才可以使用jQuery操作dom

7、当HTML元素出现嵌套关系时，控制器是向内继承，内层继承外层，造成值重写

常用指令：

ng-app：程序启动指令，标记angularJS的管理边界，标记在html元素上，所在标签内的所有html元素都在angularJS的管理范围

ng-controller：控制器

ng-model：模块，多用于表单中，实现数据的双向绑定

解决正则表达式闪动：用ng-bind或ng-cloak

$scope :用于存放view的抽象（属性和方法），仅限于当前控制器的范围；

是连接controller与view之间的数据桥梁；是实现angular中mvvm模式的核心类；是实现双向数据绑定的关键类；适用于监视view层或model之间的数据变化，并通知对方，从而实现view与model之间的数据同步；同时还可以实现controller与controller之间的事件传递（即js中的事件冒泡、事件捕获）

$rootscope：属于angular的内部类，用于根的模块的数据缓存，要先定义后使用，用于模块与模块之间的数据共享，可以是全局范围

$scope.$emit   向上一级控制器发送事件    冒泡

$scope.$broadcast   向下传递事件   捕获

$scope.$on   用来接收事件的值

脏检查：dirty checking 绑定的值与上次缓存中的值有咩有变化，如果有变化就dirty。做法：当在$scope上绑定一个属性是，angular会在这个属性上添加一个$$watcher()：多长时间缓存一次数据。  {{}}当我们使用ng表达式的时候，angular在{{val}}绑定一个watcher    当循环访问（digest loop）angular  $watcher时，$watcher会执行值的比较，当这次比较的值不相等的时候，表示watcher的值需要进行数据同步,2000是脏检查值的极限

$scope.$apply：是用来手动触发angular的dirtychecking，即$apply() -> $digest() -loop ->$watch  

ng-run：是angular中的main方法，是整个angular的入口方法，他只会在整个angular生命周期（创建、连接、更新、销毁）内，只会调用一次，一般会用于条件判断