Chapter Two: [AngularJS] using ANGULARAMD to load service

Objective

" use ANGULARAMD to load controller": This article is about how to use ANGULARAMD to load controllers. This article is based on the introduction of how to use ANGULARAMD to load the service to make the SPA's activation process more lightweight to enhance the user's operational experience. And also through this type of design, let the specialized function more modular, increase the efficiency of development and maintenance. It's about keeping a record for yourself and hoping to help the people in need.

• Angularamd

Installation

This article is based on the example program " using ANGULARAMD to load a controller" to add the functionality of the service to it. Before starting the development of this article, the developers can build the base structure according to the steps of the previous article.

Dynamic Load Controller Example: click here to download

Start Service

After obtaining the base structure, a new Userrepository.js file is added to the work folder to define the Service:userrepository object.

The first thing to do is to add the following REQUIRE+ANGULARAMD language to the Userrepository.js, The userrepository.js is packaged into an action-packed AMD format module that is injected with ANGULARAMD's app to provide an servive of the dynamic registration. (related to the use of require.js, you can refer to:require.js usage-Nanyi blog)

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

Then, in Userrepository.js, add the following userrepository category that uses JavaScript objects to write to the language, and then use this userrepository to provide the functionality of the system. (Reference to JavaScript Object-directed language, suggestions:javascript design mode-Stoyan Stefanov)

Classvar userrepository = (function () {ConstructorsfunctionUserrepository () {UsersThis.users =NewArray ();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 code to the Userrepository.js and use the App object provided by ANGULARAMD to register the userrepository category as a angular service. This dynamic registers the userrepository as angular's service code and will be downloaded after the userrepository.js this AMD format file has been uploaded and executed. (related to ANGULARAMD's dynamic registration function, you can refer to: angularamd:creating a Module-marcoslin)

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

Add Service

After the service is completed, the userrepository created by the previous step is then used in the controller. First edit the existing about.js in the work folder, and modify the declaration of the require language to the following program content. The meaning of the "userrepository" string in this program is to use the Require.js function to download the userrepository.js AMD format file.

• About.js

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

When the userrepository.js is loaded, the system will follow the code to define the Userrepository category as a service of angular. This time the person can modify the controller declaration in about.js and use angular to obtain userrepository service to provide controller use.

• About.js

  // controllerreturn ["$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>

Execute the Line

When you're done, you'll be ready to use Chrome to perform index.html. But before reviewing the results, you need to take the following information to open Chrome's necessary features, and then continue using chrome to perform the normal index.html.

• Local Web page in Chrome, using XMLHttpRequest to read local files-sleeping area

After index.html, the system will enter the home page of the preset according to the routing. Using Chrome's developer tool, you can see the system loaded with the template, Controller, and displayed on the home page.

Click on the About button on the home page to switch to the About page. This time, from the Chrome Developer tool, you can see that the system is only going to download the template, Controller, and extra userrepository of the About page after clicking on the About button to provide services, This is the Dynamic Onboarding Service feature provided by ANGULARAMD.

Example download

Example Archives: Click here to download

Chapter Two: [AngularJS] using ANGULARAMD to load service