[AngularJS] Dynamically load controller with ANGULARAMD

[AngularJS] using ANGULARAMD to dynamically load controller preface

When using ANGULARJS to develop a single page application (SPA), you can use the Angularui Router to provide page content switching functionality. However, in the UI router usage scenario, it is necessary for the developer to pre-load the controller used by each State before the page content can be switched properly. This also represents the spa established by the developer, which must be preloaded into the browser at the start of the first controller used for the entire spa. This pre-loading of all controller backup actions, in large projects, can easily create a burden on the browser's performance, which in turn affects the user's operational experience.

This article describes how to use the ANGULARAMD to dynamically load the controller, making the SPA's startup process lighter, to enhance the user's user experience. Keep a record for yourself, and hope to help developers in need.

• Angularamd

Installation

ANGULARAMD uses Bower to publish the package ontology and its dependent suite. To use bower, you must install node. js, install NPM, and finally install Bower, and after completing the installation steps, the developer can use bower to download the package. For the installation procedure of the relevant Bower, the following information can be consulted:

• Gulp, Grunt, Bower and NPM-dark thread

After Bower is installed, the developer can create a new folder as a working folder. After opening the command prompt character CD to this working folder, enter the following instructions, you can use Bower to obtain the ANGULARAMD Suite ontology and its dependent suite.

bower install angularAMD

And since the following example needs to use Angularui router this angular suite to provide the function of page content switching, you also need to use Bower to get Angularui router this suite using the instructions below.

bower install angular-ui-router

After completing the above steps, open working folder can see a bower_components folder, and this folder is placed in the ANGULARAMD Suite ontology, and angular, require.js, Angular-ui-router these three kits.

Development App.js

After completing the installation steps, a new App.js file is added to the working folder to define the relevant parameters of the system runtime, as well as the necessary startup program code.

You then need to add the Require.js parameter to the app.js to define the package path used by the system to run, and the dependencies between the packages. (for the use of related Require.js, refer to: require.js usage-Nanyi's blog)

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"]    }});

After completing the Require.js setup, in the same app.js, add the following require syntax to load the package used by the project. (The use of the relevant require syntax, also refer to: require.js usage-Nanyi blog)

// bootstrapdefine(["angular", "angularAMD", "angular-ui-router"], function (angular, angularAMD) {            // ......});

Next, within the require syntax, use the following UI-ROUTER+ANGULARAMD syntax to define the routing settings for Ui-router within the system, as well as the default open path. (Introduction to the use of related ui-router syntax, can be consulted: Learning Ui-router Management Status-Bubkoo)

// routesvar 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"        }))    ;           };

Finally, within the require syntax, the following ANGULAR+ANGULARAMD syntax is used to start the angular suite in the system, which completes the system's operating parameters and the startup program code settings. (Introduction to the use of related angular, recommendations for reference: AngularJS Build and Execute-Shyam Seshadri, Brad Green)

// modulevar app = angular.module("app", ["ui.router"]);// configapp.config(["$stateProvider", "$urlRouterProvider", registerRoutes]);// bootstrapreturn angularAMD.bootstrap(app);

Develop template, Controller

After you have established a app.js that defines the running parameters and the startup program code, you can start using the Angular+require syntax to establish the page template (template) and the page control (Controller) that the Ui-router in the system will use to switch. (Introduction to the use of related angular, recommendations for reference: AngularJS Build and Execute-Shyam Seshadri, Brad Green)

• Home.html

• Home.js

  define([], function () {    // controller    return ["$scope", function ($scope) {        // properties        $scope.title = "This is Home page";    }]; });

Development index.html

After completing the above steps, you will also need to establish index.html as the program entry point for the entire single Page application (SPA). In this index.html, the most important thing is to use Requirejs to load and execute the app.js, and add a div inside the body to let Ui-router place the content of the page.

<!DOCTYPE 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 is clicked on the About button, only to load the About page template, controller to display on the page, This is also the dynamic load controller functionality provided by ANGULARAMD.

Sample Download

Sample download: Click here to download

[AngularJS] Dynamically load controller with ANGULARAMD