这篇文章主要介绍了 AngularJS 延迟加载 html template 的相关资料, 非常不错,具有参考借鉴价值,需要的朋友可以参考下
AngularJS 诞生于 Google 是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。
当使用 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 的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0306/264055.html