MVVM簡介

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

MVVM模式是Model-View-ViewMode模式的簡稱。由視圖(View)、視圖模型(ViewModel)、模型(Model)三部分組成，通過這三部分實(shí)現(xiàn)UI邏輯、呈現(xiàn)邏輯和狀態(tài)控制、數(shù)據(jù)與業(yè)務(wù)邏輯的分離。

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

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

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

Controller負(fù)責(zé)設(shè)置初始狀態(tài)和參數(shù)化$scope方法用以控制行為。需要指出的controller并不保存狀態(tài)也不和遠(yuǎn)程服務(wù)互動。

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

使用MVVM模式有幾大好處：

?

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

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

3. 獨(dú)立開發(fā)：開發(fā)人員可以專注與業(yè)務(wù)邏輯和數(shù)據(jù)的開發(fā)(ViewModel)。設(shè)計(jì)人員可以專注于界面(View)的設(shè)計(jì)。

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

?

控制器

AngularJS控制器控制AngularJS應(yīng)用程序的數(shù)據(jù)，是常規(guī)的JavaScript對象。

ng-controller指令就是用來定義應(yīng)用程序控制器的，并且同時創(chuàng)建了一個新的作用域關(guān)聯(lián)到相應(yīng)的DOM元素上。

所謂作用域就是一個指向應(yīng)用模型的對象，它是表達(dá)式的執(zhí)行環(huán)境，作用域有層次結(jié)構(gòu)，這個層次和相應(yīng)的DOM幾乎是一樣的，作用域能監(jiān)控表達(dá)式和傳遞事件并且可以從父作用域繼承屬性。

每一個AngularJS應(yīng)用都有一個絕對的根作用域。但也可能有多個子作用域。 一個應(yīng)用可以有多個作用域，因?yàn)橛幸恍┲噶顣尚碌淖幼饔糜?#xff0c;當(dāng)新作用域被創(chuàng)建的時候，他們會被當(dāng)成子作用域添加到父作用域下，這使得作用域會變成一個和相應(yīng)DOM結(jié)構(gòu)一個的樹狀結(jié)構(gòu)。

?

控制器屬性

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

<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指令創(chuàng)建了一個JavaScript對象 —— MyController并帶有name屬性，那參數(shù)$scope是什么呢，代表什么意思呢。

現(xiàn)在我們就來解答MyController對象參數(shù) —— $scope。

$scope就是把一個DOM元素連結(jié)到控制器上的對象，它提供一個綁定到DOM元素(以及其子元素)上的執(zhí)行上下文。它也是一個JavaScript對象，指向應(yīng)用程序作用域內(nèi)的所有HTML元素和執(zhí)行上下文。作用域呢，就是作為$scope的數(shù)據(jù)屬性關(guān)聯(lián)到DOM上的，并且能在需要調(diào)試的時候被獲取到。

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

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

也就是說，擁有了$scope，我們就可以操作作用域內(nèi)任何我們想要獲取的對象數(shù)據(jù)。

?

控制器方法

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

<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>

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

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

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

轉(zhuǎn)載于:https://www.cnblogs.com/rainheader/p/4623954.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。