[AngularJS] 使用AngularAMD动态加载Service

[AngularJS] 使用AngularAMD动态加载Service

前言

「使用AngularAMD动态加载Controller」：这篇文章里介绍如何使用AngularAMD来动态加载Controller。本篇文章以此为基础，介绍如何使用AngularAMD来动态加载Service，让SPA的启动过程更加轻量化，用以提升使用者的操作体验。并且也透过这样挂载式的设计，让项目功能更加模块化，增加开发与维护的工作效率。主要为自己留个纪录，也希望能帮助到有需要的开发人员。

• AngularAMD

安装

本篇文章以「使用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。

• Chrome内的本地网页，使用XMLHttpRequest读取本地档案 - 昏睡领域

执行index.html之后，会系统依照路由设定进入预设的Home页面。而使用Chrome的开发者工具，可以看到系统加载了Home页面的Template、Controller，并且显示在页面上。

点击Home页面的About按钮，会切换到About页面。这时同样从Chrome的开发者工具中，可以看到系统是在点击了About按钮之后，才去加载About页面的Template、Controller、以及额外的UserRepository来提供服务，这也就是AngularAMD所提供的动态加载Service功能。

范例下载

范例档案：点此下载