初識angular體驗(四)

親們，大家好，又到了我們angular每周分享的時間啦，從這周開始呢我準備把angular的基礎知識給大家講解下，歡迎大家隨時留言，一起討論問題！

首先給大家介紹下雙向數據綁定，angular的數據綁定是數據模型(model)與視圖(view)組件的自動同步。angular的實現方式允許你把應用中的模型看成單一數據源。而視圖始終是數據模型的一種展現形式。當模型改變時，視圖就能反映這種改變，反之亦然。

下面我們先來看一段代碼：

<div ng-app="hd" ng-controller="ctrl">
    <div>`name`</div>
</div>
<script>
    var m = angular.module('hd', []);
    //雙向數據綁定
    m.controller('ctrl', ['$scope', function ($scope) {
        //viewModel
        $scope.name = '學習angular';//model   server
    }]);
</script>

以上代碼的運行結果是學習angular。

解讀：這里的"{{}}"相當于"ng-model"指令，其實就是一種綁定，但是僅從這個例子，不能說實現了雙向數據綁定。這里是將angular的數據模型（Model）的值綁定到了視圖（View）上了。

上面介紹的不能算是雙向數據綁定，下面引出真正的雙向綁定，那么雙向數據綁定有何應用場景，什么樣的情況需要數據模型與視圖能夠相互映射相互影響呢，可能是你沒有察覺，現在很多的網站都能看到這種思想帶來的極大便捷，比如說表單，在填寫或提交表單時，界面上會根據用戶的操作做出及時的相應，這就是一種雙向數據綁定的最有力的應用場景。

注意：這個例子很好地詮釋了什么是雙向綁定。

<div ng-app="hd" ng-controller="ctrl">
    <div>`name`</div>
    <input type="text" ng-model="name">
</div>
<script>
    var m = angular.module('hd', []);
    //雙向數據綁定
    m.controller('ctrl', ['$scope', function ($scope) {
        //viewModel
        $scope.name = '學習angular';//model   server
    }]);
</script>

運行結果如下

首先在html中聲明了兩個標簽：一個輸入框input和一個div塊級標簽。

顯然采用了兩種綁定的方式：{{}}和ng-model，但是功能都是數據綁定，與js文件中控制器中的$scope.name進行了綁定。所以，通過js中$scope.name的賦值會使得前臺Html中input和div同時顯示"學習angular"。

在輸入框中的任何輸入都會及時的反應在下面的div中，這也說明了在Html中改變數據也會及時的映射到后臺數據模型，真正的實現了雙向數據綁定。

本想在本篇再介紹下angular的其它東西，限于時間和篇幅，留在下篇吧，如果覺得有用，記得點贊哦！！！