Angular JS：指令與多控制器思想
1.AngularJS框架
描述：AngularJS框架誕生於2009年，由google公司提出
特點：AngularJS的核心特點是MVC的設計模式，支援模組化和雙向資料繫結以及依賴注入。
由來：AngularJS框架時為了克服html語言在構建App上天生的不足而設計的
2.AngularJS整體感知
描述：AngularJS框架的內容非常龐大，涉及到WEB應用架構的各個方面。我們在這裡學習AngularJS的1.0版本目的主要是為了改變我們的思想
例子：快速實現mvc設計模式(資料模組與頁面與使用者之間的溝通)
筆記：使用者操作頁面，頁面事件監聽觀察到，告訴資料模型改變，資料模型再回饋給頁面
3.AngularJS的指令：可以理解為屬性
1.邊界指令ng-app
描述：AngularJS框架在使用的時候除了需要引入框架檔案之外，還需要為框架指明一個邊界告知框架在哪個範圍內生效。如果不使用邊界指令進行宣告，則AngularJS框架引入失敗。
習慣上寫在html標籤之內，表示在當前頁面中angularJS都能正常使用
語法：<html ng-app></html>
注意：邊界指令是使用NG框架必須使用的一個指令，不寫一定使用錯誤
2.呈現指令{{}}
描述：NG框架規定{{}}巢狀雙花括號用來表示【內容呈現】功能
在{{}}中可以書寫NG語法規則下的變數、字串甚至表示式
說明：在上節課例子中{{msg}}
就是使用了呈現指令，將NG變數msg中的內容呈現出來
強調：呈現指令內只能書寫合乎NG語法規則的內容，
任何不符合的輸入都不能保證最終的呈現結果
這種寫法堅決禁止：{{var num = 1;}
3.資訊指令ng-model
描述：NG框架規定ng-model用來對input或textarea這類
用於收集使用者資訊的標籤進行資料繫結
ng-model所賦的值，即為【儲存有使用者輸入內容的NG變數】
語法：
<textarea ... ng-model='userInfo'></textarea>4.繫結指令ng-bind
描述：NG框架中提供了一個用於對非輸入性的標籤使用的
類似於{{}}呈現指令的輔助指令
即為ng-bind
作用是能夠將NG變數繫結到想要顯示的標籤之上，
並且在NG框架載入失敗的時候，也不會直接將語法錯誤暴露出來
語法：
<span ng-bind='message'><span>5.初始化指令ng-init
描述：NG框架中規定使用本指令來對邊界內部的資料模型(NG變數們)進行初始化操作
ng-init並沒有規定具體的必須擺放位置，但習慣上放在body上
會在頁面載入後，自動對內部規定的資料模型進行初始化操作
語法：
<body ng-init='message="hello AngularJS"'></body>
4. AngularJS的控制器：相當於一個事件監聽
1.angular.module()方法
描述：本方法是NG框架中提供，用來生成【頁面資料模型】的方法
語法：var 模型名稱 = angular.module('邊界名稱', [注入資訊])
說明：因為現在還沒有涉及到注入內容，因此暫時空置即可
例子：var myApp_module = angular.module('app', [])
2.宣告控制器指令ng-controller
描述：本指令用來在頁面中宣告哪一個元素為控制器
控制器，就是用來操作資料和檢視的部件。
語法：<html ng-controller='mainController'>...</html>
注意：只要宣告一個標籤擁有控制器，這個控制器在指令碼中就必須寫出！！
3.實現控制器方法*.controller()
描述：本方法是NG框架在script指令碼中提供，用來生成【頁面控制器】的方法
語法：頁面資料模型名稱.controller('控制器名稱'，['$scope', function ($scope){...}]);
例子：app.controller('mainController', ['$scope', function ($scope){...}]);
4.遍歷指令ng-repeat
描述：本指令用來遍歷NG變數，並根據其進行構建頁面html元素
語法：<E ng-repeat='任意變數名 in NG變數 track by $index'>{{任意變數名}}</E> E指某一個元素
說明：track by $index 表示允許有重複內容存在，如果不寫出現重複內容會報錯
例子：<li ng-repeat='pname in names track by $index'>{{pname}}</li>
補充：ng-repeat指令必須在controller中對NG變數賦值之後才會生效
單獨的ng-repeat毫無用處，因為NG變數不存在，沒法賦值。
5. 控制器中的刪除方法；
$scope.commentArr.splice(index, 1);
// splice() 方法用於新增或刪除陣列中的元素，1表示刪除一個元素
5.事件監聽：ng-click、ng-show
描述：NG框架中通過對元素標籤新增【ng-事件名】指令，來對元素新增事件監聽
而事件監聽的回撥函式需要在controller中，通過$scope來實現
說明：整個過程類似html事件
語法：
<E ng-事件名稱='回撥函式名(NG變數)'></E>
...
$scope.回撥函式名 = function (形參){
//在函式中形參就是傳入的NG變數的值
};
...
例子：
<button ng-click='func()'>點我呼叫controller中的函式</button>
app.controller('mainController', ['$scope', function ($scope){
$scope.mainTitle = 'lesson4_事件監聽';
$scope.func = function (){
console.log('here is a func');
};
}]);
6.ng-controller與多控制器思想
描述：能夠看到angular的操作，實際上指令碼程式碼都是寫在controller之中的。 而剛剛我們將所有的指令碼都堆積到一個控制器中的操作。雖然理解上變得容易，但是實際開發過程中則會造成災難，所以為了便於團隊開發，為了便於維護， NG提出了多控制器思想。
說明：
(1)多控制器思想：類似於div中的佈局思想，是將控制器按照頁面的不同模組功能進行切分 一個控制器只用來控制一個功能模組，多個控制器之間互不影響，獨立工作。
(2)優勢：分工明確，程式碼清晰，便於維護，當系統出現問題，能夠立即定位到問題座標
(3)弊端：對於初學者而言，前期程式碼的架構會變得很繁瑣，對初學者不是很友好。
強調：
(1)每一個控制器只要被宣告，就必須通過.controller實現。 即便控制器中沒有程式碼，也必須寫出。
(2)每一個控制器作用域可以認為是巢狀的，即外層controller可以直接訪問到內層controller內的NG變數，而同級controller之間互不影響
(3)對於程式，習慣上mainController作為使用者預設載入頁面的根控制器，有且僅有唯一一個。