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>
- // 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);
- }
- }]);
這樣, 就實現了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>
即: 在前端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框架中其他對象的時候再分別做記錄.