When using routes/views mode in AngularJs to build a large website or application, loading all custom files such as controllers and templates during initialization is not a good idea. The best way is to load only the required files when initializing. These files may depend on one connection or multiple files, however they are only used by a specific route. When we switch routes, the unloaded files will be loaded as needed. This not only improves the speed of initializing the page, but also prevents bandwidth waste.
Most of the articles on the Internet talk about the lazy loading of controllers through $routeProvider and third-party services. For example, loading AngularJS controllers on demand explains in detail. However, there are few articles about lazy loading of controllers, html/templates with $stateProvider. Although I have viewed a lot of source code related to $stateProvider and solved the lazy loading problem of html/template, it still did not solve the lazy loading problem of controller, which is a pity. Due to time issues, the investigation results will be sorted out first and the investigation will continue in the future.
Regarding the lazy loading of html/template, you need to place the html file and the home page file in different directories, otherwise it will be loaded automatically. Similarly, you cannot use templateUrl to specify the file, otherwise it will be automatically loaded. The template property of $stateProvider.state supports string values and functions, so a function can be defined to load and cache html files to prevent duplicate loading of files. I wanted the controller to do the same thing, but unfortunately I couldn't find the controller function definition. I tried many methods but failed. I will study the source code in the future to see what was missing. I will directly upload the code, the logic is not complicated, so I won’t talk much.
// Record the loaded html and controller to prevent duplicate network loading $ionic.files = {html: {}, controller: {}};// Declare the delayed loading html method $ionic.getHtml = function getHtml(name) {if (!$ionic.files.html[name]) {// Synchronize ajax request to load html and cache $ionic.files.html[name] = jQuery.ajax({url: 'views/' + name + ".html", async: false}).responseText;}return $ionic.files.html[name];}// Declare the delayed loading 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 the full description of AngularJS delay loading html template introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!