AngularJS延迟加载html template
当使用AngularJs中的routes/views模式建立大型网站或者应用的时候，把所有的自定义文件，如controllers和template等在初始化时全部加载进来，不是一个好的办法。最好的方式是，初始化时仅仅加载所需要的文件。这些文件可能会依赖一个连接或者多个文件，然而它们仅仅被特定的route所使用。当我们切换route时，未被加载的文件将会按需加载。这不但能提高初始化页面的速度，而且可以防止带宽浪费。
网上大部分文章都在讲通过$routeProvider以及第三方服务对controller的延迟加载，譬如：按需加载AngularJS的Controller就讲解的很详细。但是，很少有关于用$stateProvider对controller、html/template的延迟加载的文章。尽管对查看了$stateProvider相关的很多源代码，虽然解决了html/template的延迟加载问题，但是依然没有解决controller的延迟加载问题，遗憾。由于时间问题，先将调查结果整理一下，等以后继续调查。
关于html/template的延迟加载，需要将html文件与homepage文件放置于不同目录，否则会被自动加载进去。同样，也不能用templateUrl进行文件指定，否则也会被自动加载进去。$stateProvider.state的template属性支持字符串值和函数，所以可以定义一个函数进行html文件的加载并缓存，防止重复加载文件。本想controller做同样处理，可惜报找不到controller函数定义，尝试很多方法都无效，等以后研究源代码看看漏掉了什么。直接上代码，逻辑不复杂，就不多啰嗦了。
//记录加载过的html以及controller，防止重复网络加载
$ionic.files={html:{},controller:{}};
//声明延迟加载html方法
$ionic.getHtml=functiongetHtml(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方法functionresolveController(name){
//varfn=$.getScript('assets/controller/'+name+'.js');
jQuery.ajax({"url":'assets/controller/'+name+'.js',"dataType":"script","async":false});
//console.log("load"+name);
returnname;
}
$stateProvider.state('login',{
url:"/login",
controller:resolveController("loginController"),
template:function(){return$ionic.getHtml("login");}
});
以上所述是小编给大家介绍的AngularJS延迟加载htmltemplate的全部叙述，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！