AngularJs模塊
概念：AngularJs將相關(guān)的代碼封裝起來，通過某種命名方式進行調(diào)用
一個AngularJs模塊包含兩部分：
- 模塊可以定義自己的控制器,服務,工廠類（factory）以及指令暖混。這些代碼或者函數(shù)在整個模塊中都是可以訪問到的
- 模塊也可以依賴于其他模塊，這些依賴在模塊示例化時就已經(jīng)定義完畢庆揪。這就意味著AngularJs可以通過命名找到相應的模塊境析，并確保該模塊中所有的函數(shù)，控制器馁痴，服務等在當期模塊內(nèi)都是可用的
模塊的功能不僅僅是用于包含相關(guān)JavaScript代碼的容器谊娇，AngularJs也用它來啟動應用。我們可以通過將模塊名稱傳給ng-app指令來告訴AngularJs應用的入口在哪里
定義模塊的方式，該模塊的名稱為notesApp：
angular.module('notesApp',[]);
- AngularJs中的module函數(shù)的第一個參數(shù)代表了模塊名稱济欢。在例子中模塊名是notesApp
- 第二個參數(shù)是一個數(shù)組赠堵，表示該模塊所依賴的模塊名稱列表。請注意例子中的第二個參數(shù)是一個空數(shù)組法褥，這意味著我們想要創(chuàng)建的notesApp模塊不需要依賴其他模塊
加載定義在其他源文件中的模塊茫叭，那么angular.module函數(shù)只需要第一個參數(shù)：
`angular.module('notesApp');
這行代碼將會通知AngularJs去查找名為notesApp的模塊，并確保我們能夠在當前文件中使用半等，增加或者修改該模塊揍愁。我們可以通過這個方法在不同的源文件中引用同一模塊并進行擴展。
兩個常見的錯誤：
- 想定義一個模塊卻忘記傳入第二個參數(shù)杀饵。這會導致AngularJs去查找該模塊而不是定義該模塊莽囤，AngularJs會給出“找不到模塊”（No module found）錯誤
- 想從另一個文件中加載某個模塊并修改它，但包含該模塊的文件卻沒有預先加載切距。請確保所有需要的文件在引用之前都已經(jīng)被正確地加載到HTML中
ng-app指令可以接受一個可選參數(shù)朽缎，該參數(shù)表示啟動時需要加載的模塊名稱
<html ng-app="notesApp">
<head>
<title>Hello AngularJs</title>
</head>
<body>
Hello{{1+1}}nd time AngularJs
<script type="text/javascript" src="https://ajax.gooogleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script type="text/javascript">
angular.module('notesApp',[]);
</script>
</body>
</html>
上例中定義了一個模塊（注意angular.moudle函數(shù)中第二個參數(shù)是個空數(shù)組），然后讓AngularJs通過ng-app指令來啟動該模塊谜悟。
創(chuàng)建自定義控制器
控制器包攬了AngularJs中的雜活话肖，通過JavaScript函數(shù)來執(zhí)行或觸發(fā)與UI相關(guān)的任務。
AngularJs控制器的主要職責有：
- 從服務器獲取所需數(shù)據(jù)以生成頁面UI
- 決定哪些數(shù)據(jù)將會被呈現(xiàn)給用戶
- 一些與頁面相關(guān)的邏輯葡幸，比如如何顯示元素最筒，UI中的哪些部分是可見的，它們的風格又是什么樣的
- 用戶交互蔚叨，比如響應用戶單擊事件以及驗證文本輸入框中的值
AngularJs控制器通常和某個HTML視圖是直接關(guān)聯(lián)的床蜘。控制器不會孤零零地游離于UI之外而不被其中任何一個所引用（如果有的話缅叠，這些業(yè)務邏輯更應該用服務來實現(xiàn)）悄泥。
模型中數(shù)據(jù)驅(qū)動著整個應用，視圖用于和用戶交互肤粱，而控制器則是兩者之間的門戶弹囚。
讓我們再來看看如何為noteApp模塊創(chuàng)建控制器：
<html ng-app="notesApp">
<head>
<title>Hello AngularJs</title>
</head>
<body ng-controller="MainCtrl">
Hello{{1+1}}nd time AngularJs
<script type="text/javascript" src="https://ajax.gooogleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script type="text/javascript">
angular.module('notesApp',[])
.controller('MainCtrl',[function(){
//此處為與控制器相關(guān)的代碼
console.log('MainCtrl has been created');
}]);
</script>
</body>
</html>
在這里，我們用controller函數(shù)定義了一個控制器领曼，它對于AngularJs中的某個模塊是可見的鸥鹉。
- controller函數(shù)中的第一個參數(shù)表示該控制器的名稱，在上例中就是“MainCtrl”庶骄。
- 第二個參數(shù)定義了控制器的真正的行為毁渗，做什么和怎么做
細節(jié)注意：controller函數(shù)中定義的匿名函數(shù)包含在一個數(shù)組內(nèi)。也就是說单刁，controller函數(shù)的第一個參數(shù)表示控制器名稱（MainCtrl）灸异，而第二個參數(shù)則是一個數(shù)組。
這個數(shù)組以字符串格式包含了控制器所依賴的模塊名稱，數(shù)組中最后那個參數(shù)是真正的控制函數(shù)肺樟。本例中檐春，我們沒有任何依賴關(guān)系，因此數(shù)組中只包含控制函數(shù)了么伯。該函數(shù)包含了所有與控制器相關(guān)的代碼
指令ng-controller：該指令可以讓AngularJs通過名稱創(chuàng)建出控制器實例疟暖，然后將它關(guān)聯(lián)到DOM元素上。
通過顯示“Hello World”,代碼如下：
<html ng-app="notesApp">
<head>
<title>Notes App</title>
</head>
<body ng-controller="MainCtrl as ctrl">
{{ctrl.helloMsg}}AngularJs.
<br/>
{{ctrl.goodbyeMsg}}AngularJs
<script type="text/javascript" src="https://ajax.gooogleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script type="text/javascript">
angular.module('notesApp',[])
.controller('MainCtrl',[function(){
//此處為與控制器相關(guān)的代碼
this.helloMsg = 'Hello';
var goodbyeMsg = 'Goodbye';
}]);
</script>
</body>
</html>
上例結(jié)果中我們只看到了“Hello AngularJs.”田柔，“Goodbye”并沒有顯示在UI中
任何定義在控制器實例上（通過控制器中的this關(guān)鍵字而不是像googbyeMsg變量那樣通過var關(guān)鍵字來定義）的變量都是可以訪問的俐巴，也能在HTML中呈現(xiàn)給用戶
任何用戶想看的信息或者HTML中需要用到的數(shù)據(jù)，都必須通過this關(guān)鍵字將它定義成控制器實例的成員變量硬爆。反過來說欣舵，如果不想HTML直接控制某個變量，就不能把它定義成控制器的成員變量缀磕，這種情況下倒是應該像例子中的goodbyeMsg那樣定義成控制器作用域中的局部變量
