工作原理是: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", [], function(){
console.log("ng-app : ngApp");
});
// angular controller
app.controller("ngCtl", [ '$scope', function($scope){
console.log("ng-controller : ngCtl");
$scope.myLabel = "text for label";
$scope.myInput = "text for input";
$scope.btnClicked = function() {
console.log("Label is " + $scope.myLabel);
}
}]);
如上,我們在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框架中其他對象的時候再分別做記錄.
