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 style 中visibility和display之间的区别
Jan 22 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
Jan 15 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
Oct 17 Javascript
JS实现5秒钟自动封锁div层的方法
Feb 20 Javascript
JavaScript常用脚本汇总(三)
Mar 04 Javascript
轻松掌握JavaScript代理模式
Aug 26 Javascript
js实现右键菜单功能
Nov 28 Javascript
Vue实现双向数据绑定
May 03 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
Aug 25 Javascript
vue引入jq插件的实例讲解
Sep 12 Javascript
Vue开发实现吸顶效果的示例代码
Aug 21 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
Apr 02 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
PHP保存带BOM文件的方法
2015/02/12 PHP
PHP SESSION机制的理解与实例
2019/03/22 PHP
使两个iframe的高度与内容自适应,且相等
2006/11/20 Javascript
window.onresize 多次触发的解决方法
2013/11/08 Javascript
浅析jquery的js图表组件highcharts
2014/03/06 Javascript
JavaScript制作的可折叠弹出式菜单示例
2014/04/04 Javascript
javascript实现微信分享
2014/12/23 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
Prototype框架详解
2015/11/25 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
vue中七牛插件使用的实例代码
2017/07/28 Javascript
JavaScript 中的 this 简单规则
2017/09/19 Javascript
vue axios同步请求解决方案
2017/09/29 Javascript
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
node.js学习笔记之koa框架和简单爬虫练习
2018/12/13 Javascript
详解关于element级联选择器数据回显问题
2019/02/20 Javascript
在Python程序中进行文件读取和写入操作的教程
2015/04/28 Python
python引入导入自定义模块和外部文件的实例
2017/07/24 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
Python基于Twilio及腾讯云实现国际国内短信接口
2020/06/18 Python
css3 transform及原生js实现鼠标拖动3D立方体旋转
2016/06/20 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
德国药房apodiscounter中文官网:德国排名前三的网上药店
2019/06/03 全球购物
Auguste The Label官网:澳大利亚一家精品女装时尚品牌
2020/06/14 全球购物
新闻系毕业生推荐信
2013/11/16 职场文书
初中同学会活动方案
2014/08/22 职场文书
英文演讲稿开场白
2014/08/25 职场文书
化工实习心得体会
2014/09/09 职场文书
工作失误检讨书(3篇)
2014/10/11 职场文书
车辆年检委托书范本
2014/10/14 职场文书
企业宣传语大全
2015/07/13 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
Python 制作自动化翻译工具
2021/04/25 Python
windows11选中自动复制怎么开启? Win11自动复制所选内容的方法
2022/07/23 数码科技