AngularJS可以把模版編寫成HTML的形式，利用指令來拓展HTML标簽，增加聲明式文法來實作想做的任何事情。AngularJS的内置指令包括渲染指令、事件指令和節點指令。
渲染指令
ng-bind：
<code><</code><code>p</code> <code>ng-bind</code><code>=</code><code>"something"</code><code>></</code><code>p</code><code>></code>
相當于：
<code><</code><code>p</code><code>>`something`</</code><code>p</code><code>></code>
ng-bind-template：
如果用ng-bind-template,則相當于：
<code><</code><code>p</code> <code>ng-bind-template</code><code>=</code><code>"`something`"</code><code>></</code><code>p</code><code>></code>
ng-init：
初始化一個變量。
<code><!DOCTYPE html></code>
<code><</code><code>html</code><code>></code>
<code><</code><code>head</code><code>></code>
<code> </code><code><</code><code>meta</code> <code>charset</code><code>=</code><code>"utf-8"</code><code>></code>
<code></</code><code>head</code><code>></code>
<code><</code><code>body</code> <code>ng-app</code><code>=</code><code>"app"</code><code>></code>
<code> </code><code><</code><code>div</code> <code>ng-controller</code><code>=</code><code>"Controller1"</code> <code>ng-init</code><code>=</code><code>"something='what a hot day!'"</code><code>></code>
<code> </code><code><</code><code>p</code><code>>`something`</</code><code>p</code><code>></code>
<code> </code><code></</code><code>div</code><code>></code>
<code> </code><code><</code><code>script</code> <code>src</code><code>=</code><code>"http://cdn.bootcss.com/angular.js/1.4.0-rc.2/angular.min.js"</code><code>></</code><code>script</code><code>></code>
<code> </code><code><</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>></code>
<code> </code><code>angular.module('app', [])</code>
<code> </code><code>.controller('Controller1', ['$scope', function(parm) {</code>
<code> </code><code>parm.something = 'hello world';</code>
<code> </code><code>}]);</code>
<code> </code><code></</code><code>script</code><code>></code>
<code></</code><code>body</code><code>></code>
<code></</code><code>html</code><code>></code>
在頁面顯示的是what a hot day。
ng-repeat：
循環輸出。
其中，$index為目前循環到的下标，boolean值$first表示是否為頭元素，boolean值$last表示是否為尾元素，boolean值$middle表示是否為非頭非尾元素。
<code> </code><code><</code><code>div</code> <code>ng-controller</code><code>=</code><code>"Controller1"</code> <code>ng-init</code><code>=</code><code>"array = ['one','two','three','four']"</code><code>></code>
<code> </code><code><</code><code>ul</code> <code>ng-repeat</code><code>=</code><code>"item in array"</code><code>></code>
<code> </code><code><</code><code>li</code><code>>index:{{$index}}</</code><code>li</code><code>></code>
<code> </code><code><</code><code>li</code><code>>isFirst?{{$first}}</</code><code>li</code><code>></code>
<code> </code><code><</code><code>li</code><code>>isMiddle?{{$middle}}</</code><code>li</code><code>></code>
<code> </code><code><</code><code>li</code><code>>isLast?{{$last}}</</code><code>li</code><code>></code>
<code> </code><code></</code><code>ul</code><code>></code>
<code> </code><code>.controller('Controller1', function($scope) {});</code>
結果為：
<a href="http://s3.51cto.com/wyfs02/M00/6F/1B/wKioL1WSM-OwpInWAADAfUkEaiA924.jpg" target="_blank"></a>
ng-include：
加載另一個HTML頁面。
<code><</code><code>div</code> <code>ng-include</code><code>=</code><code>"'http://www.scut.edu.cn/jw2005/'"</code><code>></</code><code>div</code><code>></code>
使用ng-include加載另一頁面到目前頁面，浏覽器會提示錯誤。使用ng-include指令的時候，會用到AJAX請求XMLHttpRequest。但是我們是直接用浏覽器打開的目前網頁，并沒有通過web容器通路，是以存在跨域通路問題，加載http://www.scut.edu.cn/jw2005/也就失敗了。解決辦法很簡單：将代碼部署到tomcat等web容器下，通過http通路即可。或者使用webstorm，會自動地啟動web容器。
事件指令
ng-click，ng-dbclick，ng-mousedown，ng-mouseup，ng-mouseenter，ng-mouseleave，ng-mousemove，ng-over，ng-submit 這些和JavaScript原生的on-系列指令是類似的。
ng-change：
<code> </code><code><</code><code>div</code> <code>ng-controller</code><code>=</code><code>"Controller1"</code><code>></code>
<code> </code><code><!-- input隻要變化就會重新計算anything --></code>
<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>ng-model</code><code>=</code><code>"something"</code> <code>ng-change</code><code>=</code><code>"anything = something*2"</code> <code>/></code>
<code> </code><code><</code><code>p</code><code>>`anything`</</code><code>p</code><code>></code>
<code> </code><code>.controller('Controller1', function() {});</code>
<a href="http://s3.51cto.com/wyfs02/M01/6F/21/wKiom1WSUErgHEpZAAA32j9KA4I322.jpg" target="_blank"></a>
節點指令
ng-style：
和HTML的style是一樣的。
ng-class：
ng-class="{className:expression}" 如果expression為true，則使用className這個class。
ng-class-odd：
多用于表格，單數行的樣式。
ng-class-even：
多用于表格，偶數行的樣式。
ng-show：
ng-show="expression"如果expression為true，則顯示。
ng-hide：
ng-hide="expression"如果expression為true，則隐藏。
ng-switch：
<code><</code><code>ul</code> <code>ng-switch </code><code>on</code><code>=</code><code>"expression"</code><code>></code>
<code> </code><code><</code><code>li</code> <code>ng-switch-when</code><code>=</code><code>"true"</code><code>>good</</code><code>li</code><code>></code>
<code> </code><code><</code><code>li</code> <code>ng-switch-when</code><code>=</code><code>"false"</code><code>>bad</</code><code>li</code><code>></code>
<code></</code><code>ul</code><code>></code>
如果expression為true，顯示good，否則會顯示bad。
ng-src：
<code> </code><code><</code><code>img</code> <code>ng-src</code><code>=</code><code>"`src`"</code><code>></code>
<code> </code><code>.controller('Controller1', function($scope) {</code>
<code> </code><code>$scope.src = 'https://www.baidu.com/img/bdlogo.png';</code>
<code> </code><code>});</code>
ng-href：
類似ng-src。
ng-if：
類似ng-show。
本文轉自 iampomelo 51CTO部落格，原文連結：http://blog.51cto.com/iampomelo/1669460，如需轉載請自行聯系原作者
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)