AngulerJS: dynamically loading files as needed

AngulerJS: dynamically loading files as needed

Before that, we should first learn a few things:

$ Q

Introduction:

$ Q: It mainly solves the problem of asynchronous programming. It refers to the interaction between the result of an asynchronous execution of an object through a committed behavior, it may or may not be completed at any time.

Let's use a short story to understand the $ q service.

• I bought it out at noon and called for a fried rice. I asked to send it to the company and gave the boss a specific address. This process is $ q. defer;
• The food cannot be delivered immediately, so this is an extended response request;
• The boss says it will be delivered as soon as possible. That is, the boss gave me a promise, promise;
• I can wait while working, indicating that this request is an asynchronous execution process.
• In this way, the establishment of the deferred asynchronous request is complete. Is a deferred.
• The food is sent to me for acceptance. This process is called deferred. resolve (data) to respond to events;
• If rice is sold out, the boss will tell me that I can't do it, that is, refuse my request, that is, deferred. reject (error );
• The boss can tell me at any time that he can't do it, as long as he hasn't sent the meal yet.
• It's almost downstairs. Please let me know. This means that the entire asynchronous callback process is completed by notifying deferred. Y (data.
• Many of us have to order meals the next day. So I can initiate $ q. all (req1, req2, req3 .);
  

Use

As defined in the service, deferred is created between the beginning of the request, and then return deferred. promise. deferred. resolve (data) is obtained when data is obtained ). We can also receive notifications or reject them.

var def = $q.defer();def.resolve(data);return def.promise;

Load as needed

First, let's take a look at the following points:

1. When to load:

The values in the resolve attribute are provided in both ngRoute and uiRoute, and are pre-set before the route is successful, and then injected into the controller. Generally, the route is performed only after the data is "in place" (in fact, I don't think it can be called a route because the route is a column operation, this includes setting the resolve attribute and so on ). Refer to my previous article.

2. How to register the loaded file:

Angular has a startup function called bootstrap. According to angular code design, you need to define all controllers before starting. It seems like there is a bag. You just need to plug anything into it before bootstrap. However, once bootstrap is done, he will no longer accept any controller you want.

To solve this problem, you can use the provider of the main module to actively register the controller. But since the provider cannot be used directly, we store it under the main module. The stored method can be used to register the page components asynchronously loaded.

Through the above, we know that the file needs to be asynchronously loaded

Implementation

// Controllerdefine (["app"], function (app) {app. config (["$ stateProvider", "$ urlRouterProvider", "$ controllerProvider", function ($ stateProvider, $ urlRouterProvider, $ controllerProvider) {// angular has a startup function, it is called bootstrap; // according to angular code design, you need to define all controllers before starting; // It seems like there is a bag, before bootstrap, You need to plug in whatever you want. // However, once bootstrap is done, it will no longer accept any controller you want to plug in. // solve this problem, only one method is to use the provider of the main module to actively register the controller; // However, due to prov The ider cannot be used directly, so we store it under the main module; // The stored method can be used to register the page components asynchronously loaded. App. registerController = $ controllerProvider. register; app. loadFile = function (js) {return function ($ rootScope, $ q) {// register a delayed object deferred var def = $ q through the $ q service. defer (), deps = []; angular. isArray (js )? (Deps = js): deps. push (js); require (deps, function () {$ rootScope. $ apply (function () {// def successful. resolve (); // def. reject () failed // def. Y () Update Status}) ;}); // Get A promise through the deferred delay object, and promise returns the return def of the completion result of the current task. promise ;};}$ urlRouterProvider. otherwise ('/Index'); $ stateProvider. state ("index", {url: "/index", template: "This is the homepage page"}); $ stateProvider. state ("computers", {url: "/computers", template: "This is the computer classification page {title}", controller: "ctrl. file ", resolve: {loadFile: app. loadFile ("file")}); $ stateProvider. state ("printers", {url: "/printers", template: "This is the printer page"}); $ stateProvider. state ("blabla", {url: "/blabla", template: "other"}) ;}]) ;});

// File. jsdefine (["app"], function (app) {app. registerController ("ctrl. file ", function ($ scope) {$ scope. title = "-- test ";});});

Source code: requireLearn_jb51.rar

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.