内容简介
-
为什么需要mvc？
-
前端mvc的困难在哪里？
-
AngularJS语境下的mvc是如何实现的？
1. 为什么需要mvc
-
代码规模越来越大，切分职责是大势所趋。
-
为了复用：很多逻辑是一模一样的。
-
为了后期维护方便：修改一块功能不影响其它功能。
MVC只是手段，终极目标是模块化和复用
2. 前端mvc的困难
enter description here
-
操作DOM的代码必须等待整个页面加载完毕
-
多个JS文件之间如果出现相互依赖，程序员必须自己解决。
-
JS原型继承也给前端编程带来了很多困难。
3. AngularJS语境下的mvc是如何实现的
-
Controller
-
Controller的实现方式一
enter description here
问题 ：如果“视图1”和“视图2”根本没有任何逻辑关系，“控制器”的角色就会很尴尬。
-
Controller的实现方式二
enter description here
-
问题：如果“控制器1”和“控制器2”里面有2个方法是一样的怎么办？
一般的做法如下（错误的）
enter description here
-
Controller的实现方式三
enter description here
通常把通用的东西抽成一个公用的service，让Controller去调用它而不是继承它。
Controller使用过程的注意点
- 不要试图去复用Controller，一个Controller只负责一小块视图。
- 不要在Controller中操作DOM，这不是控制器的职责。
- 不要在Controller中做数据格式化，ng有很好用的表单控件。
- 不要在Controller中做数据过滤操作，ng有$filter服务。
- 一般<span style='color:red'>Controller是不会相互调用的</span>，控制器之间的交互会通过事件进行。
-
Model
-
View
利用 Directive实现View复用
enter description here
AngularJS的MVC是借助于$scope实现的！！！
4. 神奇的$scope
-
$scope是一个POJO（Plan old JavaScript Object）。
-
$scope提供了一些工具和方法$watch()/$aply()。
-
$scope是表达式的执行环境（或者叫作用域）。
-
$scope是一个树型结构，<span style='color:red'>与DOM标签平行</span>。
-
子$scope对象会继承父$scope上的 <span style='color:red'>属性和方法</span>。
-
每一个Angular应用只有一个根$scope对象（一般位于ng-app上）。
-
$scope可以传播事件，类似DOM事件，可以向上也可以向下。
-
$scope不仅是mvc的基础，也是后面实现双向数据绑定的基础。
-
可以使用angular.element($0).scope()进行调试。
5. $scope的生命周期
enter description here
