AngularJS中的MVC模式

知識 03-17

MVC是一種軟體設計思想，並不是一門具體的技術，AngularJS框架中也引入了這種思想，下面就來看一下AngularJS中的MVC分別指的是什麼。

● Model(模型):前面章節中提到過的作用域對象(例如$rootScope對象)中的屬性。

● View(視圖):大家所熟悉的DOM元素，從用戶的角度來看就是HTML頁面，在View中可以通過AngularJS表達式訪問模型數據。

● Controller(控制器):用戶自定義的構造方法，作用域中的模型數據可以通過依賴注入的方式注入控制器中。

目前普遍認為AngularJS是一款MVW(Model-View-Whatever)框架，這是因為早期的 AngularJS框架比較接近於MVC，而隨著新版本代碼的重構與API的改進，$scope對象可以認為是由一個方法(Controller)包裝後的ViewModel，看上去更接近於MVVM(Model-View- ViewModel)框架，那麼到底是MVC還是MVVM呢?不管怎樣都行(Whatever)，這就是 MVW框架的由來。

一、AngularJS控制器的定義

AngularJS控制器是一個構造方法。有些JavaScript編程經驗的朋友都知道，JavaScript方法可以作為對象模板實例化對象，當方法作為對象模板時，方法本身即為對象的構造方法。所以我們可以像定義一個普通方法一樣定義一個控制器，例如:

function LoginController ($scope,$log) {

$scope.name="admin";

$scope.pword="123456";

}

除此之外，我們還可以使用模塊實例的controller方法來聲明一個控制器。該方法可接收兩個參數，第一個參數為控制器名稱，第二個參數為一個匿名方法，即控制器的構造方法，具體使用方法如下:

var app = angular.module("app",[]);

app.controller("LoginController",function($scope,$log){

});

如上面的代碼所示，AngularJS框架在window對象中增加了一個全局的angular對象，我們可以調用angular對象的module方法返回一個模塊實例，然後調用模塊實例的controller方法來聲明一個控制器。這種方式最為常用，將會在後面的模塊化章節中重點介紹。

在上面的案例代碼中，我們定義控制器時指定了兩個參數，即$scope和$log:$scope是作用域對象，是控制器與視圖之間傳遞信息的載體;$log為AngularJS框架內置的日誌服務對象，用於向控制台中輸入日誌信息。當我們為控制器構造方法指定這兩個參數後，表示控制器依賴於這兩個對象，控制器實例化時會把這兩個對象注入控制器中。

AngularJS中的MVC模式