ANGULARJS中用NG-BIND指令實現(xiàn)單向綁定的例子
本文簡單介紹AngularJS框架后，用一個實例演示{{}}插值法和ng-bind指令的使用。
不同于jquery只是一個加強(qiáng)和簡化前端開發(fā)的類庫，angularjs是一個完整web前端框架，所以學(xué)習(xí)曲線高了很多。
angularjs給我的感覺類似于Java的Spring框架，處于中心容器位置粘合其他組件，其內(nèi)置的很多組件已經(jīng)可以滿足一般場景，特殊場景我們可以按照框架思路擴(kuò)展。
下面從最基礎(chǔ)的內(nèi)容走起：
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>ng-bind directive</title>
</head>
<body ng-controller="HelloController">
<div>
<p>直接輸出字符串字面值</p>
Hello {{"World"}}
<hr>
</div>
<div>
<p>使用占位符輸出變量</p>
Hello {{greeting}}
<hr>
</div>
<div>
<p>使用ng-bind指令輸出變量</p>
Hello <span ng-bind="greeting"></span>
<hr>
</div>
<script src="../lib/angularjs/1.2.26/angular.min.js"></script>
<script>
function HelloController($scope) {
$scope.greeting = "World";
}
</script>
</body>
</html>
ng-app聲明一個angularjs的模塊，并限定在聲明html標(biāo)簽的范圍內(nèi)。
ng-controller是在模塊中聲明一個angularjs的控制器，控制器可以有多個，但上下文是隔離的，應(yīng)盡可能縮小控制器的作用范圍。
{{}}是angularjs的插值語法，類似于JSP的EL表達(dá)式${}。第一個輸出因為”World”是個字面值，程序會直接輸出；第二個輸出因為greeting是在控制器里定義的一個變量，所以也會輸出變量對應(yīng)的值，一樣是World；第三個輸出利用了angularjs內(nèi)置的ng-bind屬性指令，最終結(jié)果等價于{{}}，但注意指令=后面是字符串，不要寫錯。
js里面的HelloController和body上面的指令對應(yīng)，入?yún)?scope是框架提供的一個服務(wù)，代表當(dāng)前控制器的上下文，還有其他類似服務(wù)，框架會自動注入，以后慢慢了解。方法體只有一行，是在$scope上定義了一個變量，就是html代碼里引用的變量。
這一篇很簡單，代碼復(fù)制了就能運行。注意angular.min.js是1.2分支最新的版本，同樣的代碼用1.3.0版本無法運行，原因未知，可能1.3.0還不是最終Release版本有關(guān)。
相關(guān)文章
AngularJS使用ocLazyLoad實現(xiàn)js延遲加載
這篇文章主要介紹了AngularJS使用ocLazyLoad實現(xiàn)js延遲加載的相關(guān)資料,需要的朋友可以參考下2017-07-07
Angular 4依賴注入學(xué)習(xí)教程之組件服務(wù)注入（二）
大家都知道依賴注入式AngularJS的重要特性之一，之前我們已經(jīng)介紹了關(guān)于Angular 4依賴注入基礎(chǔ)的內(nèi)容，下面這篇文章主要給大家介紹了關(guān)于Angular 4依賴注入之組件服務(wù)注入的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-06-06
這篇文章主要介紹了AngularJS中下拉框的基本用法,結(jié)合具體實例形式分析了AngularJS下拉框的元素綁定、選中及顯示等功能實現(xiàn)方法,需要的朋友可以參考下2017-10-10
AngularJS應(yīng)用開發(fā)思維之依賴注入3
這篇文章主要為大家詳細(xì)介紹了AngularJS應(yīng)用開發(fā)思維之依賴注入第三篇，感興趣的小伙伴們可以參考一下2016-08-08
舉例詳解AngularJS中ngShow和ngHide的使用方法
這篇文章主要介紹了舉例詳解AngularJS中ngShow和ngHide的使用方法,AngularJS是一款非常熱門的JavaScript框架,需要的朋友可以參考下2015-06-06
這篇文章主要為大家詳細(xì)介紹了angular實現(xiàn)商品篩選功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
使用AngularJS編寫較為優(yōu)美的JavaScript代碼指南
這篇文章主要介紹了使用AngularJS編寫較為優(yōu)美的JavaScript代碼指南,包括控制器和封裝等進(jìn)階技巧上的編程建議,傾力推薦!需要的朋友可以參考下2015-06-06
angularjs 表單密碼驗證自定義指令實現(xiàn)代碼
這篇文章主要介紹了angularjs 表單密碼驗證自定義指令實現(xiàn)代碼,需要的朋友可以參考下2016-10-10
下面小編就為大家?guī)硪黄猂equireJS 依賴關(guān)系的實例(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
這篇文章主要為大家詳細(xì)介紹了Angularjs中UI Router的使用方法，感興趣的朋友可以參考一下2016-05-05