ANGULARJS中用NG-BIND指令實現(xiàn)單向綁定的例子
本文簡單介紹AngularJS框架后，用一個實例演示{{}}插值法和ng-bind指令的使用。
不同于jquery只是一個加強和簡化前端開發(fā)的類庫，angularjs是一個完整web前端框架，所以學(xué)習(xí)曲線高了很多。
angularjs給我的感覺類似于Java的Spring框架，處于中心容器位置粘合其他組件，其內(nèi)置的很多組件已經(jīng)可以滿足一般場景，特殊場景我們可以按照框架思路擴展。
下面從最基礎(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)文章
AngualrJs2官方方法是以@Input,@Output來實現(xiàn)組件間的相互傳值，而且組件之間必須父子關(guān)系，下面給大家提供一個簡單的方法，實現(xiàn)組件間的傳值，不僅僅是父子組件，跨模塊的組件也可以實現(xiàn)傳值2017-05-05
AngularJs用戶輸入動態(tài)模板XSS攻擊示例詳解
這篇文章主要給大家介紹了關(guān)于AngularJs用戶輸入動態(tài)模板XSS攻擊的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用angularjs具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-04-04
這篇文章主要介紹了使用Raygun來自動追蹤AngularJS中的異常,AngularJS是一款高人氣的JavaScript庫,需要的朋友可以參考下2015-06-06
AngularJS基礎(chǔ) ng-repeat 指令簡單示例
本文主要講解AngularJS ng-repeat 指令,這里對ng-repeat的基礎(chǔ)資料做了整理，并附有示例代碼，有興趣的朋友可以參考下2016-08-08
ionic3+Angular4實現(xiàn)接口請求及本地json文件讀取示例
本篇文章主要介紹了ionic3+Angular4實現(xiàn)接口請求及本地json文件讀取示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
Angular6 Filter實現(xiàn)頁面搜索的示例代碼
這篇文章主要介紹了Angular6 Filter實現(xiàn)頁面搜索的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了Angular之jwt令牌身份驗證的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
AngularJS實現(xiàn)DOM元素的顯示與隱藏功能
這篇文章主要介紹了AngularJS實現(xiàn)DOM元素的顯示與隱藏功能,涉及AngularJS中ng-hide與ng-show兩個屬性的使用,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了Angular4的輸入屬性與輸出屬性,結(jié)合實例形式詳細(xì)分析了Angular4輸入屬性與輸出屬性的概念、功能及相關(guān)使用技巧,需要的朋友可以參考下2017-11-11
下面小編就為大家?guī)硪黄猘ngular.js之路由的選擇方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09