本文簡(jiǎn)單介紹AngularJS框架后，用一個(gè)實(shí)例演示{{}}插值法和ng-bind指令的使用。

不同于jquery只是一個(gè)加強(qiáng)和簡(jiǎn)化前端開(kāi)發(fā)的類(lèi)庫(kù)，angularjs是一個(gè)完整web前端框架，所以學(xué)習(xí)曲線(xiàn)高了很多。

angularjs給我的感覺(jué)類(lèi)似于Java的Spring框架，處于中心容器位置粘合其他組件，其內(nèi)置的很多組件已經(jīng)可以滿(mǎn)足一般場(chǎng)景，特殊場(chǎng)景我們可以按照框架思路擴(kuò)展。

下面從最基礎(chǔ)的內(nèi)容走起：

ng-app聲明一個(gè)angularjs的模塊，并限定在聲明html標(biāo)簽的范圍內(nèi)。

ng-controller是在模塊中聲明一個(gè)angularjs的控制器，控制器可以有多個(gè)，但上下文是隔離的，應(yīng)盡可能縮小控制器的作用范圍。

{{}}是angularjs的插值語(yǔ)法，類(lèi)似于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à)于{{}}，但注意指令=后面是字符串，不要寫(xiě)錯(cuò)。

js里面的HelloController和body上面的指令對(duì)應(yīng)，入?yún)?scope是框架提供的一個(gè)服務(wù)，代表當(dāng)前控制器的上下文，還有其他類(lèi)似服務(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)。

最新評(píng)論