第217天：深刻理解Angular雙向數據綁定的原理

時間 2019-11-16

標籤 217天深刻理解 angular 雙向數據綁定原理欄目 AngularJS 简体版

原文原文鏈接

1、理解angular雙向數據綁定

雙向綁定是新的前端框架中頻繁出現的一個新詞彙，也是mvvm的核心原理。angularjs五條核心信念中的數據驅動，即是由雙向綁定進行完成。javascript

那麼什麼是雙向綁定，下面簡單進行講解。css

首先咱們要理解數據綁定。咱們看到的網站頁面中，是由數據和設計兩部分組合而成。將設計轉換成瀏覽器能理解的語言，即是html和css主要作的工做。而將數據顯示在頁面上，而且有必定的交互效果（好比點擊等用戶操做及對應的頁面反應）則是js主要完成的工做。不少時候咱們不可能每次更新數據便刷新頁面（get請求），而是經過向後端請求相關數據，並經過無刷新加載的方式進行更新頁面（post請求）。那麼數據進行更新後，頁面上相應的位置也能自動作出對應的修改，即是數據綁定。html

在之前的開發模式中，這一步通常經過jq操做DOM結構，從而進行更新頁面。但這樣帶來的是大量的代碼和大量的操做。若是能在開始的時候，便已經肯定好從後端獲取的數據到頁面上須要進行的操做，當數據發生改變，頁面的相關內容也自動發生變化，這樣便能極大地方便前端工程師的開發。在新的框架中（angualr，react，vue等）,經過對數據的監視，發現變化便根據已經寫好的規則進行修改頁面，便實現了數據綁定。能夠看出，數據綁定是M(model，數據）經過VM（model-view，數據與頁面之間的變換規則）向V（view）的一個修改。前端

而雙向綁定則是增長了一條反向的路。在用戶操做頁面（好比在Input中輸入值）的時候，數據能及時發生變化，而且根據數據的變化，頁面的另外一處也作出對應的修改。有一個常見的例子就是淘寶中的購物車，在商品數量發生變化的時候，商品價格也能及時變化。這樣便實現了V——M——VM——V的一個雙向綁定。vue

具體的代碼實現一般用到如下幾個ng指令：java

ng-model:將一個DOM節點的值與一個angular中的變量進行綁定，當DOM節點值發生修改的時候變量也會隨之修改。react

ng-bind:將angular中的變量顯示到頁面中。jquery

{{}}:與ng-bind功能相同，區別在於頁面未徹底渲染完以前模板語言會直接顯示在頁面中，可經過在html標籤中加上ng-cloak解決這一問題。angularjs

2、模塊化

一、AngularJS很重要的一個特性就是實現模塊化編程，咱們能夠經過如下方式建立一個模塊，對頁面進行功能業務上的劃分

1 // 建立一個名字叫MyApp的模塊，第二個參數指的是該模塊依賴那些模塊
2 var app = angular.module(「MyApp」, []);//app是MyApp模塊的實例

也能夠將重複使用的指令或過濾器之類的作成模塊便於複用
注意必須指定第二個參數，[]是個空數組，表示不須要其餘模塊編程

二、Module.controller() 控制器

1 var app = angular.module(「myApp」, []); //myApp模塊名 app是模塊實例
2 app.controller(「userCtrl」 ,function($scope){ 
3 //userCtrl是控制器的名字
4 $scope.name= 「趙敏」; //$scope用來保存數據，定義方法
5 });

第二行代碼建立了一個名爲userCtrl的控制器，以及一個控制器函數
控制器函數接受一個名爲$scope的參數

三、Controller 控制器控制器的三種主要職責：

爲應用中的模型設置初始狀態，初始化$scope對象
經過$scope對象把數據模型或函數行爲暴露給視圖
使用$watch方法監視模型的變化，作出相應的動做

1 // 監視購物車內容變化，計算最新結果
2 $scope.$watch(‘totalCart’, calculateDiscount);

四、$scope（上下文模型）

視圖和控制器之間的橋樑
用於在視圖和控制器之間傳遞數據
利用$scope暴露數據模型（數據，行爲）

五、單向綁定和雙向綁定

單向綁定：

模型變化事後，自動同步到界面上；
通常純展現型的數據會用到單項數據綁定；使用表達式的方式都是單向的

雙向綁定：

兩個方向的數據自動同步：
模型發生變化自動同步到視圖上；
視圖上的數據發生變化事後自動同步到模型上；

3、開始編寫一個簡單的AngularJS demo

在寫代碼以前咱們先來認識如下這幾條指令：

1.ng-app = 「modulename 」

申明：ng-app 指令用於告訴 AngularJS 應用，當前這個元素是根元素。

必要性：全部 AngularJS 應用都必需要有一個根元素。

惟一性：HTML 文檔中只容許有一個 ng-app 指令，若是有多個ng-app指令，則只有第一個會被使用。

總之：這條指令定義了AngularJS的應用程序及使用範圍。

其中modulename：模塊的名稱，編碼者自定義。

2.ng-controller = 「控制器名」

ng-controller 指令用於爲你的應用添加控制器。

在控制器中，你能夠編寫代碼，製做函數和變量，並使用 scope 對象來訪問。

3.ng-model = 「eparator」

ng-model指令用於創建數據模型，在模型中對應有一個變量username用來存放input元素的value值從而綁定了輸入框的值到 scope (應用程序)變量中。

eparator：你想要綁定到表單域的屬性名。

<input>, <select>, <textarea> 元素支持該指令。

4.$scope

Scope(做用域) 是應用在 HTML (視圖) 和 JavaScript (控制器)之間的紐帶。

Scope 是一個對象，有可用的方法和屬性。

Scope 可應用在視圖和控制器上。

5.雙大括號{{變量}}

用雙重大括號來獲取變量的值。當在控制器中添加 $scope對象時，視圖 (HTML)能夠獲取了這些屬性。

HTML中，你不須要添加$scope前綴，只須要添加屬性名便可，如：{{username}}。

6.angular.module('name', requires);

使用angular.module()方法來聲明模塊。

參數說明：

第一個name是模塊的名稱，字符串變量。

第二個requires是依賴列表，也就是能夠被注入到模塊中的對象列表。

瞭解了以上指令，下面進行demo演示：

代碼塊以下：

而後用瀏覽器打開這個文件

結果如圖：

嘗試改變一下input中的值你會發現「姓名」中的值也自動發生了變化，是否是很神奇？比jquery來操做dom是否是簡單不少？

代碼詳解：

當網頁加載完畢，AngularJS 自動開啓。

ng-app指令告訴 AngularJS，<div> 元素是 AngularJS 應用程序的"全部者"。ng-controller ="myCtrl"，爲應用添加控制器，接下來 ng-model 指令創建數據模型，將input元素的value值綁定到 scope (應用程序)變量中。最後用雙重花括號{{firstName + " " + lastName}}來獲取$scope對象中變量firstName和lastName的值，而且{{ firstName }}{{ lastName }} 經過 ng-model="firstName"和ng-model="lastName"進行同步。

歸納地說，AngularJS 中的數據綁定，同步了 AngularJS 表達式與 AngularJS 數據。input元素的value發生變化，自動同步到model的 firstName 變量中，{{ firstName }}}是從模型中讀 firstName 的值，所以下面姓名中元素的內容跟着變了。

經過以上實例，咱們很容易就獲得了用戶輸入的動態值，這是原生及其餘框架難以實現的功能，固然，AngularJS除了數據的雙向綁定之外，還有其餘不少優秀的功能，但願讀者經過這個簡單的例子能敲開AngularJS學習的大門，去領悟AngularJS的強大與魅力。

附：代碼以下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title></title>
 6 <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
 7 </head>
 8 <body>
 9 <div ng-app="myApp" ng-controller="myCtrl">
10 名: <input type="text" ng-model="firstName"><br>
11 姓: <input type="text" ng-model="lastName"><br>
12 <br>
13 姓名: {{firstName + " " + lastName}}
14 </div>
15 </body>
16 <script>
17 var app = angular.module('myApp', []);
18 app.controller('myCtrl', function($scope) {
19 $scope.firstName = "王";
20 $scope.lastName = "二狗";
21 });
22 </script>
23 </html>