第二节：MVC · angularjs

## MVC MVC模式（Model–view–controller）是软件工程中的一种软件架构模式，把软件系统分为三个基本部分：模型（Model）、视图（View）和控制器（Controller）。 MVC模式最早由Trygve Reenskaug在1978年提出[1] ，是施乐帕罗奥多研究中心（Xerox PARC）在20世纪80年代为程序语言Smalltalk发明的一种软件架构。我们比喻的官方一些，MVC是这样的：从用户发送数据开始，经历1-2-3-4-5-6步，再将数据返回给用户。如下图所示： ![](https://box.kancloud.cn/2016-08-01_579ef6ec79509.png) 对于MVC的理解，下图可能更加直观： ![](https://box.kancloud.cn/2016-08-01_579ef6ecacbd5.png) 试想下，如此强大的框架，怎么会不支持MVC呢？下面，我们将使用MVC思想，重写上节中的模板： V ~~~ <html lang="en" ng-app="phonecatApp"> ... <body ng-controller="PhoneListController"> <ul> <li ng-repeat="phone in phones"> <span>{{phone.name}}</span> <p>{{phone.snippet}}</p> </li> </ul> </body> ~~~ 这里，我们用到了第一个指令`ng-repeat`，实现对某个数组的循环输出，在上面的代码中，`phones`是一个数组，`phone`是这个数组中的一个对象。当然了，通过上面的代码，我们还能够猜出`name`和`snippet`是这个对象的两个属性。 `ng-app="phonecatApp"`对模块名（Module，注意：是module 而不是model）进行了定义。`ng-controller="PhoneListController"`对控制器进行了定义。即：我们在前面定义了一个叫做`phonecatApp`的模块，同时，在这个模块中定义了一个叫做`phoneListController`的控制器。上述两条定义，决定了index.html中`PhoneListController`的代码块，将会交给`PhoneListController`这个控制器来处理。为此，我们在C层中建立`phonecatApp`模块，并在这个模块下创建`phoneListController`控制器。 ## 定义模块在V层中声明了模块`phonecatApp`，而在C层中，不加定义的话，会报如下『未成功初始化模块』的错误，如下图所示： ![](https://box.kancloud.cn/2016-07-20_578ec4c2d243f.png) ### 新建JS文件并引入 `index.html`： ~~~ + <script src="app.js"></script> ~~~ `app.js`： ~~~ // 定义模块 var phonecatApp = angular.module('phonecatApp', []); ~~~ 我们此时再刷新网页，发现已经由『未定义模块』的错误变成『未定义控制器』了。 ![](https://box.kancloud.cn/2016-07-20_578f39330526e.png) ## 定义控制器 `app.js`： ~~~ // 定义模块 var phonecatApp = angular.module('phonecatApp', []); phonecatApp.controller('PhoneListController', function(){ }); ~~~ 查看控制台，没有任何报错信息，控制器定义正确。 ## 将数据放到控制器中 > 在angularjs中，有一个特殊的对象：$scope，它将V与C联系了起来。以后，我们还会看到很多$打头的命名，我们可以这样理解，凡是以$打头的全名，便是angularjs提供给我们使用的系统变量。当然，我们也可以定义$打头的变量，但为了避免与angularjs产生冲突，我们往往不这么做。加入数据后，代码如下： ~~~ // 定义模块 var phonecatApp = angular.module('phonecatApp', []); // 定义控制器 phonecatApp.controller('PhoneListController', function($scope) { $scope.phones = [{ name: 'Nexus S', snippet: 'Fast just got faster with Nexus S.' }, { name: 'Motorola XOOM™ with Wi-Fi', snippet: 'The Next, Next Generation tablet.' }, { name: 'MOTOROLA XOOM™', snippet: 'The Next, Next Generation tablet.' }]; }); ~~~ 刷新页面： ![](https://box.kancloud.cn/2016-07-20_578f393320934.png) 我们在C层的$scope中加入数据后，V层的ng-repeat起了作用，循环输出了这三部手机。