指令：Directive

angularJS 有一套完整的，可拓展的，用來幫助web應用開發的指令集；

在建立DOM期間，和HTML關聯著的指令會被檢測到，並被執行；

在angularJS中將前綴為 ng- 這種屬性稱之為指令，其作用就是為DOM元素調用方法，定義行為綁定數據等；

簡單說：當一個angular 應用啟動時，angular會遍歷DOM樹來解析HTML，根據指令不同，完成不同的操作；

指令屬性小提示：

ng-xxx 的屬性並不是標準中定義的屬性，很多情況下語法校驗是無法通過的；

HTML5允許拓展（自制的）的屬性，以data- 開頭；

在angularJS中可以使用 data-ng- 來讓網頁對HTML有效（兩者效果都是一樣的）

<hrml ng-app>
<hrml data-ng-app>

ng-app指令：

ng-app 指令用來表明一個 angularJS 應用程序；

標記在一個 angularJS 的作用範圍在根對象上；

系統執行的時候會自動的執行根對象範圍內的指令；

可以在一個頁面創建多個 ng-app 節點（不推薦），原因：創建多個 ng-app 時，默認只能執行第一個，後面的需要進行手動引導：angular.bootstrap()

標記的範圍盡可能小，性能優化

多個 ng-app 的使用：

<div ng-app="myAppOne" ng-controller
 
="myAppOneController">
<input type="button" value="按鈕一" ng-click="show()">
</div>
<div ng-app="myAppTwo" ng-controller="myAppTwoController">
<input type="button" value="按鈕二" ng-click="show()">
</div>
</body>
<script type=‘text/javascript‘ src=‘bower_components/angular/angular.js‘
 
></script>
<script type="text/javascript">
var myAppOne = angular.module(‘myAppOne‘,[]);
myAppOne.controller(‘myAppOneController‘,[‘$scope‘,function($scope){
    $scope.show = function(){console.log(‘1‘);};
}]);
var myAppTwo = angular.module(‘myAppTwo‘,[]);
myAppTwo.controller(‘myAppTwoController‘,[‘$scope‘,function($scope){
    $scope.show = function(){console.log(‘2‘);};
}]);
//手動引導讓第二個div被myAppTwo管理
angular.bootstrap(document.querySelector(‘[ng-app="myAppTwo"]‘),[‘myAppTwo‘]);
//上面這種方法，可以解決，但是angularJS不推薦，推薦使用的是：
//創建一個新模塊，去管理其他的模塊 接下來將ng-app="myApp"
angular.module(‘myApp‘,[‘myAppOne‘],[‘myAppTwo‘]);
</script>

angularJS指令系統---Directive