快捷導(dǎo)航

AngularJS延遲加載html template

更新時(shí)間：2016年07月27日 15:09:18 作者：boke88188

這篇文章主要介紹了AngularJS延遲加載html template 的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

當(dāng)使用AngularJs中的routes/views模式建立大型網(wǎng)站或者應(yīng)用的時(shí)候，把所有的自定義文件，如controllers和template等在初始化時(shí)全部加載進(jìn)來，不是一個(gè)好的辦法。最好的方式是，初始化時(shí)僅僅加載所需要的文件。這些文件可能會(huì)依賴一個(gè)連接或者多個(gè)文件，然而它們僅僅被特定的route所使用。當(dāng)我們切換route時(shí)，未被加載的文件將會(huì)按需加載。這不但能提高初始化頁面的速度，而且可以防止帶寬浪費(fèi)。

網(wǎng)上大部分文章都在講通過$routeProvider以及第三方服務(wù)對controller的延遲加載，譬如：按需加載 AngularJS 的 Controller 就講解的很詳細(xì)。但是，很少有關(guān)于用$stateProvider對controller、html/template的延遲加載的文章。盡管對查看了$stateProvider相關(guān)的很多源代碼，雖然解決了html/template的延遲加載問題，但是依然沒有解決controller的延遲加載問題，遺憾。由于時(shí)間問題，先將調(diào)查結(jié)果整理一下，等以后繼續(xù)調(diào)查。

關(guān)于html/template的延遲加載，需要將html文件與home page文件放置于不同目錄，否則會(huì)被自動(dòng)加載進(jìn)去。同樣，也不能用templateUrl進(jìn)行文件指定，否則也會(huì)被自動(dòng)加載進(jìn)去。 $stateProvider.state 的 template屬性支持字符串值和函數(shù)，所以可以定義一個(gè)函數(shù)進(jìn)行html文件的加載并緩存，防止重復(fù)加載文件。本想controller做同樣處理，可惜報(bào)找不到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的全部敘述，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: