[AngularJS] 使用AngularAMD動態加載Controller
前言
使用AngularJS來開發Single Page Application(SPA)的時候，可以選用AngularUI Router來提供頁面內容切換的功能。但是在UI Router的使用情景里，需要開發人員將每個State所使用的Controller預先加載之后，才能正常的切換頁面內容。這也就代表開發人員所建立的SPA，必須要在啟動的當下，就先將整個SPA所用到的Controller都預先加載到瀏覽器之中。而這樣的預先加載所有Controller備用的動作，在大型的項目中很容易造成瀏覽器效能上的負擔，進而影響使用者的操作體驗。
本篇文章介紹如何使用AngularAMD來動態加載Controller，讓SPA的啟動過程更加輕量化，用以提升使用者的操作體驗。主要為自己留個紀錄，也希望能幫助到有需要的開發人員。
安裝
AngularAMD使用bower來發布套件本體與其相依套件。而要使用bower必須要先安裝Node.js、接着安裝npm、最后安裝bower，完成安裝步驟之后，開發人員就可以使用bower來下載套件。相關bower的安裝步驟，可以參考下列資料：
安裝完bower之后，開發人員就可以建立一個新的文件夾作為工作文件夾。接着開啟命令提示字符CD到這個工作文件夾之后，輸入下列指令，就可以使用bower來取得AngularAMD套件本體與其相依套件。
bower install angularAMD
而因為后續范例需要使用AngularUI Router這個Angular套件，來提供頁面內容切換的功能，所以還需要使用下列指令，使用bower來取得AngularUI Router這個套件。
bower install angular-ui-router
完成上列步驟后，開啟工作文件夾可以看到多出來一個bower_components文件夾，而這個文件夾內擺放了angularAMD套件本體、以及angular、require.js、angular-ui-router這三個套件。
開發app.js
完成安裝步驟后，在工作文件夾內新增一個app.js檔案，用來定義系統運行時的相關參數、還有必要的啟動程序代碼。
接着需要在app.js里面加入require.js的設定參數，用來定義系統運行時使用的套件路徑、以及套件之間的相依性。(相關require.js的使用介紹，可以參考：require.js的用法 - 阮一峰的網絡日志)
require.config({
paths: {
// angular
"angular": "bower_components/angular/angular",
// angular-ui
"angular-ui-router": "bower_components/angular-ui-router/release/angular-ui-router",
// angularAMD
"angularAMD": "bower_components/angularAMD/angularAMD",
"ngload": "bower_components/angularAMD//ngload"
},
shim: {
// angular
"angular": { exports: "angular" },
// angular-ui
"angular-ui-router": ["angular"],
// angularAMD
"angularAMD": ["angular"],
"ngload": ["angularAMD"]
}
});
完成require.js設定之后，在同一個app.js里，加入下列require語法用來加載項目使用的套件。(相關require語法的使用介紹，同樣可以參考：require.js的用法 - 阮一峰的網絡日志)
// bootstrap
define(["angular", "angularAMD", "angular-ui-router"], function (angular, angularAMD) {
// ......
});
接着在require語法內，使用下列ui-router+angularAMD語法，來定義系統內ui-router的路由設定、以及默認的開啟路徑。(相關ui-router語法的使用介紹，可以參考：學習 ui-router管理狀態 - bubkoo)
// routes
var registerRoutes = function($stateProvider, $urlRouterProvider) {
// default
$urlRouterProvider.otherwise("/home");
// route
$stateProvider
// home
.state("home", angularAMD.route({
url: "/home",
templateUrl: "home.html",
controllerUrl: "home.js"
}))
// home
.state("about", angularAMD.route({
url: "/about",
templateUrl: "about.html",
controllerUrl: "about.js"
}))
;
};
最后，同樣在require語法內，使用下列angular+angularAMD語法，來啟動系統里的angular套件，這就完成了系統的運行參數、啟動程序代碼的相關設定。(相關angular的使用介紹，建議參考：AngularJS 建置與執行 - Shyam Seshadri, Brad Green)
// module
var app = angular.module("app", ["ui.router"]);
// config
app.config(["$stateProvider", "$urlRouterProvider", registerRoutes]);
// bootstrap
return angularAMD.bootstrap(app);
開發Template、Controller
建立定義運行參數與啟動程序代碼的app.js之后，就可以着手使用angular+require語法，來建立系統內ui-router所要切換使用的頁面樣板(Template)、以及頁面控制(Controller)。(相關angular的使用介紹，建議參考：AngularJS 建置與執行 - Shyam Seshadri, Brad Green)
-
home.html
<h1>{{ title }}</h1> <br/> <button ui-sref="about">About</button> -
home.js
define([], function () { // controller return ["$scope", function ($scope) { // properties $scope.title = "This is Home page"; }]; });
開發index.html
完成上列步驟之后，還需要建立index.html來做為整個Single Page Application(SPA)的程序進入點。在這個index.html里，最主要就是使用requirejs來加載與執行app.js，並且在body里面加入一個用來讓ui-router擺放頁面內容的div。
<!DOCTYPE html>
<html>
<head>
<!-- meta -->
<meta charset="utf-8">
<!-- title -->
<title></title>
<!-- script -->
<script data-main="app.js" src="bower_components/requirejs/require.js"></script>
</head>
<body>
<!-- content -->
<div ui-view></div>
</body>
</html>
執行
完成開發步驟后，就可以准備使用Chrome執行index.html來檢視成果。但是在檢視成果之前，必須要先參考下列數據開啟Chrome的必要功能，后續就使用Chrome來正常的執行index.html。
執行index.html之后，會系統依照路由設定進入預設的Home頁面。而使用Chrome的開發者工具，可以看到系統加載了Home頁面的Template、Controller，並且顯示在頁面上。
點擊Home頁面的About按鈕，會切換到About頁面。這時同樣從Chrome的開發者工具中，可以看到系統是在點擊了About按鈕之后，才去加載About頁面的Template、Controller來顯示在頁面上，這也就是AngularAMD所提供的動態加載Controller功能。
范例下載
范例下載：點此下載