ANGULARJS中用NG-BIND指令實(shí)現(xiàn)單向綁定的例子
本文簡(jiǎn)單介紹AngularJS框架后,用一個(gè)實(shí)例演示{{}}插值法和ng-bind指令的使用。
不同于jquery只是一個(gè)加強(qiáng)和簡(jiǎn)化前端開發(fā)的類庫(kù),angularjs是一個(gè)完整web前端框架,所以學(xué)習(xí)曲線高了很多。
angularjs給我的感覺(jué)類似于Java的Spring框架,處于中心容器位置粘合其他組件,其內(nèi)置的很多組件已經(jīng)可以滿足一般場(chǎng)景,特殊場(chǎ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聲明一個(gè)angularjs的模塊,并限定在聲明html標(biāo)簽的范圍內(nèi)。
ng-controller是在模塊中聲明一個(gè)angularjs的控制器,控制器可以有多個(gè),但上下文是隔離的,應(yīng)盡可能縮小控制器的作用范圍。
{{}}是angularjs的插值語(yǔ)法,類似于JSP的EL表達(dá)式${}。第一個(gè)輸出因?yàn)椤盬orld”是個(gè)字面值,程序會(huì)直接輸出;第二個(gè)輸出因?yàn)間reeting是在控制器里定義的一個(gè)變量,所以也會(huì)輸出變量對(duì)應(yīng)的值,一樣是World;第三個(gè)輸出利用了angularjs內(nèi)置的ng-bind屬性指令,最終結(jié)果等價(jià)于{{}},但注意指令=后面是字符串,不要寫錯(cuò)。
js里面的HelloController和body上面的指令對(duì)應(yīng),入?yún)?scope是框架提供的一個(gè)服務(wù),代表當(dāng)前控制器的上下文,還有其他類似服務(wù),框架會(huì)自動(dòng)注入,以后慢慢了解。方法體只有一行,是在$scope上定義了一個(gè)變量,就是html代碼里引用的變量。
這一篇很簡(jiǎn)單,代碼復(fù)制了就能運(yùn)行。注意angular.min.js是1.2分支最新的版本,同樣的代碼用1.3.0版本無(wú)法運(yùn)行,原因未知,可能1.3.0還不是最終Release版本有關(guān)。
相關(guān)文章
AngularJS使用ocLazyLoad實(shí)現(xiàn)js延遲加載
這篇文章主要介紹了AngularJS使用ocLazyLoad實(shí)現(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)資料,需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-06-06
AngularJS應(yīng)用開發(fā)思維之依賴注入3
這篇文章主要為大家詳細(xì)介紹了AngularJS應(yīng)用開發(fā)思維之依賴注入第三篇,感興趣的小伙伴們可以參考一下2016-08-08
舉例詳解AngularJS中ngShow和ngHide的使用方法
這篇文章主要介紹了舉例詳解AngularJS中ngShow和ngHide的使用方法,AngularJS是一款非常熱門的JavaScript框架,需要的朋友可以參考下2015-06-06
使用AngularJS編寫較為優(yōu)美的JavaScript代碼指南
這篇文章主要介紹了使用AngularJS編寫較為優(yōu)美的JavaScript代碼指南,包括控制器和封裝等進(jìn)階技巧上的編程建議,傾力推薦!需要的朋友可以參考下2015-06-06
angularjs 表單密碼驗(yàn)證自定義指令實(shí)現(xiàn)代碼
這篇文章主要介紹了angularjs 表單密碼驗(yàn)證自定義指令實(shí)現(xiàn)代碼,需要的朋友可以參考下2016-10-10
RequireJS 依賴關(guān)系的實(shí)例(推薦)
下面小編就為大家?guī)?lái)一篇RequireJS 依賴關(guān)系的實(shí)例(推薦)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01

