本专栏的所有博客都是在学习慕课网大漠穷秋的AngularJS实战的笔记,链接https://www.imooc.com/learn/156
一、为什么需要MVC
1.代码规模越来越大,切分职责是大势所趋;
2.为了复用:很多代码的逻辑是一样的;
3.为了后期维护方便:修改一块功能不影响其他功能。
MVC只是手段,终极目标是模块和复用
二、AngularJS中的Controller(控制器)
我们先来看一个小例子,看看AngularJS是如何实现MVC的
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8">
<title>MVC</title>
</head>
<body>
<div ng-controller="HelloAngular">
<p>{{greeting.text}},Angular</p>
</div>
</body>
<script type="text/javascript" src="angular-1.3.0.js"></script>
<script type="text/javascript" src="mvc.js"></script>
</html>
用1.6.9版本的AngularJS渲染不出来
function HelloAngular($scope){
$scope.greeting={
text:'Hello'
}
}
效果:
但是双括号{{}}这种写法,在网速不好的情况下,效果可能会是这样的
三、MVC---Controller的实现方式1
M(model数据模型)V(View视图)C(controller控制器)
一般来说,控制器和视图之间进行双向交互,控制器和数据模型之间进行双向交互,数据模型和视图之间是没有交互的。一个控制器可以控制多个视图,但是有一个问题,如果多个视图之间没有任何逻辑关系的话,这时候控制器的角色就会很尴尬,也就是会把视图一和视图二的一些代码放在同一个控制器当中,这样控制器就变成了大杂烩,所以引申出第二种实现方式。
四、MVC--Controller的实现方式2
现在虽然解决了之前控制器的尴尬境地,但是反过来,如果控制器一和控制器二里面有方法是一样的该怎么办?聪明的人儿想到了继承。
<div ng-controller="CommonController">
<div ng-controller="Controller1">
<p>{{greeting.text}},test1</p>
<button ng-click="test1()">test1</button>
</div>
<div ng-controller="Controller2">
<p>{{greeting.text}},test2</p>
<button ng-click="test2()">test2</button>
</div>
<button ng-click="commonFn()">通用</button>
</div>
function CommonController($scope){
$scope.commonFn=function(){
alert('这里是通用的功能');
};
}
function Controller1($scope){
$scope.greeting={
text:'Hello1'
};
$scope.test1=function(){
alert("test1");
}
}
function Controller2($scope){
$scope.greeting={
text:'Hello2'
};
$scope.test2=function(){
alert("test2");
}
}
效果是
点击test1会输出test1,点击test2会输出test2,点击通用会输出通用,我们再修改一下代码,把通用按钮放到Controller2的控制范围里面去
<body>
<div ng-controller="CommonController">
<div ng-controller="Controller1">
<p>{{greeting.text}},test1</p>
<button ng-click="test1()">test1</button>
</div>
<div ng-controller="Controller2">
<p>{{greeting.text}},test2</p>
<button ng-click="test2()">test2</button>
<button ng-click="commonFn()">通用</button>
</div>
</div>
</body>
我们即时把通用的按钮放到Controller2,也是可以调动commonFn()的,也就是说在CommonController控制器内部的任意一个层级上面都可以调用,其实这是通过scope的层级关系实现的,但是这是一种不对的实现方式。这是AngularJS里面的一个很经典的错误。那我们应该怎么做呢?
五、MVC--Controller的实现方式3
用一个服务Service来做。
六、Controller使用过程中注意的点
1.不要试图去复用Controller,一个控制器一般只负责一小块试图;
2.不要在Controller中操作DOM,这不是控制器的职责。(把操作DOM的这部分动作进行封装,把它封装给Angular的另一个机制--指令directive里面,在controller里面操作DOM这个效率是非常低的,因为可能会导致重绘或回流);
3.不要在Controller里面做数据的格式化,ng有很好的表单控件;
4.不要在Controller里面做数据的过滤操作,ng有$filter服务;
5.一般来说Controller是不会相互调用的,控制器之间的交互会通过数据模型上面事件进行交互,或者是scope进行交互。