ui-router中使用ocLazyLoad和resolve

1.AngularJS按需加载

AngularJS主要应用开发SPA(Single Page Application)项目,所以在小型项目中,services、filters和controllers都在index.html中加载。Google给的AngularJS官方的angular-seed和angular-phonecat都是这样。

对于复杂一点,大型的项目,如果所有的内容一开始就加载,对首页的性能影响比较大,即使静态javascript文件使用CDN,对性能还是有很大的影响。所有需要引入按需加载机制,而Angular1.x版本中,ocLazyLoad是一个不错的按钮加载解决方案。

2.ocLazyLoad的功能

ocLazyLoad: your solution for lazy loading with Angular 1.x 入门可以参照:ocLazyLoad快速入门,代码也非常简单:

  • 1.引入ocLazyLoad文件,可以使用npmbower来进行安装
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script src="libs/angular-ui-router/angular-ui-router.js"></script>
<script src="libs/ocLazyLoad/ocLazyLoad.js"></script>
  • 2.注入 oc.lazyLoad模块
var myApp = angular.module("MyApp", ["oc.lazyLoad"]);
  • 3. 在控制器中加载一个指定的模块
myApp.controller("MyCtrl", function($ocLazyLoad) {
  $ocLazyLoad.load('testModule.js');
});

在实际项目中service和controller文件都是通过ocLazyLoad加载,并且是放在resolve中加载。代码示例如下:

.state('detail',{
            url:"/detail/:bookId",
            templateUrl:"/templates/detail.html",
            controller:"DetailController",
            controllerAs:'ctrl',
            resolve:{
                load:['$ocLazyLoad',function($ocLazyLoad){
                    return $ocLazyLoad.load([
                        'services/dataService.js'
                        ]);
                }],
                currentBook:['$ocLazyLoad','$stateParams','$injector',function($ocLazyLoad,$stateParams,$injector){
                    var bookId=$stateParams.bookId;
                    return $ocLazyLoad.load('services/booksService.js').then(function(){
                        return $injector.get('booksService').getBookById(bookId);;
                    });

                }]
            }
        })

3.resolve属性

resolve在state配置参数中,是一个对象(key-value),每一个value都是一个可以依赖注入的函数,并且返回的是一个promise(当然也可以是值,resloved defer)。

4.resolve中加载service

resolve中加载services,但是请求都是异步的,返回的顺序不是按照顺序来的。在currentBook中需要调用booksService里面的getBookById()方法。这个时候虽然在load里面已经加载dataService.js,但是在currentBook中是无法使用getBookById()方法,所以在currentBook对象中,所以必须重新加载booksService.js。这个时候就需要$injector中的get()方法。$injector

5.图书列表和详细页demo

代码地址:https://github.com/liminjun/ocLazyLoad-resolve-demo

6.参考网址

Angular应用如何实现按需加载

ocLazyLoad

ui-router中resolve属性

综合示例

http://www.cnblogs.com/xing901022/p/4941166.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏vue学习

31、地址新增 — 定义数据结构与获取方式

(1)让我们进入addressEdit.vue页面填写一条地址,ok,现在假设你已经填写完毕。 (2)这个时候我们点击保存按钮且应该为这个按钮添加一个save...

1033
来自专栏程序员宝库

Nginx 反向代理解决前后端联调跨域问题

keywords: Nginx反向代理 前后端联调 跨域 ---- 1.什么是跨域 跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏...

6514
来自专栏WindCoder

百度wordpress结构化数据插件sitemap1.0,“一直提示校验中”解决办法

之前从joe处得知了百度wordpress结构化数据插件sitemap1.0,安装好后验证时一直提示校验中!!今天刚找到解决方法,留给大家吧。原来

821
来自专栏Java学习123

重新设置Tomcat7.0管理员用户名和密码

2895
来自专栏数据和云

无所不能:Oracle的数据库文件系统DBFS是什么鬼?

张乐奕 云和恩墨副总经理,Oracle ACE总监,ACOUG 联合创始人 在Oracle11g新增了一个特别的功能—DBFS,从字面翻译,DBFS=DATA...

45410
来自专栏杂烩

Linux下Nginx1.8安装 原

修改部署目录下conf子目录的nginx.conf文件(如nginx-1.5.13\conf\nginx.conf)内容,可调整相关配置。

1413
来自专栏Java学习123

Centos6.5设置Tomcat7管理员用户名和密码

3196
来自专栏JavaEE

springboot整合mybatis(mybatis基于配置方式)

2935
来自专栏技术记录

centOS7 mini配置linux服务器(二) 配置IP

1.登录root用户,输入指令  #ip addr 可以看到除lo外的属于你的网卡配置。 ? 2.输入 #cd /etc/sysconfig/network-...

2128
来自专栏前端之心

跨域问题详解

做过 web 开发的同学,应该都遇到过跨域的问题,当我们从一个域名向另一个域名发送 Ajax 请求的时候,打开浏览器控制台就会看到跨域错误,今天我们就来聊聊跨域...

3193

扫码关注云+社区