AngularJS消極式載入html template_AngularJS

當使用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的全部敘述，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！