第二節：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起了作用，循環輸出了這三部手機。