AngularJS 表達式 AngularJS 表達式寫在雙大括弧內：{{expression}} AngularJS 表達式把數據綁定到HTML，這與ng-bind 指令有異曲同工之妙 AngularJS 將在表達式書寫的位置輸出數據。 AngularJS 表達式很像JavaScript表達式：他 ...
AngularJS 表達式
AngularJS 表達式寫在雙大括弧內：{{expression}}
AngularJS 表達式把數據綁定到HTML，這與ng-bind 指令有異曲同工之妙
AngularJS 將在表達式書寫的位置輸出數據。
AngularJS 表達式很像JavaScript表達式：他們可以包含文字，運算符和變數。
實例{{5+5}} 或者{{firstName + "" +lastName}}
AngularJs 數字
AngularJS 數字就像JavaScript 數字：
實例：
<div ng-app="" ng-init="quantity=1;cost=5">
<p>總價：{{quantity * cost}}</p>
</div>
使用 ng-bind 的相同實例：
<div ng-app="" ng-init="quantity=1;cost=5">
<p>總價：<span ng-bind="quantity * cost"></span></p>
</div>
使用 ng-init 不是很常見。您將在控制器一章中學習到一個更好的初始化數據的方式。
AngularJS 字元串
Angular字元串就像JavaScript字元串：
實例：
<div ng-app"" ng-init="firstName='John';lastName='Doe'">
<p>姓名：{{firsName +""+lastName}}</p>
</div>
使用ng-bind的相同實例
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>姓名：<span ng-bind="firstName +' '+lastName"></span></p>
</div>
AngularJs對象
AngularJs對象就像javaScript 對象
實例：
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓為{{person.lastName}}</p>
</div>
使用ng-bind的相同實例
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓為<span ng-bind="person.lastName"></span></p>
</div>
AngularJs數組
AngularJs數組就像JavaScript數組：
實例：
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三個值為{{points[2]}}</p>
</div>
使用ng-bind的相同實例
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三個值為<span ng-bind="points[2]"></span></p>
</div>
AngularJs 表達式 與JavaScript表達式
類似於javaScript 表達式，AngularJS表達式可以包含字母，操作符，變數。
與JavaScript表達式不同，AngularJs表達式可以寫在HTML中，表達式不支持判斷條件，迴圈及異常
表達式不支持過濾器。
AngularJS指令
AngularJS通過被稱為指令的新屬性來擴展HTML，帶有首碼 ng-。
AngularJs通過內置的指令來為應用添加功能,ng-app 指令初始化一個 AngularJS 應用程式.
AngularJs允許你自定義指令。
ng-init指令初始化應用程式數據。
ng-model指令把元素值（比如輸入域的值）綁定到應用程式
實例：
<div ng-app="" ng-init="firstName='John'">
<p>在輸入框中常識輸入:</p>
<p>姓名：<input type="text" ng-model="firstName"></p>
<p>你輸入的為：{{firstName}}</p>
</div>
ng-app 指令告訴AngularJS<div>元素是AngularJS 應用程式的擁有者。
一個網頁可以包含多個運行在不同元素中的 AngularJS 應用程式。
數據綁定
上面實例中的{{firstName}}表達式是一個AngularJS數據的綁定的表達式。
AngularJS中的數據綁定，同步了AngularJS表達式月AngularJS數據
{{firstName}} 是通過ng-model="firstNmae"進行同步。
在下一個實例中，兩個文本域是通過兩個ng-model指令同步的。
實例：
<div ng-app="" ng-init="quantity=1; price=5">
<h2>價格計算器</h2>
數量：<input type="number" ng-model="quantity">
價格：<input type="number" ng-model="price">
<p><b>總價：</b>{{quantity * price}}</p>
</div>
重覆HTML元素
ng-repeat指令會重覆一個HTML
實例：
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<p>使用ng-repeat 來迴圈數組</p>
<ul>
<li ng-repeat="x in name">
{{X}}
</li>
</ul>
</div>
ng-repeat 指令用在一個對象數組上
實例：
<div ng-app="" ng-init="names=[{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>迴圈對象：</p>
<ul>
<li ng-repeat="x in name">
{{x.name + ',' + x.country}}
</li>
</ul>
</div>
ng-app 指令
ng-app指令定義了AngularJS 應用程式的 根元素。
ng-app 指令在網頁載入完畢時會自動引導（自動初始化）應用程式
ng-init 指令
ng-init指令為AngularJS 應用程式定義了初始值。
通常情況下，不適用ng-init,您將使用一個控制器或模塊來代替她。
ng-model指令
ng-model指令綁定HTML元素到應用程式。
ng-model 指令也可以
為應用程式數據提供類型驗證（number,email, required）.
為應用程式數據提供狀態（invalid,dirty,touched,error）
為HTML 元素提供CSS 類
綁定到HTML元素到HTML表單
ng-repeat 指令
ng-repeat指令對於集合中（數組中）的每個項會克隆一次HTML元素
創建自定義的指令
除了AngularJS內置的指令外，我們還可以創建自定義指令。
你可以使用.directive函數來添加自定義的指令。
要調用自定義指令，HTML元素張需添加自定義指令名。
使用駝峰命名法來命名一個指令，runoobDirective，但在使用它時需要以-分割，runoob-directive
實例：
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp",[])l
app.directive("runoobDirective",function(){
return{
template:"<h1>自定義指令！</h1>"
};
})
</script>
</body>
可以通過以下方式來調用指令：
元素名：<runoob-directive></runoob-directive>
屬性：<div runoob-directive></div>
類名：<div class="runoob-directive"></div>
註釋：<!-- 指令： runoob-directive-->
限制使用
你可以限制你的指令只能通過特定的方式來調用。
實例：
通過添加 restrict 屬性,並設置只值為 "A", 來設置指令只能通過屬性的方式來調用:
var app = angular.module("myApp",[]);
app.directive("runoobDirective",function(){
return{
restrict:"A",
template:"<h1>自定義</h1>"
}
})
restrict 值可以是以下幾種
E只限元素名使用
A只限屬性使用
C只限類名使用
M只限屬實使用
