[AngularJS] Dynamically load service with ANGULARAMD

[AngularJS] using ANGULARAMD dynamic load service preface

"Dynamically loading controller" with ANGULARAMD: This article describes how to use ANGULARAMD to dynamically load a controller. " This article, based on this, describes how to use ANGULARAMD to dynamically load the service, making the SPA's startup process lighter and more user-friendly. And through such a mounted design, so that the project function more modular, increase the efficiency of development and maintenance. Keep a record for yourself, and hope to help developers in need.

• Angularamd

Installation

This article is based on an example program that uses ANGULARAMD to dynamically load controller", adding the ability to dynamically load the service. Before entering the development steps of this article, the developer can follow the steps of the previous article to establish the infrastructure.

Dynamic Load Controller Example: Click here to download

Development Service

After the infrastructure is acquired, a new Userrepository.js file is added to the working folder to define the dynamically mounted Service:userrepository object.

First, add the following REQUIRE+ANGULARAMD syntax to the userrepository.js, Used to package userrepository.js as an AMD format module that can be executed dynamically, and inject ANGULARAMD with the app object provided to provide dynamic registration servive functionality. (for the use of related Require.js, refer to: require.js usage-Nanyi's blog)

define(["app"], function (app) {});

Next, in Userrepository.js, add the following Userrepository class, which is written using JavaScript object-oriented syntax, which will be used to provide the functionality of the system service. (An introduction to object-oriented syntax related to JavaScript, recommended reference: JavaScript design mode-Stoyan Stefanov)

// classvar 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;})();

Finally, add the following program code in Userrepository.js, using the App object provided by ANGULARAMD to dynamically register the Userrepository category as a service of angular. This dynamically registers the Userrepository category as a program code definition for the angular service, which is executed after the userrepository.js this AMD format file is loaded. (For the dynamic registration function provided by the relevant ANGULARAMD, refer to: Angularamd:creating a Module-marcoslin)

// registerapp.service("UserRepository", [UserRepository]);

Load Service

After completing the service development work, the userrepository created by the previous step is then used in the controller. First, edit the existing about.js in the working folder, and change the declaration definition of require syntax to the following program contents. In this program "Userrepository" string, the meaning is to use the Require.js function, to dynamically load userrepository.js this AMD format file.

• About.js

  define(["UserRepository"], function () {        //...});

After loading the userrepository.js dynamically, the system will register the Userrepository class as a service of angular according to the program code definition. The developer can then modify the controller declaration inside the about.js and use the angular syntax to obtain the Userrepository service to provide controller use.

• About.js

  // controllerreturn ["$scope", "UserRepository", function ($scope, UserRepository) {    // properties    $scope.title = "This is About page";    

• About.html

Perform

After you complete the development steps, you are ready to use Chrome to perform index.html to examine the results. But before looking at the results, it's important to use the following data to turn on the necessary features of Chrome and follow through with chrome to perform index.html normally.

• Local pages in Chrome, using XMLHttpRequest to read local archives-sleeping areas

After executing the index.html, the system will enter the preset home page according to the routing settings. Using Chrome's developer tools, you can see that the system has loaded the template, Controller, and display on the home page.

Click the About button on the home page to switch to the About page. Also from the Chrome Developer tool, you can see that the system has clicked on the About button before loading the template, Controller, and additional userrepository of the About page to provide services. This is the dynamic load service feature provided by ANGULARAMD.

Sample Download

Sample Archives: Click here to download

[AngularJS] Dynamically load service with ANGULARAMD