AngularJs雙向數據綁定原理

時間 2019-12-01

原文原文鏈接

Angular JS (Angular.JS) 是一組用來開發Web頁面的框架、模板以及數據綁定和豐富UI組件。它支持整個開發進程，提供web應用的架構，無需進行手工DOM操做。 AngularJS很小，只有60K，兼容主流瀏覽器，與 jQuery 配合良好。雙向數據綁定多是AngularJS最酷最實用的特性,將MVC的原理展示地淋漓盡致.html

AngularJS的工做原理是:HTML模板將會被瀏覽器解析到DOM中, DOM結構成爲AngularJS編譯器的輸入。AngularJS將會遍歷DOM模板, 來生成相應的NG指令,全部的指令都負責針對view(即HTML中的ng-model)來設置數據綁定。所以, NG框架是在DOM加載完成以後, 纔開始起做用的. 前端

在html中:web

<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中的數據是一致的. 修改其一, 則對應的另外一端也會相應地發生變化.app

這樣的方式,使用起來真的很是方便. 咱們僅關心HTML標籤的樣式, 及其對應在js中angular controller做用域下綁定的屬性和方法. 僅此而已, 將衆多複雜的DOM操做全都省略掉了.框架

這樣的思想,其實跟jQuery的DOM查詢和操做是徹底不同的, 所以也有不少人建議用AngularJS的時候,不要混合使用jQuery. 固然, 兩者各有優劣, 使用哪一個就要看本身的選擇了.htm

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對象的做用域隔離開來.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。