Angularjs Delay Loading HTML TEMPLATE_ANGULARJS

When using the Routes/views mode in Angularjs to build large Web sites or applications, it is not a good idea to load all custom files, such as controllers and template, when initialized. The best way to do this is to load only the required files when initializing. These files may depend on a connection or multiple files, but they are only used by specific route. When we switch route, the files that are not loaded are loaded on demand. This not only improves the speed of initializing the page, but also prevents bandwidth wastage.

Most of the online articles are talking about the delay loading of Controller via $routeprovider and third party services, such as: on-demand loading Angularjs Controller is explained in detail. However, there are very few articles about delaying loading of controller and html/template with $stateprovider. Although a lot of source code related to view $stateprovider, although solve the html/template delay loading problem, but still did not solve the controller delay loading problem, unfortunately. Due to the problem of time, the results of the survey will be sorted out, and then continue to investigate.

For html/template delay loading, you need to place the HTML file with the home page file in a different directory, or it will be loaded automatically. Similarly, can not use Templateurl to specify the file, otherwise it will be automatically loaded in. $stateProvider. State's Template property supports string values and functions, so you can define a function to load and cache HTML files to prevent duplicate files from loading. I would like to controller do the same treatment, but the report can not find Controller function definition, try many methods are invalid, and so on after the source code to see what is missing. Directly on the code, the logic is not complicated, not much verbose.

Log loaded HTML and controller to prevent duplicate network loading
$ionic. Files = {html: {}, controller: {}};
Declares deferred load HTML method
$ionic. gethtml = function gethtml (name) {
if (! $ionic. Files.html[name]) {
// Synchronize AJAX requests to load HTML and cache
$ionic. files.html[name] = jquery.ajax ({url: ' views/' + name +. HTML, async:false}). responsetext;
}
Return $ionic. Files.html[name];
}
Declaring deferred Load JS method function Resolvecontroller (name) {
//var fn = $.getscript (' assets/controller/' + name + '. js ');
Jquery.ajax ({"url": ' assets/controller/' + name + '. js ', ' dataType ': ' Script ', ' async ': false});
Console.log ("load" + name);
return name; 
$stateProvider. State (' login ', {
URL: "/login",
controller:resolvecontroller ("Logincontroller") 
, Template:function () {return $ionic. gethtml ("Login");}
);

The above is a small set to introduce the ANGULARJS delay loaded HTML template all the narration, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!