Chapter One: [AngularJS] Use ANGULARAMD to load controller

Objective

When you use ANGULARJS to develop a single Page application (SPA), you can choose to use Angularui Router to provide you with the ability to swap the contents of the page. However, in the UI router usage scenario, it is necessary for the developers to load the controller used by each state before it can be properly switched to the content. This means that the spa created by the developers must first be loaded into the browser when the controller used for the entire spa is first launched at the moment of activation. And this is the first to load all the controller to use the motion, in large-scale professional case can easily cause the browser performance, in the impact of user experience.

This article describes how to use ANGULARAMD to load controllers, allowing the SPA's activation process to be more easily quantified to enhance the user's operational experience. It's about keeping a record for yourself and hoping to help the people in need.

• Angularamd

Installation

The ANGULARAMD uses Bower to release the kit and its dependent packages. To use bower, it is necessary to install node. js, then install NPM, and finally install Bower, and after completing the installation steps, the developers can use the Bower to download the kit. Related to the Bower installation step, you can refer to the following information:

• Gulp, Grunt, Bower and NPM-dark threading

After the Bower is installed, the developers can create a new folder as a job folder. After you open the command prompt character CD to this Job folder, enter the following instructions, and you can use Bower to obtain the ANGULARAMD kit and its dependent packages.

bower install angularAMD

And because the following example needs to use Angularui router this angular kit to provide the functionality of the page, you also need to use the instructions below, using bower to get Angularui router this kit.

bower install angular-ui-router

After completing the above steps, open the work folder to see an extra bower_components folder, and this folder puts the ANGULARAMD kit, and angular, require.js, Angular-ui-router these three kits.

Open App.js

After completing the installation step, add a app.js file in the work folder to define the relevant parameters of the system, and the necessary activation code, as appropriate.

Then you need to add the Require.js setting in App.js to define the package path used in the system and the dependencies between the packages. (related to the use of require.js, you can refer to:require.js Usage-Nanyi 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 Span class= "hljs-string" > "Angular-ui-router": [ "angular"], / /ANGULARAMD  "ANGULARAMD": [ "angular"],  "ngload": [ "ANGULARAMD"]}});      

After completing the Require.js setup, in the same app.js, add the following require language to download the kit used in the case. (related to the use of require language, the same can be referred to:require.js usage-Nanyi blog)

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

Then, in require, use the following UI-ROUTER+ANGULARAMD language to define the routing settings for Ui-router in the system and the opening path of the preset. (related to the use of Ui-router language, you can refer to: learning ui-router Management status-Bubkoo)

Routesvar registerroutes =function ( $stateProvider,  $urlRouterProvider) {//default $ Urlrouterprovider.otherwise ( "home"); //Route  $stateProvider //home. State ( "Home", Angularamd.route ({url:  "home.html", Controllerurl:  "Home.js"}) //home state ("/about ", Templateurl: " about.html ", Controllerurl:  "About.js"})) ; }; 

Finally, in require, use the following angular+angularamd to activate the angular suite in the system, which completes the system's operation parameters and the settings of the activation code for the systems. (related to the use of angular, suggestions:AngularJS Build and Execute-Shyam Seshadri, Brad Green)

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

Launch Template, Controller

After you have established the App.js and the activation code, you can use the Angular+require language to create a template for the ui-router of the system, as well as a page control (Controller) to use. (related to the use of angular, suggestions:AngularJS Build and Execute-Shyam Seshadri, Brad Green)

• Home.html

  <h1>{{ title }}</h1><br/><button ui-sref="about">About</button>

• Home.js

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

Open index.html

After completing the above steps, you will also need to build index.html to do the whole single Page application (SPA) program entry. In this index.html, the most important thing is to use Requirejs to load and perform app.js, and to add a div inside the body that lets ui-router swing the page.

<! DOCTYPE html><Html><Head><!--meta--<Metacharset="Utf-8" ><!--title--<Title></Title><!--Script--<script data-main= "app.js" src= "bower_components/requirejs/require.js" ></< Span class= "Hljs-title" >script></head> <body> <!--Content-- Span class= "Hljs-tag" ><div ui-view> </div> </ body></HTML>    

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 same way, from the Chrome Developer tool, you can see that the system is clicking on the About button and then downloading the template and controller to the page, This is the ANGULARAMD provided by the dynamic Load controller function.

Example download

Example Download: Click here to download

Chapter One: [AngularJS] Use ANGULARAMD to load controller