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 相关文章推荐
文本框只能选择数据到文本框禁止手动输入
Nov 22 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
Oct 16 Javascript
javascript实现网页背景烟花效果的方法
Aug 06 Javascript
Jquery 分页插件之Jquery Pagination
Aug 25 Javascript
jquery遍历json对象集合详解
May 18 Javascript
javascript中获取class的简单实现
Jul 12 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
Nov 02 Javascript
浅谈js算法和流程控制
Dec 29 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
Feb 09 Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 Javascript
Vue.js实现可编辑的表格
Dec 11 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
网络资源
2006/10/09 PHP
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
php中in_array函数用法分析
2014/11/15 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
浅析Yii2 GridView实现下拉搜索教程
2016/04/22 PHP
php使用get_class_methods()函数获取分类的方法
2016/07/20 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
js 鼠标移动显示图片的简单实例
2013/12/25 Javascript
html5+javascript制作简易画板附图
2014/04/25 Javascript
jQuery基础语法实例入门
2014/12/23 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
js实现纯前端的图片预览
2016/04/27 Javascript
JS 调试中常见的报错问题解决方法
2017/05/20 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
2018/07/12 Javascript
vue自定义表单生成器form-create使用详解
2019/07/19 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
JS实现拖拽元素时与另一元素碰撞检测
2020/08/27 Javascript
Python中线程编程之threading模块的使用详解
2015/06/23 Python
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
pandas string转dataframe的方法
2018/04/11 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
python反扒机制的5种解决方法
2021/02/06 Python
CSS3属性使网站设计增强同时不消弱可用性
2009/08/29 HTML / CSS
全球领先的鞋类零售商:The Walking Company
2016/07/21 全球购物
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
家长给幼儿园的表扬信
2014/01/09 职场文书
正科级干部考察材料
2014/05/29 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
2014幼儿园教师个人工作总结
2014/11/08 职场文书
《赵州桥》教学反思
2016/02/17 职场文书
MySQL为id选择合适的数据类型
2021/06/07 MySQL
JS实现简单的九宫格抽奖
2022/06/28 Javascript