首頁  >  文章  >  web前端  >  ANGULARJS中用NG-BIND指令實作單向綁定的例子_AngularJS

ANGULARJS中用NG-BIND指令實作單向綁定的例子_AngularJS

WBOY
WBOY原創
2016-05-16 16:28:251487瀏覽

本文簡單介紹AngularJS框架後,用一個實例示範{{}}插值法和ng-bind指令的使用。

不同於jquery只是一個加強和簡化前端開發的類別庫,angularjs是一個完整web前端框架,所以學習曲線高了很多。

angularjs給我的感覺類似於Java的Spring框架,處於中心容器位置粘合其他組件,其內置的很多組件已經可以滿足一般場景,特殊場景我們可以按照框架思路擴展。

以下從最基礎的內容走起:

複製程式碼 程式碼如下:




   
    ng-bind directive



   

直接輸出字串字面值


    Hello {{"World"}}
   


   

使用佔位符輸出變數


    Hello {{greeting}}
   


   

使用ng-bind指令輸出變數


    Hello
   


<script><br />     function HelloController($scope) {<br />         $scope.greeting = "World";<br />     }<br /> </script>


ng-app宣告一個angularjs的模組,並限定在宣告html標籤的範圍內。

ng-controller是在模組中聲明一個angularjs的控制器,控制器可以有多個,但上下文是隔離的,應盡可能縮小控制器的作用範圍。

{{}}是angularjs的內插語法,類似JSP的EL表達式${}。第一個輸出因為”World」是個字面值,程式會直接輸出;第二個輸出因為greeting是在控制器裡定義的變數,所以也會輸出變數對應的值,一樣是World;第三個輸出利用了angularjs內建的ng-bind屬性指令,最終結果等價於{{}},但注意指令=後面是字串,不要寫錯。

js裡面的HelloController和body上面的指令對應,入參$scope是框架提供的一個服務,代表目前控制器的上下文,還有其他類似服務,框架會自動注入,以後慢慢了解。方法體只有一行,是在$scope上定義了一個變量,就是html程式碼裡引用的變數。

這篇很簡單,程式碼複製了就能運作。注意angular.min.js是1.2分支最新的版本,同樣的程式碼用1.3.0版本無法運行,原因未知,可能1.3.0還不是最終Release版本有關。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn