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=)