標籤：min app 模組 又能 ons jquery 也有 web應用 手工
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 appvar app = angular.module("ngApp", [], function(){ console.log("ng-app : ngApp");});// angular controllerapp.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架構中其它對象的時候再分別做記錄.
雙向資料繫結---AngularJS的基本原理學習
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
