angularJS懒加载依赖模块

//设置
.config [
      ‘$ocLazyLoadProvider‘
      ($ocLazyLoadProvider) ->
        # We configure ocLazyLoad to use the lib script.js as the async loader
        $ocLazyLoadProvider.config
          debug: true
          events: true
          modules: [
            {
              name: ‘ui.grid‘
              files: [
                ‘//cdn.bootcss.com/angular-ui-grid/3.1.1/ui-grid.js‘
              ]
            }
          ]
        return
    ]
//路由
.state ‘admin.user.123‘, {
      url: ‘123/‘
      templateUrl: ‘123.html‘
      controller: ‘123Ctrl‘
      resolve: {
        deps: [‘$ocLazyLoad‘,
          ($ocLazyLoad)->
            return $ocLazyLoad.load(‘ui.grid‘).then(
              ()->
                return $ocLazyLoad.load(‘123Ctrl.js‘)
            )
        ]
      }
      data: {title: ‘123‘}
    }
时间: 2024-11-10 15:56:36

angularJS懒加载依赖模块的相关文章

ionic 懒加载页面模块合并

ionic3 懒加载 ionic3 默认使用了懒加载技术,相较以前预加载的版本,ionic3构建的app在首页加载时间上有较大的优化,但是,ionic3默认每个页面都会对应一个模块,对于页面较多,但是每个模块都很小的应用可能并不怎么合理.于是,尝试将几个小模块合并为几个大的模块. 1. 一个模块对应一个页面: 默认状态下每个页面都会对应一个模块,如果项目之中的页面比较多那么最后构建的项目中的将会看到有很多的 js . 原setting.module.ts 1 import { NgModule

深入懒加载

[javascript] view plain copy 懒加载(LazyLoad)一直是前端的优化方案之一.它的核心思想是:当用户想看页面某个区域时,再加载该区域的数据.这在一定程度上减轻了服务器端的压力,也加快了页面的呈现速度. 懒加载多用于图片,因为它属于流量的大头.最典型的懒加载实现方案是先将需要懒加载的图片的src隐藏掉,这样图片就不会下载,然后在图片需要呈现给用户时再加上src属性. 公司内部库的懒加载正是采用这种方案.它会遍历页面中所有的图片,将其src缓存起来后删除图片的src属

进一步优化SPA的首屏打开速度(模块化与懒加载) by 嗡

前言 单页应用的好处在于一次载入所有页面资源,利用本地计算能力渲染页面,提高页面切换速度与用户体验.但缺点在于所有页面资源将被一次性下载完,此时封装出来的静态资源包体积较大,使得第一次打开SPA页面时候需要的载入时间较长. 在上一篇文章Angular2 单页应用一些优化总结 中提到的利用压缩.混淆.开启gzip传输后,我们成功将3.5兆的资源包压缩到350k.但是如果SPA应用的页面数进一步增加,100个甚至1000个页面的时候,还是无法避免巨大的首页资源包加载的问题.所以350k的资源包是否还

系统管理模块_部门管理_设计(映射)本模块中的所有实体并总结设计实体的技巧_懒加载异常问题_树状结构

系统管理模块_部门管理_设计本模块中的所有实体并总结设计实体的技巧 设计实体流程 1,有几个实体? 一般是一组增删改查对应一个实体. 2,实体之间有什么关系? 一般是页面引用了其他的实体时,就表示与这个实体有关联关系. 3,每个实体中都有什么属性? 1,主键.推荐使用代理主键 2,关联关系属性.在类图中,关联关系是一条线,有两端,每一端对应一个表达此关联关系的属性.有几个端指向本类,本类中就有几个关联关系属性. 3,一般属性.分析所有有关的页面,找出表单中要填写的或是在显示页面中要显示的信息等.

Angular-ui-router + oclazyload + requirejs实现资源随route懒加载

本文主要说明在用AngularJS开发web应用中如何实现lazyload,使用AngularJS需要在前端实现路由功能,本文就介绍利用此点实现前端资源的懒加载. 问题 目前大部分AngularJS的应用用requirJS组织模块,但是很多都没有使用lazyload功能,在app.js中启动时将全部依赖加载进来,在模块功能较少,前端资源少的情况下没问题.那么问题来了,依赖资源过多时怎么办? build时利用grunt-contrib-requirejs提取合并文件,减少http请求,但是存在问题

angular懒加载的一些坑

写在前面 最近在工作中接触到angular模块化打包加载的一些内容,感觉中间踩了一些坑,在此标记一下. 项目背景: 项目主要用到angularJs作为前端框架,项目之前发布的时候会把所有的前端脚本打包压缩到一个文件中,在页面初次访问的时候加载,造成页面初始载入缓慢,在此基础上,提出按需加载,即只有当用户访问某个模块的时候,该模块的脚本才会加载. 工具类: 项目使用grunt打包根据AMD规范,使用grunt-contrib-requirejs来压缩合并模块,同时用ocLazyLoad来完成ang

vue 组件按需引用,vue-router懒加载,vue打包优化,加载动画

当打包构建应用时,Javascript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 结合 Vue 的 异步组件 和 Webpack 的 code splitting feature, 轻松实现路由组件的懒加载. 我们要做的就是把路由对应的组件定义成异步组件 const Foo = resolve => { // require.ensure 是 Webpack 的特殊语法,用来设置 code-split

每天看一片代码系列(四):layzr.js,处理图片懒加载的库

所谓图片的懒加载,即只有当图片处于或者接近于当前视窗时才开始加载图片.该库的使用方法非常简单: var layzr = new Layzr({ attr: 'data-layzr', // attr和retinaAttr必须至少有一个,用于指定对应的图片 retinaAttr: 'data-layzr-retina', // 一般对应的图像比attr要高清 threshold: 0, // 距离视窗的距离为多少时开始加载 callback: null // 回调函数 }); 代码解析 首先是包装

Angular4.0踩坑之路:探索子路由和懒加载

参考文章: Angular4路由快速入门  http://www.jianshu.com/p/e72c79c6968e Angular2文档学习的知识点摘要--Angular模块(NgModule)http://lib.csdn.net/article/angularjs/59697?knId=641 随着需求的增加,项目的功能也渐渐复杂起来.这个时候,需要将项目模块化,将组件.指令和管道打包成内聚的功能块,正好可以探索一下Angular4中的子路由以及模块的懒加载. 之前在开发的时候,已经在根