刚开始用angularjs做项目的时候,我用的是ng-router,觉得加载并不好。所以就用了ui-router,考虑到在app上网页加载速度太慢,所以我就想到了用懒加载,看下是否能提升性能,提高加载速度。 那使用懒加载,就要对项目进行进一步的拆分,我觉得这个拆分,可以提高我对angularjs的理解。

  

本文主要说明在用AngularJS开发web应用中如何实现lazyload,使用AngularJS需要在前端实现路由功能,本文就介绍利用此点实现前端资源的懒加载。

问题

目前大部分AngularJS的应用用requirJS组织模块,但是很多都没有使用lazyload功能,在app.js中启动时将全部依赖加载进来,在模块功能较少,前端资源少的情况下没问题。那么问题来了,依赖资源过多时怎么办?

  1. build时利用grunt-contrib-requirejs提取合并文件,减少http请求,但是存在问题:build后文件大;线上调试不方便,尤其在html2js后问题更明显。
  2. 开发中尽量在原有文件里进行新业务添加,不增加额外的http请求压力,但是存在问题:多人合作时需要经常处理代码冲突;单个文件(control,directive等)很大,看的是眼花缭乱,容易出问题。

解决问题

基本思路:在路由切换时加载所需要资源。
工具:Angular-ui-router,oclazyload,requirejs。

  • 配置oclazyload
    在引入oclazyload文件后配置主要参数项

        app.config(['$ocLazyLoadProvider',function($ocLazyLoadProvider){
    $ocLazyLoadProvider.config({
    loadedModules: ['monitorApp'],//主模块名,和ng.bootstrap(document, ['monitorApp'])相同
    jsLoader: requirejs, //使用requirejs去加载文件
    files: ['modules/summary','modules/appEngine','modules/alarm','modules/database'], //主模块需要的资源,这里主要子模块的声明文件
    debug: true
    });
    }]);
  • 配置ui-route
    利用angularjs-ui-route配置路由跳转的基本规则和需要懒加载文件

        app.config(['$stateProvider', '$urlRouterProvider',function($stateProvider, $urlRouterProvider){
    var lazyDeferred;
    /**
    * 路由切换时调用
    * @param param.file 懒加载文件数组
    * @param tpl 子模块view视图
    * @param module 子模块名
    */
    function resovleDep(param,tpl,module){
    var resolves = {
    loadMyCtrl: ['$ocLazyLoad', '$templateCache', '$q', function($ocLazyLoad,$templateCache,$q) {
    lazyDeferred = $q.defer();
    return $ocLazyLoad.load({
    name : module,
    cache: false,
    files: param.files
    }).then(function() {
    lazyDeferred.resolve($templateCache.get(tpl));
    });
    }]
    };
    return resolves;
    }; $urlRouterProvider.otherwise('/summary');
    //路由配置
    $stateProvider
    .state('module1', {
    url:'/module1',
    templateProvider: function() { return lazyDeferred.promise; },
    controller: 'module1Controller',
    resolve : resovleDep({files:[
    'controllers/module1Ctrl',
    'services/module1Service',
    'directives/module1Directive'
    ]}, 'views/module1.html', 'app.module1')
    })
    .state('module2', {
    abstract: true,
    url: '/module2',
    templateUrl: 'views/module2.html'
    })
    .state('module2.list', {
    url: '',
    templateProvider: function() { return lazyDeferred.promise; },
    controller: 'module2Controller',
    resolve : resovleDep({files:[
    'controllers/module2ListCtrl',
    'services/module2Service'
    ]}, 'views/list.html', 'app.module1')
    })
    .state('module1.detail', {
    url: '/:id',
    templateProvider: function() { return lazyDeferred.promise; },
    controller: 'detailController',
    resolve : resovleDep({files:[
    'controllers/detailCtrl',
    'services/detailService'
    ]}, 'views/detail.html', 'app.module2')
    });
    }]);

结束

ok,至此就可以在路由切换时方便的加载子模块和依赖资源,oclazyload和ui-router还有很多可挖掘的,大家可参考api满足需求。
ps:最初用angular-route+oclazyload做时出现:

multiple directives asking for isolated scope on
multiple asking for template

等问题,不好用,建议使用ui-route,强大的多。

文章来自:http://www.cnblogs.com/pengjv/p/4205962.html

Angular-ui-router + oclazyload + requirejs实现资源随route懒加载的更多相关文章

  1. Angular性能优化实践——巧用第三方组件和懒加载技术

    应该有很多人都抱怨过 Angular 应用的性能问题.其实,在搭建Angular项目时,通过使用打包.懒加载.变化检测策略和缓存技术,再辅助第三方组件,便可有效提升项目性能. 为了帮助开发者深入理解和 ...

  2. angular 引入ocLazyLoad实现js、controller懒加载

    项目之前是直接在index.html中引用了controller.js,其中包含了所有的controller.现引入ocLazyLoad实现按需加载,到指定页面再加载指定js.controller 1 ...

  3. requirejs:性能优化-及早并行加载

    为了提高页面的性能,通常情况下,我们希望资源尽可能地早地并行加载.这里有两个要点,首先是尽早,其次是并行. 通过data-main方式加载要尽可能地避免,因为它让requirejs.业务代码不必要地串 ...

  4. angular懒加载的一些坑

    写在前面 最近在工作中接触到angular模块化打包加载的一些内容,感觉中间踩了一些坑,在此标记一下. 项目背景: 项目主要用到angularJs作为前端框架,项目之前发布的时候会把所有的前端脚本打包 ...

  5. angular配置懒加载路由的思路

    前言 本人记性不好,对于别人很容易记住的事情,我愣是记不住,所以还是靠烂笔头来帮我长长记性. 参考文章:https://blog.csdn.net/xif3681/article/details/84 ...

  6. angular懒加载机制 刷新后无法回退解决方案

    今天在项目中遇到一个很奇怪的问题,使用oclazyload来懒加载angular的模块,刷新页面后,单击回退按钮无法返回上一个页面.估计是使用懒加载机制销毁了angular内部的state关联,导致无 ...

  7. vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式

    不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...

  8. 路由懒加载---Vue Router

    一.什么是懒加载? 懒加载也就是延迟加载或者按需加载,即在需要的时候进行加载. 二.为什么在Vue路由中使用懒加载? 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常 ...

  9. Angular中懒加载一个模块并动态创建显示该模块下声明的组件

    angular中支持可以通过路由来懒加载某些页面模块已达到减少首屏尺寸, 提高首屏加载速度的目的. 但是这种通过路由的方式有时候是无法满足需求的. 比如, 点击一个按钮后显示一行工具栏, 这个工具栏组 ...

随机推荐

  1. intellij idea 学习

      intellij idea是一个java的ide.由jetbrain开发.     intellij idea快捷键 快捷键 说明 备注 Ctrl+N 快速导航到类 类似于Resharper中的C ...

  2. ASP.NET网站单独

    解决ASP.NET网站单独发布指定页面问题 目录 前提 开始 aspx.cs文件放到单独的类库项目 一个可选择勾选页面的发布工具:LimusicAddin 前提 Asp.net 发布分为:动态编译和预 ...

  3. poj1001求幂

    这道题目是实质上就是高精度的乘法,虽然是带小数点的数多少次幂,但是开始我们需要将它变为整数进行求幂,然后再加上小数点,然后要考虑前导0,有效数位问题,做的时候要十分的小心 #include<io ...

  4. CentOS5、6 NFS的安装配置及mount方法

    一.环境介绍: 服务器:centos 192.168.1.225 客户端:centos 192.168.1.226 二.安装: NFS的安装配置:centos 5 : yum -y install n ...

  5. 对象池化技术 org.apache.commons.pool

    恰当地使用对象池化技术,可以有效地减少对象生成和初始化时的消耗,提高系统的运行效率.Jakarta Commons Pool组件提供了一整套用于实现对象池化的框架,以及若干种各具特色的对象池实现,可以 ...

  6. 向输出到console的文字加样式

    Chrome 控制台新玩法-向输出到console的文字加样式   有兴趣的同学可以文章最后的代码复制贴到控制台玩玩. Go for Code 在正常模式下,一般只能向console 控制台输出简单的 ...

  7. JavaEE:Servlet简介及ServletConfig、ServletContext

    Servlet简介 1.Servlet是sun公司提供的一门用于开发动态web资源的技术*静态web资源:固定数据文件*动态web资源:通过程序动态生成数据文件2.Servlet技术基于Request ...

  8. 用aspx文件作为模板

    用aspx文件作为模板 首先申明:标题中的如果是可以去掉的. 想写这篇文章很长时间了,一来是跟大家分享一下,别浪费时间在写代码生成器上面了,什么CodeSmith,XXCodeGenerator等等, ...

  9. Linux epoll总结

    Linux epoll总结 Linux  epoll epoll是Kernel 2.6后新加入的事件机制,在高并发条件下,远优于select.epoll最大的好处在于它不会随着监听fd数目的增长而降低 ...

  10. linux nVidia driver 304 319 . installation by hand

    It's so painful to install nVidia driver by hand on linux. If you remove it or you want to upgrade b ...