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中:
ng-controller="ngctl">在js中:ng-model="mylabel">
label>
type="text"
ng-model="myinput" />
ng-model="mybutton"
ng-click="btnclicked">
button>
div>
body>
});// angular controller
console.log("ng-controller : ngctl");
$scope.mylabel = "text for label";
$scope.myinput = "text for input";
$scope.btnclicked = function()
}]);
這樣, 就實現了ng的雙向資料繫結: 即html中呈現的view與angularjs中的資料是一致的. 修改其一, 則對應的另一端也會相應地發生變化.
這樣的方式,使用起來真的非常方便. 我們僅關心html標籤的樣式, 及其對應在js中angular controller作用域下繫結的屬性和方法. 僅此而已, 將眾多複雜的dom操作全都省略掉了.
這樣的思想,其實跟jquery的dom查詢和操作是完全不一樣的, 因此也有很多人建議用angularjs的時候,不要混合使用jquery. 當然, 二者各有優劣, 使用哪個就要看自己的選擇了.
看下邊這段html:
單價： type="number"你會驚喜地發現, 甚至不用寫一行的js**, 即可完成計算並在介面展示結果.min=0
ng-model="price"
ng-init="price = 299">
數量： type="number"
min=0
ng-model="quantity"
ng-init="quantity = 1">
總價： }
div>
即: 在前端html中使用}括起來的變數, 是跟angularjs中對應的controller作用域內的屬性繫結在一起的. 實際上,}等同於ng-bind指令, 即ng-bind="mydata"就能將ng中的mydata資料跟前端對應元素繫結在一起.這樣的話, 可以非常方便地做到從ng中獲取任意資料並實時展示在頁面上了.
$scope.myvalue = "newvalue";
});$scope物件, 我們可以理解為ng框架中的乙個作用域物件, 在該作用域內可以做到資料和檢視的相互繫結, 同時又能與其他$scope物件的作用域隔離開來.
當然, $scope也可以實現繼承, 這部分內容在以後接觸ng框架中其他物件的時候再分別做記錄.
angularJs的雙向資料繫結，簡單實用
angularjs最大的特點就是雙向資料繫結。所謂雙向資料繫結，簡單的理解就是當js裡的變數被改變時，前端頁面就會立即同步顯示出來，且這個過程類似於ajax的區域性重新整理，瀏覽器的位址列看不到一點變化 反過來，當在前端頁面改變了變數的值，那麼js裡該變數的值也會跟著改變，所以說這是雙向的。它的原理...
AngularJS資料繫結
資料繫結指angularjs 資料模型與html檢視之間資料的繫結，是同步繫結 資料模型 angularjs應用程式通常有乙個資料模型，功能是給應用程式提供資料集合 如 scope.firstname john scope.lastname doe html檢視 指angularjs應用程式所在的容...
雙向資料繫結
2 mvvm 2.總結mvvm 二 vue 2 實現mvvm主要包含兩個方面，資料變化更新檢視，檢視變化更新資料 最近面試時老被問到雙向資料繫結。明明概念看了好幾遍，也總結了好幾次，但是還是被問住 參考文章 很欣賞這篇部落格作者的一句話，再長的路，一步步也能走完。再短的路，不邁開雙腳也無法到達。送給...