模型和控制器-起步階段

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指令來建立一個簡單的控制器定義，以下所示：

1. <div ng-app="" ng-controller="MyController">
2. <p>請輸入一個名字：<input type="text" ng-model="person.name"> </p>
3. <p>Hello <span ng-bind="person.name"></span> </p>
4. </div>
6. <script>
7. function MyController($scope) {
8. $scope.person = {
9. name: "World"
10. };
11. }
12. </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，咱們就能夠操做做用域內任何咱們想要獲取的對象數據。

 

控制器方法

控制器不只聲明屬性也能夠聲明方法，以下所示：

1. <div ng-app="" ng-controller="MyController">
2. Your name:
3. <input type="text" ng-model="username">
4. <button ng-click="sayHello()">打招呼</button>
5. <hr>
6. {{greeting}}
7. </div>
8.  
9. <script>
10. function MyController($scope) {
11. $scope.username = 'World';
12. $scope.sayHello = function() {
13. $scope.greeting= 'Hello ' + $scope.username + '!';
14. };
15. }
16. </script>

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

固然若是是開發條件的須要，咱們也能夠將控制器寫在外部文件中，那如上示例該怎麼作呢，很簡單，以下簡單引用便可：

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