雙向資料繫結---AngularJS的基本原理學習
Angular JS (Angular.JS) 是一組用來開發Web頁面的框架、模板以及資料繫結和豐富UI元件。它支援整個開發程序，提供web應用的架構，無需進行手工DOM操作。 AngularJS很小，只有60K，相容主流瀏覽器，與 jQuery 配合良好。雙向資料繫結可能是AngularJS最酷最實用的特性,將MVC的原理展現地淋漓盡致.
AngularJS的工作原理是:HTML模板將會被瀏覽器解析到DOM中, DOM結構成為AngularJS編譯器的輸入。AngularJS將會遍歷DOM模板, 來生成相應的NG指令,所有的指令都負責針對view(即HTML中的ng-model)來設定資料繫結。因此, NG框架是在DOM載入完成之後, 才開始起作用的.
在html中:
<body ng-app="ngApp"> <div ng-controller="ngCtl"> <label ng-model="myLabel"></label> <input type="text" ng-model="myInput" /> <button ng-model="myButton" ng-click="btnClicked"></button> </div> </body>
在js中:
// angular app
var app = angular.module("ngApp" 如上,我們在html中先定義一個angular的app,指定一個angular的controller,則該controller會對應於一個作用域(可以用$scope字首來指定作用域中的屬性和方法等). 則在該ngCtl的作用域內的HTML標籤, 其值或者操作都可以通過$scope的方式跟js中的屬性和方法進行繫結.
這樣, 就實現了NG的雙向資料繫結: 即HTML中呈現的view與AngularJS中的資料是一致的. 修改其一, 則對應的另一端也會相應地發生變化.
這樣的方式,使用起來真的非常方便. 我們僅關心HTML標籤的樣式, 及其對應在js中angular controller作用域下繫結的屬性和方法. 僅此而已, 將眾多複雜的DOM操作全都省略掉了.
這樣的思想,其實跟jQuery的DOM查詢和操作是完全不一樣的, 因此也有很多人建議用AngularJS的時候,不要混合使用jQuery. 當然, 二者各有優劣, 使用哪個就要看自己的選擇了.
NG中的app相當於一個模組module, 在每個app中可以定義多個controller, 每個controller都會有各自的作用域空間,不會相互干擾.
看下邊這段html:
<div ng-app="dataApp"> 單價： <input type="number" min=0 ng-model="price" ng-init="price = 299"><br> 數量： <input type="number" min=0 ng-model="quantity" ng-init="quantity = 1"><br> 總價： {{ quantity * price }} </div>
你會驚喜地發現, 甚至不用寫一行的JS程式碼, 即可完成計算並在介面展示結果.
即: 在前端html中使用{{ }}括起來的變數, 是跟AngularJS中對應的controller作用域內的屬性繫結在一起的. 實際上,{{}}等同於ng-bind指令, 即ng-bind="myData"就能將NG中的myData資料跟前端對應元素繫結在一起.這樣的話, 可以非常方便地做到從NG中獲取任意資料並實時展示在頁面上了.
另外, $scope物件還提供了一個$apply方法, 用於進行html頁面上的更新, 使用方式為:
$scope.$apply(function(){ $scope.myValue = "NewValue"; });
$scope物件, 我們可以理解為NG框架中的一個作用域物件, 在該作用域內可以做到資料和檢視的相互繫結, 同時又能與其他$scope物件的作用域隔離開來.
當然, $scope也可以實現繼承, 這部分內容在以後接觸NG框架中其他物件的時候再分別做記錄.