行如風 Angular 初識3

最近一直在學習AngularJs的內容，受益頗多，今天就繼續為大家分享我的學習成果，上一篇博文主要說了一下關于MVC的事情，這個是學習Angular的基礎，所以我覺得如果是小白的話非常有必要搞清楚三者之間的關系，廢話不多說。

    Angualar的主要特征呢，前面說過是雙向數據綁定，那么是怎么來實現的呢？

    先來說一下MVVM，MVVM就是module-view-view-module(模型---視圖---視圖---模型)，與之前的MVC不同的是MVVM是雙向的，即模型改變視圖會自動跟著變，視圖改變模型也會跟著變，控制器同樣起中間橋梁的作用。下面上一段代碼，來舉例說明：

<div ng-app="myApp" ng-controller="ctrl" >                  
        <div>`name`</div>
        <input ng-model="name">
</div>
<script type="text/javascript"src="js/angular.js" ></script>
<script> 
    var m=angular.module('myApp',[]);
    m.controller('ctrl',['$scope',function($scope){
        $scope.name="hello world!";
    }])
</script>

在上面的代碼中ng-app是模塊化指令，ng-controller是控制器指令，下面的所有數據的綁定和引用必須全部在當前模塊"myApp"和控制器"ctrl"之內寫入，否則的話Angular不會檢測到對應的服務，`name`是控制器內的固定服務對象$scope的name屬性，表單里的值由ng-model="name"指令來綁定到視圖上。

將上面這段代碼Copy到HTML里面去，在頁面上會看到div和表單input里的值都是"hello world!"，那么怎么知道視圖的變化會影響到模型的變化呢？大家只要在頁面里將input里面的值改變，會發現上面div里的值會相應作出同樣的變化，這是因為，在改變表單里的值的同時，觸發js的事件，js里的控制器$scope里的屬性會跟著變化，同樣當$scope里的值發生改變的時候，視圖里綁定的值也會發生改變，所以當表單input里的值變化，$scope的屬性改變，然后`name`也跟著變化，故大家會發現表單和div里的值會同時變化。這篇先到這里，大家一起努力~~Fingting!