AngularJS延遲加載html template
當使用AngularJs中的routes/views模式建立大型網(wǎng)站或者應(yīng)用的時候,把所有的自定義文件,如controllers和template等在初始化時全部加載進來,不是一個好的辦法。最好的方式是,初始化時僅僅加載所需要的文件。這些文件可能會依賴一個連接或者多個文件,然而它們僅僅被特定的route所使用。當我們切換route時,未被加載的文件將會按需加載。這不但能提高初始化頁面的速度,而且可以防止帶寬浪費。
網(wǎng)上大部分文章都在講通過$routeProvider以及第三方服務(wù)對controller的延遲加載,譬如:按需加載 AngularJS 的 Controller 就講解的很詳細。但是,很少有關(guān)于用$stateProvider對controller、html/template的延遲加載的文章。盡管對查看了$stateProvider相關(guān)的很多源代碼,雖然解決了html/template的延遲加載問題,但是依然沒有解決controller的延遲加載問題, 遺憾。由于時間問題,先將調(diào)查結(jié)果整理一下,等以后繼續(xù)調(diào)查。
關(guān)于html/template的延遲加載,需要將html文件與home page文件放置于不同目錄,否則會被自動加載進去。同樣,也不能用templateUrl進行文件指定,否則也會被自動加載進去。 $stateProvider.state 的 template屬性支持字符串值和函數(shù),所以可以定義一個函數(shù)進行html文件的加載并緩存,防止重復(fù)加載文件。本想controller做同樣處理,可惜報找不到controller函數(shù)定義,嘗試很多方法都無效,等以后研究源代碼看看漏掉了什么。直接上代碼,邏輯不復(fù)雜,就不多啰嗦了。
// 記錄加載過的html以及controller,防止重復(fù)網(wǎng)絡(luò)加載 $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的全部敘述,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
Angular中實現(xiàn)樹形結(jié)構(gòu)視圖實例代碼
近兩年當中使用Angular開發(fā)過很多項目,其中也涉及到一些樹形結(jié)構(gòu)視圖的顯示,最近的在項目中封裝了大量的組件,一些組件也有樹形結(jié)構(gòu)的展示,所以寫出來總結(jié)一下。2017-05-05angular基于路由控制ui-router實現(xiàn)系統(tǒng)權(quán)限控制
這篇文章主要介紹了angular基于路由控制ui-router實現(xiàn)系統(tǒng)權(quán)限控制的相關(guān)資料,需要的朋友可以參考下2016-09-09AngularJS ng-bind 指令簡單實現(xiàn)
本文主要介紹AngularJS ng-bind 指令,在這里對ng-bind 指令做了詳細資料整理并講解,提供了實例代碼以便大家參考,有需要的小伙伴可以參考下2016-07-07AngularJS ng-repeat數(shù)組有重復(fù)值的解決方法
不知道大家是否遇到過這個問題,在當Angular.JS ng-repeat數(shù)組中有重復(fù)項時,系統(tǒng)就會拋出異常,這是該怎么做?本文通過示例代碼介紹了詳細的解決方法,有需要的朋友們可以參考借鑒,下面來一起看看吧。2016-10-10Angular.JS中指令ng-if的注意事項小結(jié)
這篇文章主要給大家分享了關(guān)于Angular.JS中指令ng-if的一點注意事項,分享出來供大家參考學習,文中介紹的還是相對來說比較詳細,對大家具有一定的參考借鑒價值,需要的朋友們下面來一起看看吧。2017-06-06AngularJS使用ng-options指令實現(xiàn)下拉框
這篇文章主要介紹了AngularJS使用ng-options指令實現(xiàn)下拉框效果,ng-option指令使用也很簡單,下文具體給大家說明,對angularjs 下拉框知識感興趣的朋友一起看下吧2016-08-08