AngularJS学习笔记——大漠课程

AngularJS

一、 为什么前端使用MVC？

1.代码规模越来越大；
2.为了复用：很多逻辑是一模一样的；
3.为了后期维护的方便
总结：MVC只是手段，主要目的是为了后期的维护和复用。

二、 控制器(Controller)：

controller使用过程的注意点：
1. 不要复用Controller，一个Controller只负责一个视图；
[Controller中一半放置业务逻辑，复用性并不强]
2. 不要在Controller中操作DOM,而且速度非常低；
[把操作DOM放在指令中]
3. 不要在Controller中对数据格式化，AngularJS有表单控件；
4. 不要在Controller中对数据进行过滤，ng有$filter服务；
5. Controller不会相互调用，避免强耦合，用数据模型事件交互，Controller内部监控事件进行操作

!一般情况下Controller的实现方式：
错误：把通用的东西抽成服务Service，而不是使用使用公共的通用控制器。

正确：

三、 数据模型(Model)

$scope:
1. $scope是一个POJO(Plain Old JavaScript Object)
2. $scope提供了一些工具方法$watch()/$apply() 实时监测对象属性变化，内部会自动执行
3. $scope是表达式的执行环境（作用域）
4. $scope是一个树型结构，和DOM标签平行
5. 子$scope对象会继承父$scope上的属性和方法
6. 每个Angular应用只有一个根$scope对象（位于ng-app上）
7. $scope可以传播事件，类似DOM事件
8. $scope不仅是MVC的基础，也是后面实现双向数据绑定的基础。

四、 指令(Directive)

1. restrict---匹配模式:E元素，A(默认)属性

   • 当需要创建带有自己的模板的指令时，使用元素名称的方式创建指令
   • 当需要为已有的HTML标签增加功能时，使用属性的方式创建指令

2. compile与link：

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

   阶段	步骤
   load阶段：	加载angular.js，找到ng-app指令，确定应用边界
   compile阶段:	1.遍历DOM，找到所有指令；2. 根据指令代码中的template、replace、transclude转换DOM结构,3. 如果存在compile函数则调用
   link阶段:	1.对每一条指令运行link函数。2. link函数一般用来操作DOM、绑定事件监听器。

   把方法写在Controller中：方法提供给外部进行调用；
   把方法卸载Link中：用来处理指令内部的一些事物，比如给元素绑定事件

3. form指令