AngularJS延遲加載html template

2020-03-24 15:59:49

字體：大中小

來源：轉載

供稿：網友

當使用AngularJs中的routes/views模式建立大型網站或者應用的時候，把所有的自定義文件，如controllers和template等在初始化時全部加載進來，不是一個好的辦法。最好的方式是，初始化時僅僅加載所需要的文件。這些文件可能會依賴一個連接或者多個文件，然而它們僅僅被特定的route所使用。當我們切換route時，未被加載的文件將會按需加載。這不但能提高初始化頁面的速度，而且可以防止帶寬浪費。
網上大部分文章都在講通過$routeProvider以及第三方服務對controller的延遲加載，譬如：按需加載 AngularJS 的 Controller 就講解的很詳細。但是，很少有關于用$stateProvider對controller、html/template的延遲加載的文章。盡管對查看了$stateProvider相關的很多源代碼，雖然解決了html/template的延遲加載問題，但是依然沒有解決controller的延遲加載問題，遺憾。由于時間問題，先將調查結果整理一下，等以后繼續調查。
關于html/template的延遲加載，需要將html文件與home page文件放置于不同目錄，否則會被自動加載進去。同樣，也不能用templateUrl進行文件指定，否則也會被自動加載進去。 $stateProvider.state 的 template屬性支持字符串值和函數，所以可以定義一個函數進行html文件的加載并緩存，防止重復加載文件。本想controller做同樣處理，可惜報找不到controller函數定義，嘗試很多方法都無效，等以后研究源代碼看看漏掉了什么。直接上代碼，邏輯不復雜，就不多啰嗦了。
// 記錄加載過的html以及controller，防止重復網絡加載$ionic.files = {html: {}, controller: {}};// 聲明延遲加載html方法$ionic.getHtml = function getHtml(name) {if (!$ionic.files.html[name]) {// 同步ajax請求加載html，并緩存$ionic.files.html[name] = jQuery.ajax({url: 'views/' + name + ".html", async: false}).responseText;return $ionic.files.html[name];// 聲明延遲加載js方法 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"); }});以上所述是小編給大家介紹的AngularJS延遲加載html template的全部敘述，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對phpstudy網站的支持！更多編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：HTML5實驗：JavaScript模擬流體效果

下一篇：javascript如何操作HTML下拉列表標簽