AngularJS 学习笔记 （二） 基本概念和用法 之 MVC

如何使用controller

MVC-Controller的实现方式1

PS：玩具级的开发中可以使用，但无法应对大型项目。

MVC-Controller的实现方式2

PS：这样开发会比较清晰职责，但是如果两个控制器是一模一样的。请参照第三种方法的图2。

MVC-Controller的实现方式3

PS写一个通用控制器，然后继承它。是不推荐的。而是使用下图的service：

PS：把通用的东西写成一个服务，让控制器去调用它（而不是去继承它）。

Controller使用过程中的注意点：

1. 不要试图去复用Controller，一个控制器一般只负责一小块视图。
2. 不要在Controller中操作DOM，这不是控制器的职责。
3. 不要在Controller中格式化数据，ng有很好的表单控件。
4. 不要在Controller里面做数据过滤，ng有$filter服务。
5. 一般来说Controller之间不是互相调用，控制器之间的交互会通过事件进行。

如何复用Module

以上图为例：

1. 页面加载完成后，以ng-app标签开始，内部所有操作由AngularJS接手。（我觉得说的有点大）
2. 指令ng-model = "greeting.text" 定义的是一个全局模型。在ng-app范围内可以任意使用。
3. model不需要手动创建，AngularJS已经做的很好了。

如何复用view？

PS：

1. HTML标签是<hello></hello>是View（视图）。
2. *.directive("标签名",function(){return {json格式} }) 设置一个标签名，以一个什么样子显示。
3. 在MyModule中可以随意使用指定标签。

AngularJS的MVC是借助于$scope实现的！！！

$scope是分层的，像是树形的。最顶层是$rootScope

$scope的事件：

1. $emit("MyEvent") 同层和上层响应事件。
2. $broadcast("MyEvent") 同层和下层响应时间
3. 会不会有其他的呢？

$scope的事件响应：

$scope.$on()("事件参数",function(){$scope.count++; // })

PS：当传入时间参数时（参照 $emit $broadcast ），发生function中的方法。

神奇的$scope：

1. $scope是一个普通的JS对象。
2. $scope提供了一些工具的方法，$watch() / $apply()
3. $scope是表达式执行的环境，或者叫做作用域。
4. $scope是一个树形结构，与DOM标签平行。
5. 子层 $scope 去继承父$scope的属性和方法。
6. 每一个AngularJS应用都只有一个根 $scope 对象（一般位于ng-app）
7. $scope 是可以发事件的，类似DOM事件，可以向上，也可以向下。
8. $scope 不仅仅是MVC的基础，也是后面实现双向数据绑定的基础。
9. 调试，可以使用angular.element[$0].scope() 进行调试(当前元素的$scope)。

$scope的生命周期：

1. Creation 1、创建
2. Watcher registration 2、注册监控
3. Model mutation 3、检测模型的变化
4. Mutation observation 4、观察变化
5. Scope destruction 5、销毁Scope

如果那里说的不对，请指教。

如果哪里理解偏差，请指正。

谢谢！

（编辑：李大同）

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