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延迟加载html template
-
AngularJS中的Directive实现延迟加载
-
Webpack 实现 AngularJS 的延迟加载
-
AngularJS使用ocLazyLoad实现js延迟加载
-
AngularJS中的Directive实现延迟加载
-
Webpack 实现 AngularJS 的延迟加载
-
JQuery图片延迟加载插件,动态获取图片长宽尺寸_html/css_WEB-ITnose
-
Python爬虫如何处理html中的延迟加载部分(delayload_url)_html/css_WEB-ITnose
-
Python爬虫如何处理html中的延迟加载部分(delayload_url)_html/css_WEB-ITnose
-
AngularJS使用ocLazyLoad实现js延迟加载