angular基本概念和用法（1）

基于慕课网大漠穷秋的视频教程第二章博客内容：

二、Angular基本概念和用法

1、控制器：

在上一篇博客中，我写过ng-controller是充当控制器的，那么控制器的作用是什么呢？控制器其实是和视图双向关联的，控制器和数据模型也是双向传递数据的，那也就是说视图和数据模型是没有直接关系的，他们两的联系全是靠控制器联系的。

下面我想说说控制器controller的实现方式：

A、视图1和视图2都和控制器1联系着，控制器1和数据模型互相传递着数据。

B、视图1和控制器1联系。视图2和控制器2联系。然后控制器1和控制器2分别和数据模型传递数据。

C、视图1和控制器1联系。视图2和控制器2联系。然后控制器1和控制器2分别和数据模型传递数据。控制器1和控制器2的公共部分被服务service取代。

这三种控制器的实现方式比较：

第一种实现方式，显然就是一个大杂烩，把所以的业务和逻辑代码放在一个控制器里，让这个控制器无限庞大。显然，这样不利于大型项目的管理。

第二种实现方式，在1的基础上改进了一点，每个视图是个独立的控制器管理，那么这样让逻辑清楚一点。但是这里：如果出现了控制器1和控制器2中的某些代码一样或者说逻辑一样（或者某些方法一样），那么我们想到，这里是不是可以代码复用呢？

很多人可能就会想到这样一种方式：

我们可以将控制器1和控制器2的公共部分抽出来，成立一个通用控制器，然后去继承这个通用控制器。那么这里，我要提醒大家的是，这种实现方式，Angular是不推荐的。

Angular推荐的实现方式是什么呢？就是我上面说的第三种方式、。

第三种实现方式，我们让控制器1和控制器2的公共部分被服务service取代，（如果我们封装了这样的一个service的话，我们就可以让任意的控制器去调用这个service）这样我们是不是既完成了模块化的管理又让代码复用成功了。

下面上一个例子，去展现通用controller的实现方式、（服务的部分之后再说，下面的这个例子可以看出来前几种控制器的使用方法）

在这个例子中，我们可以看到，有一个控制器1叫做Controller1，有一个控制器2叫Controller2。还有一个包裹在最外层的通用控制器叫做CommonController然后我们可以看到有三处ng-click分别绑定了test1()（控制器1中定义的函数）、test2()（控制器2中定义的函数）、和commonFn()（控制器CommonController中定义的函数）三函数，每一个函数的实现方式如下：

那么运行这段代码会出现什么呢？

我们点击test1，当然他会帮我们去执行test1函数，那么就会弹出”test1”的弹窗。

我们点击test2，当然他会帮我们去执行test2函数，那么就会弹出”test2”的弹窗。

我们点击通用，当然他会帮我们去执行通用函数commonFn，那么就会弹出”这里是通用功能!”的弹窗。

那么在这个例子中，我只展示了通用控制器在控制器2中的调用，当然，你也可以在控制器1中调用，也会有一样的效果，或者你在其他的控制器下调用。你们可以敲一下这个代码，去运行一下试一下。

 总结一下：

Controller使用过程中的注意点：

1、不要试图去复用Controller，一个控制器一般只负责一小块视图

2、不要在controller中操作DOM，这不是控制器的职责

3、不要在controller里面做数据格式化，ng有很好用的表单控件

4、不要在controller里面做数据过滤操作，ng有$filter服务

5、一般来说，controller是不会互相调用的，控制器之间的交互会通过事件进行

控制器就讲这么多，然后下面一篇博客将会讲到模型。如果有说错的地方，希望大家可以给我提出来。