行如風(fēng) Angular 初識3

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

    Angualar的主要特征呢，前面說過是雙向數(shù)據(jù)綁定，那么是怎么來實現(xiàn)的呢？

    先來說一下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是控制器指令，下面的所有數(shù)據(jù)的綁定和引用必須全部在當(dāng)前模塊"myApp"和控制器"ctrl"之內(nèi)寫入，否則的話Angular不會檢測到對應(yīng)的服務(wù)，`name`是控制器內(nèi)的固定服務(wù)對象$scope的name屬性，表單里的值由ng-model="name"指令來綁定到視圖上。

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