Angular.js基本概念和用法--（一MVC1）

本专栏的所有博客都是在学习慕课网大漠穷秋的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进行交互。

下一章节：Angular.js基本概念和用法--（一MVC2）

Angular.js基本概念和用法--（一MVC1）

猜你喜欢