篇章二:[AngularJS] 使用AngularAMD動態載入Service
前言
「使用AngularAMD動態載入Controller」：這篇文章裡介紹如何使用AngularAMD來動態載入Controller。本篇文章以此為基礎，介紹如何使用AngularAMD來動態載入Service，讓SPA的啟動過程更加輕量化，用以提升使用者的操作體驗。並且也透過這樣掛載式的設計，讓專案功能更加模組化，增加開發與維護的工作效率。主要為自己留個紀錄，也希望能幫助到有需要的開發人員。
安裝
本篇文章以「使用AngularAMD動態載入Controller」的範例程式為基礎，為其附加動態載入Service的功能。進入本篇的開發步驟之前，開發人員可以先依照上一篇文章的步驟來建立基礎架構。
動態載入Controller範例：點此下載
開發Service
取得基礎架構之後，在工作資料夾內新增一個UserRepository.js檔案，用來定義動態掛載的Service：UserRepository物件。
首先要在UserRepository.js裡面加入下列require+AngularAMD語法，用來將UserRepository.js包裝成為可以動態加載執行的AMD格式模組，並且注入AngularAMD所提供的app物件用來提供動態註冊Servive的功能。(相關require.js的使用介紹，可以參考：require.js的用法 - 阮一峰的网络日志)
define(["app"], function (app) {
});
接著在UserRepository.js裡，加入下列這個使用JavaScript物件導向語法寫出來的UserRepository類別，後續會使用這個UserRepository類別來提供系統服務的功能。(相關JavaScript物件導向語法的介紹，建議參考：JavaScript 設計模式 - Stoyan Stefanov)
// class
var UserRepository = (function () {
// constructors
function UserRepository() {
// users
this.users = new Array();
this.users.push({ name: "Clark", address: "Taipei" });
this.users.push({ name: "Jeff", address: "Kaohsiung" });
this.users.push({ name: "Jammy", address: "Taipei" });
}
// methods
UserRepository.prototype.getUserByName = function (name) {
// result
var result = null;
for (var key in this.users) {
if (this.users[key].name == name) {
result = this.users[key];
}
}
// return
return result;
};
// return
return UserRepository;
})();
最後在UserRepository.js裡面加入下列程式碼，使用AngularAMD所提供的app物件把UserRepository類別動態註冊成為Angular的一個服務。這個動態把UserRepository類別動態註冊成為Angular的服務的程式碼定義，會在UserRepository.js這個AMD格式檔案被加載後執行。(相關AngularAMD所提供的動態註冊功能，可以參考：AngularAMD:Creating a Module - marcoslin)
// register
app.service("UserRepository", [UserRepository]);
加載Service
完成Service的開發工作之後，接著就要在Controller裡使用上個步驟所建立的UserRepository。首先編輯工作資料夾內既有的about.js，並且將其中require語法的宣告定義，修改為下列的程式內容。在這段程式中"UserRepository"字串，代表的意義是使用require.js的功能，去動態加載UserRepository.js這個AMD格式檔案。
-
about.js
define(["UserRepository"], function () { //... });
動態加載UserRepository.js之後，系統就會依照程式碼定義，將UserRepository類別註冊成為Angular的一個服務。這時開發人員就可以修改about.js裡面的Controller宣告，使用Angular語法取得UserRepository服務來提供Controller使用。
-
about.js
// controller return ["$scope", "UserRepository", function ($scope, UserRepository) { // properties $scope.title = "This is About page"; $scope.user = UserRepository.getUserByName("Clark"); }]; -
about.html
<h1>{{ title }}</h1> <h1>{{ user | json }}</h1> <br/> <button ui-sref="home">Home</button>
執行
完成開發步驟後，就可以準備使用Chrome執行index.html來檢視成果。但是在檢視成果之前，必須要先參考下列資料開啟Chrome的必要功能，後續就使用Chrome來正常的執行index.html。
執行index.html之後，會系統依照路由設定進入預設的Home頁面。而使用Chrome的開發者工具，可以看到系統加載了Home頁面的Template、Controller，並且顯示在頁面上。
點擊Home頁面的About按鈕，會切換到About頁面。這時同樣從Chrome的開發者工具中，可以看到系統是在點擊了About按鈕之後，才去加載About頁面的Template、Controller、以及額外的UserRepository來提供服務，這也就是AngularAMD所提供的動態載入Service功能。
範例下載
範例檔案：點此下載
