Before this, we need to understand a few things:
$q
Introduction:
$q: The problem of asynchronous programming is mainly solved, which refers to the interaction of a promised behavior with the action result of asynchronous execution represented by the object, which may or may not be completed at any time.
We understand the $q service through a small story.
- I bought it at noon, called and asked for a portion of fried rice, and asked to deliver it to the company and gave the boss a specific address. This process is $;
- The meal cannot be delivered immediately, so this is a request to delay response;
- The boss said he would deliver it as soon as possible. That is, the boss gave me a promise;
- I can wait while working, indicating that this request is an asynchronous execution process.
- In this way, this delayed asynchronous request is established. It's just a deferred.
- The meal is delivered to me for acceptance, and this process is called (data) response event;
- If the rice is sold out, the boss will tell me that I can’t make it, that is, I will reject my request, which is (error);
- The boss can tell me at any time that he can't make it, as long as he can before he delivers the food.
- It's almost downstairs and notified me to pick it up. This is notification (data) so that the entire asynchronous callback process is completed.
- Many of us had to order food the next day. So I can initiate $(req1,req2,req3.);
use
We define it in the service, establish deferred between the start of the request, and then return . When data is retrieved (data). Similarly, we can receive notifications or rejections in the middle.
var def = $(); (data); return ;
Load on demand
First of all, we need to understand a few points:
1. When will it be loaded:
The values in the resolve attribute are provided in both ngRoute and uiRoute. The values in the resolve attribute will be preset before the routing is successful and then injected into the controller. In layman's terms, it is only after the data is "in place" before routing (actually, I don't think it can be called a routing, because the routing is a column operation, which includes setting the resolve attribute, etc.). You can refer to my previous article.
2. How to register the loaded file:
angular has a startup function called bootstrap. According to the code design of angular, you need to define all controllers before starting. It's like there's a bag that you can stuff in before bootstrap. But once bootstrap is done, he will no longer accept any controller you stuff into.
There is only one way to solve this problem, which is to use the main module provider to actively register the controller. However, since the provider cannot be used directly, we store it under the main module. Through the saved method, it can be used to register the page components loaded asynchronously.
Through the above we know that the file needs to be loaded asynchronously
accomplish
// controller
define(["app"], function(app) {
(["$stateProvider", "$urlRouterProvider", "$controllerProvider",
function($stateProvider, $urlRouterProvider, $controllerProvider) {
// Angular has a startup function called bootstrap; // According to the angular code design, you need to define all controllers before starting; // It's like there's a bag that you can stuff in before bootstrap; // But once bootstrap is done, he will no longer accept any controllers you stuff into; // There is only one way to solve this problem, which is to use the main module provider to actively register the controller; // However, since the provider cannot be used directly, we store it under the main module; // Through the saved method, it can be used to register the page components loaded asynchronously. = $;
= function(js) {
return function($rootScope, $q) {
//Register a delay object deferred through $q service var def = $(),
deps = [];
(js) ? (deps = js) : (js);
require(deps, function() {
$rootScope.$apply(function() {
// success ();
// () Unsuccessful // () Update status });
});
//By deferred object, you can get a promise, and the promise will return the completion result of the current task return ;
};
}
$('/index');
$("index", {
url: "/index",
template: "This is the homepage"
});
$("computers", {
url: "/computers",
template: "This is the computer classification page{{title}}",
controller: "",
resolve: {
loadFile: ("file")
}
});
$("printers", {
url: "/printers",
template: "This is the printer page"
});
$("blabla", {
url: "/blabla",
template: "other"
});
}
]);
});
//
define(["app"], function(app) {
("", function($scope) {
$ = "--test ";
});
});
Source code:requireLearn_jb51.rar
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.