AngularJS延迟加载html template


Posted in Javascript onJuly 27, 2016

当使用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函数定义,尝试很多方法都无效,等以后研究源代码看看漏掉了什么。直接上代码,逻辑不复杂,就不多??铝恕?br />

// 记录加载过的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的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript中的History历史对象
Jan 16 Javascript
基于jquery的一个拖拽到指定区域内的效果
Sep 21 Javascript
JS获得选取checkbox整行数据的方法
Jan 28 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
May 05 Javascript
jQuery ajaxForm()的应用
Oct 14 Javascript
Vue2.0组件间数据传递示例
Mar 07 Javascript
微信小程序中的swiper组件详解
Apr 14 Javascript
JavaScript之生成器_动力节点Java学院整理
Jun 30 Javascript
详解JavaScript的BUG和错误
May 07 Javascript
Webpack的dll功能使用
Jun 28 Javascript
浅谈在react中如何实现扫码枪输入
Jul 04 Javascript
js实现盒子拖拽动画效果
Aug 09 Javascript
AngularJS入门教程之控制器详解
Jul 27 #Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
Jul 27 #Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 #Javascript
AngularJS入门之动画
Jul 27 #Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
Jul 27 #Javascript
获取JS中网页各种高宽与位置的方法总结
Jul 27 #Javascript
AngularJS 模型详细介绍及实例代码
Jul 27 #Javascript
You might like
怎样在UNIX系统下安装MySQL
2006/10/09 PHP
PHP+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
PHP 强制性文件下载功能的函数代码(任意文件格式)
2010/05/26 PHP
详解php的魔术方法__get()和__set()使用介绍
2012/09/19 PHP
php图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
php防止sql注入的方法详解
2017/02/20 PHP
用PHP去掉文件头的Unicode签名(BOM)方法
2017/06/22 PHP
tp5框架使用composer实现日志记录功能示例
2019/01/10 PHP
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
扩展jQuery 键盘事件的几个基本方法
2009/10/30 Javascript
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
查找Oracle高消耗语句的方法
2014/03/22 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
2014/10/17 Javascript
JS获取各种宽度、高度的简单介绍
2014/12/19 Javascript
简介JavaScript中fixed()方法的使用
2015/06/08 Javascript
简介JavaScript中Math.LOG10E属性的使用
2015/06/14 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
2015/12/13 Javascript
js实现可旋转的立方体模型
2016/10/16 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
2017/01/16 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
javascript计算对象长度的方法
2017/10/25 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
2019/09/03 jQuery
关于Vue中axios的封装实例详解
2019/10/20 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
Python Sqlite3以字典形式返回查询结果的实现方法
2016/10/03 Python
Python入门之三角函数atan2()函数详解
2017/11/08 Python
NetworkX之Prim算法(实例讲解)
2017/12/22 Python
利用Pyhton中的requests包进行网页访问测试的方法
2018/12/26 Python
简单了解python的内存管理机制
2019/07/08 Python
tensorflow 大于某个值为1,小于为0的实例
2020/06/30 Python
PHP开发的一般流程
2013/08/13 面试题
客服服务心得体会
2013/12/30 职场文书
务工证明怎么写
2015/06/18 职场文书
SpringBoot整合Redis入门之缓存数据的方法
2021/11/17 Redis
Python列表的索引与切片
2022/04/07 Python