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文件与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的全部叙述，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
AngularJS与BootStrap模仿百度分页的示例代码
分页在很多时候都能用到，这篇文章主要介绍了AngularJS与BootStrap模仿百度分页的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
本文介绍AngularJS ng-click 指令,这里整理了ng-click指令的基础知识并且附有简单示例代码和实现效果图,有需要的小伙伴参考下2016-08-08
在涉及GUI程序开发的过程中，常常有模态对话框以及非模态对话框的概念。接下来通过本文给大家介绍AngularJS 模态对话框 ，感兴趣的朋友一起学习吧2016-04-04
深入理解AngularJS中的ng-bind-html指令和$sce服务
这篇文章给大家详细介绍了AngularJS中的ng-bind-html指令和$sce服务，对大家学习AngularJS具有一定参考借鉴价值，有需要都可以参考学习。2016-09-09
Angular2管道Pipe及自定义管道格式数据用法实例分析
这篇文章主要介绍了Angular2管道Pipe及自定义管道格式数据用法,结合实例形式详细分析了Angular2管道与纯管道相关概念、语法及使用技巧,需要的朋友可以参考下2017-11-11
本文主要介绍AngularJS ng-bind 指令,在这里对ng-bind 指令做了详细资料整理并讲解，提供了实例代码以便大家参考，有需要的小伙伴可以参考下2016-07-07
组件是我们在学习angular中必不可少的一部分，下面这篇文章主要给大家介绍了关于Angular 4如何根据组件名称动态创建出组件的相关资料，文中通过图文与示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。2017-11-11
利用require.js与angular搭建spa应用的方法实例
这篇文章主要给大家介绍了关于利用require.js与angular搭建spa应用的方法实例，文中通过示例代码给大家介绍的非常详细，对大家的理解和学习具有一定的参考学习价值，需要的朋友们下面跟着小编来一起看看吧。2017-07-07
这篇文章主要介绍了Angular PWA使用的Demo示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
用WebStorm进行Angularjs 2开发(环境篇：Windows 10，Angular-cli方式)
这篇文章主要介绍了用WebStorm进行Angularjs 2开发(环境篇：Windows 10，Angular-cli方式),小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
最新评论