angularjs學習筆記--

標籤：innerhtml   mode   等價   html元素   angular   inner   app   初始化   隱藏和顯示   

<span ng-bind="name"></span>
<span ng:bind="name"></span>
<span ng_bind="name"></span>
<span data-ng-bind="name"></span>
<span x-ng-bind="name"></span>

 

Ps：上述Binder 方法等價

 

ng-app=”模組名”  定義angularjs的使用範圍；

ng-init=”變數=值”，初始設定變數的值，當有多個變數時，中間用分號隔開；

ng-model=”變數”  定義變數名；

ng-bind=”變數”  綁定變數名，擷取該變數的資料。這裡的變數即是前一條的變數名。但一般用雙重花括弧來擷取變數的值。

 

 

<div ng-app="">     <p>名字：<input type="text" ng-model="name" /></p>     <h1>hello{{name}}</h1> </div>

ng-app指令告訴angularjs，<div>元素是angularjs應用程式的所有者；ng-model指令把輸入欄位的值綁定到應用程式變數name；ng-bind指令把應用程式變數name綁定到某個段落的innerHTML。

 

Angularjs對於開發單一頁面應用程式變得更易：angularjs把應用程式資料綁定到HTML元素；可以複製和充分HTML代碼；可以隱藏和顯示HTML元素；可以在HTML元素背後添加代碼；支援輸入驗證。

 

<div ng-app="" ng-init="firstName=‘jonh‘"> <p>姓名為：<span ng-bind="firstName"></span></p>     </div>

 

H5允許擴充的屬性，以data-開頭，angularjs屬性以ng-開頭，但可以使用data-ng-讓網頁對h5有效。

<div ng-app="" data-ng-init="firstName=‘jonh‘"> <p>姓名為：<span data-ng-bind="firstName"></span></p>     </div>

 

Angularjs運算式：

Angularjs運算式寫在雙大括弧內；angularjs運算式把資料繫結到HTML，類似於ng-bind指令；angularjs將在運算式書寫的位置輸出資料。

 

 

Angularjs模組定義了angularjs的應用；angularjs控制器用於控制angularjs應用；ng-app指令了應用，與ng-controller定義了控制器。

 

 

未完待續。。。。。。

 

參考 & 感謝：http://www.runoob.com/angularjs/angularjs-intro.html

 

angularjs學習筆記--