今天筆者要跟各位介紹的是 - 模組(Module)。你可以先將模組(Module)想像成是一塊具有某種功能的樂高積木，然後我們除了可以自己產生積木之外，也能直接拿別人做好的積木來搭配使用，像是鐵捲門的積木、氣密窗的積木等等。
我們之前練習過很多次 Controller 的使用方式，現在則是要教大家如何將這些 Controller 封裝在自己的模組(Module)中囉。
首先來看一個簡單的乘法計算效果：
1 2 3 4 5 6 7 8 9 | <form class="span5 form-inline" style="margin-top:20px;" ng-controller="CalCtrl"> <div class="alert alert-info"> <input type="number" class="input-small" ng-model="num1"> <span>*</span> <input type="number" class="input-small"ng-model="num2" disabled> <span>=</span> {{ num1 * num2}} </div> </form> |
然後我們的 CalCtrl 中就只是將 num1 及 num2 進行初始化的設定：
1 2 3 4 | var CalCtrl = function($scope) { $scope.num1 = 0; $scope.num2 = 5; }; |
它的功能很簡單，我們只能針對第一個輸入方塊來輸入數值，然後它會跟第二個輸入方塊的數值進行計算，最後就是顯示出來。
接著讓我們來將這樣簡單的功能裝在一個名叫 CalApp 的模組(Module)中。首先使用 angular.module(name, requires) 產生一個 Module：
1 | var calApp = angular.module('CalApp', []); |
使用 angular.module(name, requires) 來建立模組(Module)時，第一個參數是要指定想要的名稱，第二個陣列參數則是說當使用這模組(Module)時，它還會需要使用那些額外的模組(Module)。
用樂高積木來說的話，就是當我們建立了一個名叫 CalApp 的積木時，它是不是預設需要搭配其它的積木。
而現在建立了一個模組(Module)之後，若它有其它額外的功能的話，那我們也要一一幫它建立起來，像是我們需要一個用來計算用的 Controller：
1 2 3 4 | calApp.controller('CalCtrl', function($scope){ $scope.num1 = 0; $scope.num2 = 5; }); |
我們這邊使用 Model 物件的 .controller(name, constructor) 來新增 Controller，而每個 Controller 的動作就是基本的函式組成的。
再以樂高積木來看的話，這邊就是用來設定我們的積木有怎樣的功能，像是氣密窗積木的功能也許是能開窗關窗等等。
好了，現在基本設定都完成之後，讓我們先來預覽一下：
ㄟ...發生錯誤！為什麼會這樣？不知道各位是否還記得我們曾在 html 標籤上加上 ng-app 的指令嗎？指令後面還加任何值的話，可以當它是使用一般的 Controller，但現在因為我們想要套用的模組(Module)是 CalApp，所以這邊要特別指定為：
1 | <html ng-app="CalApp"> |
這樣 AngularJS 才會再我們指定的模組(Module)中尋找相對應的 Controller。接著預覽看看吧：
是不是很簡單就能建立出屬於自己的積木模組(Module)了呢！接下來的作業就請各位再建立另一個類似的模組(Module)，然後將 num1 及 num2 預設改成其它數值後試試吧(別忘了要改 ng-app)！