MVVM簡介

針對客戶端應用開發AngularJS吸收了傳統的MVC基本原則。MVC(Model-View-Controll)設計模式針對不同的人可能意味不同的東西 ,AngularJS并不執行傳統意義上的MVC，更接近于MVVM。

MVVM模式是Model-View-ViewMode模式的簡稱。由視圖(View)、視圖模型(ViewModel)、模型(Model)三部分組成，通過這三部分實現UI邏輯、呈現邏輯和狀態控制、數據與業務邏輯的分離。

Model將和ViewModel互動(通過$scope對象)，將監聽Model的變化。這些可以通過View來發送和渲染，由HTML來展示你的 代碼。View可以通過$routeProvider對象來支配，所以你可以深度的鏈接和組織你的View和Controller，將他們變成導航 URL。AngualrJS同時提供了無狀態的Controller，可以用來初始化和控制$scope對象。

Model與MVC模式一樣，Model用于封裝與應用程序的業務邏輯相關的數據以及對數據的處理方法。它具有對數據直接訪問的權利，例如對數據庫的訪問，Model不依賴于View和ViewModel，也就是說，模型不關心會被如何顯示或是如何被操作，模型也不能包含任何用戶使用的與界面相關的邏輯。

ViewModel是一個用來提供特別數據和方法從而維護指定view的對象,。ViewModel是$scope的對象，只存在于AnguarJS的應用中。$scope只是一個簡單的js對象，這個對象使用簡單的API來偵測和廣播狀態變化。

Controller負責設置初始狀態和參數化$scope方法用以控制行為。需要指出的controller并不保存狀態也不和遠程服務互動。

View是AngularJS解析后渲染和綁定后生成的HTML。這個部分幫助你創建web應用的架構。$scope擁有一個針對數據的參考，controller定義行為，view處理布局和互動。

使用MVVM模式有幾大好處：

?

1. 低耦合：View可以獨立于Model變化和修改，一個ViewModel可以綁定到不同的View上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。

2. 可重用性：可以把一些視圖的邏輯放在ViewModel里面，讓很多View重用這段視圖邏輯。

3. 獨立開發：開發人員可以專注與業務邏輯和數據的開發(ViewModel)。設計人員可以專注于界面(View)的設計。

4. 可測試性：可以針對ViewModel來對界面(View)進行測試。

?

控制器

AngularJS控制器控制AngularJS應用程序的數據，是常規的JavaScript對象。

ng-controller指令就是用來定義應用程序控制器的，并且同時創建了一個新的作用域關聯到相應的DOM元素上。

所謂作用域就是一個指向應用模型的對象，它是表達式的執行環境，作用域有層次結構，這個層次和相應的DOM幾乎是一樣的，作用域能監控表達式和傳遞事件并且可以從父作用域繼承屬性。

每一個AngularJS應用都有一個絕對的根作用域。但也可能有多個子作用域。 一個應用可以有多個作用域，因為有一些指令會生成新的子作用域，當新作用域被創建的時候，他們會被當成子作用域添加到父作用域下，這使得作用域會變成一個和相應DOM結構一個的樹狀結構。

?

控制器屬性

現在我們就用ng-controller指令來創建一個簡單的控制器定義，如下所示：

<div ng-app="" ng-controller="MyController">

<p>請輸入一個名字：<input type="text" ng-model="person.name"> </p>

<p>Hello <span ng-bind="person.name"></span> </p>

</div>

<script>

function MyController($scope) {

$scope.person = {

name: "World"

};

}

</script>

如上所述，我們通過ng-controller指令創建了一個JavaScript對象 —— MyController并帶有name屬性，那參數$scope是什么呢，代表什么意思呢。

現在我們就來解答MyController對象參數 —— $scope。

$scope就是把一個DOM元素連結到控制器上的對象，它提供一個綁定到DOM元素(以及其子元素)上的執行上下文。它也是一個JavaScript對象，指向應用程序作用域內的所有HTML元素和執行上下文。作用域呢，就是作為$scope的數據屬性關聯到DOM上的，并且能在需要調試的時候被獲取到。

要明確創建一個$scope對象，我們就要給DOM元素安上一個controller對象，使用的是ng-controller 指令屬性。

所有$scope都遵循原型繼承，這意味著它們都能訪問父$scope們,對任何屬性和方法，如果AngularJS在當前$scope上找不到，就會到父$scope上去找，如果在父$scope上也沒找到，就會繼續向上回溯，一直到$rootScope上，這個$rootScope是最頂級的$scope，它對應著含有 ng-app指令屬性的那個DOM元素，也就是說根作用域關聯的DOM就是ng-app指令定義的地方。

也就是說，擁有了$scope，我們就可以操作作用域內任何我們想要獲取的對象數據。

?

控制器方法

控制器不僅聲明屬性也可以聲明方法，如下所示：

<div ng-app="" ng-controller="MyController">

Your name:

<input type="text" ng-model="username">

<button ng-click="sayHello()">打招呼</button>

<hr>

{{greeting}}

</div>

?

<script>

function MyController($scope) {

$scope.username = 'World';

$scope.sayHello = function() {

$scope.greeting= 'Hello ' + $scope.username + '!';

};

}

</script>

參考以上代碼，趕快動手試試控制器的使用方法吧！

當然如果是開發條件的需要，我們也可以將控制器寫在外部文件中，那如上示例該怎么做呢，很簡單，如下簡單引用即可：

<script src="MyController.js"></script>

轉載于:https://www.cnblogs.com/rainheader/p/4623954.html

總結

以上是生活随笔為你收集整理的模型和控制器-起步阶段的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。