精华内容
下载资源
问答
  • oclazyload

    千次阅读 2016-08-26 18:06:02
    "node_modules/oclazyload/dist/ocLazyLoad.js" > script > 接下来关键了: 对于模块A angular.module( 'student' , [ 'oc.lazyLoad' , 'ui.router' ]) .config( function ( $ocLazyLoadProvider )...

    Angular模块化真是一个任重道远啊
    利用注入可以实现模块套模块

    app.js

    angular.module('myApp', ['A', 'B', 'C', ...])

    A.js

    angular.module('A', ['A.1', 'A.2', 'A.3', ...])

    B.js

    angular.module('B', ['B.1', 'B.2', 'B.3', ...])

    再加上ui-router,嵌套视图,如虎添翼
    然而,还是有一个问题,还是需要在index.html把全部js加载,当模块多了,也很麻烦,要是能在模块中加载子模块的js就好了

    oclazyload

    官方文档 https://oclazyload.readme.io/docs
    安装 npm install oclazyload
    引入 index.html

      <script src="node_modules/oclazyload/dist/ocLazyLoad.js"></script>

    接下来关键了:

    对于模块A

    angular.module('student', [
      'oc.lazyLoad',
      'ui.router'])
      .config(function ($ocLazyLoadProvider) {
        $ocLazyLoadProvider.config({
          modules: [{
            debug: true,
            name: 'A.1',
            files: ['app/A/1/1.js']
          }, {
            debug: true,
            name: 'A.2',
            files: ['app/A/2/2.js']
          }]
        })
      })
      .config(function ($stateProvider) {
        $stateProvider
          .state('A', {
            url: '/A',
            templateUrl: 'app/A/A.html',
            controller: 'ACtrl',
            resolve: {
              lazy: function ($ocLazyLoad) {
                return $ocLazyLoad.load([
                  'A.1',
                  'A.2']);
              }
            }
          })
        })

    即可实现lazyload

    展开全文
  • 主要介绍了AngularJS使用ocLazyLoad实现js延迟加载的相关资料,需要的朋友可以参考下
  • 本篇文章主要介绍了angularjs ocLazyLoad分步加载js文件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 本篇文章主要介绍了AngularJS中的按需加载ocLazyLoad,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
  • oclazyload的尝试

    2019-09-24 12:21:27
    https://oclazyload.readme.io/docs http://www.cnblogs.com/BestMePeng/p/AngularJS_ocLazyLoad.html 模块依赖 var appModule = angular.module("app", ["oc.lazyLoad"]); 配置 appModule.config(['$...

    https://oclazyload.readme.io/docs
    http://www.cnblogs.com/BestMePeng/p/AngularJS_ocLazyLoad.html

    模块依赖

    var appModule = angular.module("app", ["oc.lazyLoad"]);

    配置

    appModule.config(['$ocLazyLoadProvider', function ($ocLazyLoadProvider) {
        $ocLazyLoadProvider.config({
            insertBefore: 'ng_load_plugins_before', // load the css files before a LINK element with this ID.
            debug: false,
            events: true,
            modules: []
        });
    }]);
    
    
       <link id="ng_load_plugins_before" />  

    在路由中加载

            $urlRouterProvider.otherwise("/tenant/dashboard"); //Entrance page for a tenant
            $stateProvider.state('tenant.dashboard', {
                url: '/dashboard',
                templateUrl: '~/Mt/tenant/views/dashboard/index.cshtml',
                resolve: {
                    deps: ["$ocLazyLoad", function ($ocLazyLoad) {
                        return $ocLazyLoad.load(
                            [
                                "/libs/jvectormap/jquery-jvectormap-1.2.2.css",
                                "/libs/jvectormap/jquery-jvectormap-1.2.2.min.js",
                                "/libs/jvectormap/jquery-jvectormap-world-mill-en.js"
                            ]);
                    }]
                }
            });

    526823-20170504125827117-468037170.png

    1. 加载到的js,css没有添加到配置中定义的link 前面,而是在head的底部(可能配置没配对吧)
    2. <script/>自动添加了 async。需要通过promise解决加载的次序问题

    直接在controller中加载

    (function () {
        appModule.controller('myCtr', [
            '$scope', '$ocLazyLoad',
            function ($scope,  $ocLazyLoad) {
                $ocLazyLoad.load([
                    "/libs/jvectormap/jquery-jvectormap-1.2.2.css",
                    "/libs/jvectormap/jquery-jvectormap-1.2.2.min.js"
                ]).then(function () {
                    $ocLazyLoad.load("/libs/jvectormap/jquery-jvectormap-world-mill-en.js")
                        .then(function () {
                            $('#world-map-markers').vectorMap({map: 'world_mill_en'});
                        });
                });
            }
        ]);
    }

    转载于:https://www.cnblogs.com/wj033/p/6806501.html

    展开全文
  • 20 ocLazyLoad使用

    2018-04-29 13:58:04
    ocLazyLoad使用 参考自http://dreamapple.leanapp.cn/gitbook/oclazyload-doc/quick-start/quick-start.html 安装 npm install oclazyload 添加oc.lazyLoad模块 将这个模块添加到你的应用中 var myApp = ...

    ocLazyLoad使用

    参考自http://dreamapple.leanapp.cn/gitbook/oclazyload-doc/quick-start/quick-start.html

    安装

    npm install oclazyload

    添加oc.lazyLoad模块

    将这个模块添加到你的应用中

    var myApp = angular.module("MyApp", ["oc.lazyLoad"]);

    延时加载

    加载模块的基本示例

    myApp.controller("MyCtrl", function($ocLazyLoad) {
    $ocLazyLoad.load('testModule.js');
    });

    通过使用$ocLazyLoad你可以延时加载你的模块;不过,如果你想加载任何组件(控制器,服务,过滤器,等等),但是却不想定义一个模块,通过使用$ocLazyLoad也是完全可以做到的.(不过需要注意的是,你要确保你加载的这些组件是存在于一个已有的模块中)

    加载方式

    $ocLazyLoad多种方式去加载文件:

    • 通过一个文件加载一个或者多个模块或者组件:

    $ocLazyLoad.load('testModule.js');

    • 通过多个文件加载一个或者多个模块或者组件:

    $ocLazyLoad.load(['testModule.js', 'testModuleCtrl.js', 'testModuleService.js']);

    使用配置选项

    有两种方式为load函数去定义我们的配置选项,你可以通过使用load函数的第二个可选参数,为我们加载的所有的模块定义配置.当然你也可以为每一个加载的模块定义配置.

    例如,下面的两个是等价的(除了第一个例子中的anotherModule.js文件会被缓存外)

    $ocLazyLoad.load([{
    files: ['testModule.js', 'bower_components/bootstrap/dist/js/bootstrap.js'],
    cache: false
    },{
    files: ['anotherModule.js'],
    cache: true
    }]);
    $ocLazyLoad.load(
    ['testModule.js', 'bower_components/bootstrap/dist/js/bootstrap.js', 'anotherModule.js'],
    {cache: false}
    );

    参数cache: false适用于所有的原生加载器(浏览器默认所有的请求都被缓存了).如果你使用它,加载器会在路径的后面追加一个时间戳以便绕过浏览器的缓存.

    展开全文
  • 前端项目-oclazyload.zip

    2019-09-03 10:46:01
    前端项目-oclazyload,使用AngularJS按需加载模块(延迟加载)
  • angular-ui-router-oclazyload-requirejs 这是将 oclazyload 和 requirejs 与 angular-ui-router 一起使用的有效尖峰解决方案。 积分: :
  • 主要介绍了ui-router中使用ocLazyLoad和resolve的具体方法,详细的介绍了ocLazyLoad和resolve的具体用法,非常具有实用价值,需要的朋友可以参考下
  • oclazyload与angularjs

    2018-09-05 00:00:00
    与上一篇文档(Requirejs与angularjs)一样,本文档介绍的是利用oclazyload实现懒加载。相对前一篇来说,利用oclazyload的教程会更加简单易懂,因为没有了requirejs的配置和模块写法,而且为了方便,直接采用单模块...

    与上一篇文档(Requirejs与angularjs)一样,本文档介绍的是利用oclazyload实现懒加载。相对前一篇来说,利用oclazyload的教程会更加简单易懂,因为没有了requirejs的配置和模块写法,而且为了方便,直接采用单模块和组件的方式编程。

    两个项目的效果是一模一样的,大体代码也差不多


    项目结构

    13908708-36e0e0d777e4cef6.png


    编辑index.html

    也上一版本相比,一开始就引入相应的库与依赖,不需要配置入口文件,其中最重要的是引入oclazyload文件(路由换成了ui-route,用法还是差不多)

    13908708-35da465030d9675f.png


    配置app.bootstrap.js

    不像以前配置Requirejs的参数那样,这个项目的入口文件很简单

    13908708-ef641185644fe274.png

    建议使用组件形式

    可以看到,当打开/phones页面时,把视图替换成phone-list组件,而该组件需要先加载phoneList.component.js


    编写服务phone.server.js

    为了提高编码效率,使用ng-resource,所以先编写一个获取手机信息的服务,写法和以前差不多

    13908708-93714b1afa70b478.png

    就是这样,浅显易懂


    接着写自定义组件phone-list

    可以使用组件形式,也可以使用控制器模式,用组件形式就更加方便(phoneList.component.js)

    13908708-403c979f4f8af6d8.png

    要注意两点

    第一、采用的是单模块方式,所用服务、组件、控制器灯都挂载在根模块上,如果需要使用自定义模块需要在首页引入并在入口文件中添加对应依赖

    [if !supportLists]第二、[endif]给模块注册组件、服务等,需要先给模块配置好对应的方法,否则无法注册,详情参考入口文件根模块的配置


    编写详情页的控制器

    本来用组价可以很愉快的完成的,万一以后会用到控制器的写法,这里也简要介绍一下。

    首先配置路由时,列表用的是组件、详情用的是模板加控制器

    13908708-63454b0c9d16cad0.png

    列表控制器写法也很简单

    13908708-8ce19c18e3d2089c.png

    简简单单,一个控制器就写完了


    最终效果和requirejs的效果一模一样,都实现了按需加载(懒加载),只是Requirejs的写法稍微复杂,如果没用过requirejs的理解起来有点难以接受


    关于单模块与多模块,用单模块很简单,把所用的东西全部挂载到更模块上就可以了,而多模块则需要先引入再添加依赖,多了一步而已。


    13908708-6845a4665bce446f.png
    展开全文
  • ocLazyLoad中文文档

    2016-06-03 09:08:05
    ocLazyLoad是angular1.x的延时加载解决方案 英文文档地址:https://oclazyload.readme.io/中文文档地址:http://dreamapple.leanapp.cn/gitbook/oclazyload-doc/ ...
  • 本篇文章主要介绍了详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
  • 路由器在中定义,它可以向您展示 ocLazyLoad 如何使用处理Blog模块。 Blog模块有几个控制器,它们用于创建、删除、更新博客。 About模块只有一个按钮,当你点击它时,它会通过使用向你显示一个模态——但是ui-...
  • grunt-angular-builder-ocLazyload Angular 项目模板
  • 本篇文章主要介绍了Angular-Ui-Router+ocLazyLoad动态加载脚本示例,可以提高加载速度,使用户体验更好,有兴趣的可以了解一下。
  • 主要介绍了Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • angularjs-loading-googlemaps-with-oclazyload 使用 ui-router 和 ocLazyLoad 延迟加载谷歌地图 api
  • deps:['$ocLazyLoad',function ($ocLazyLoad) { console.log('load dashboard'); return $ocLazyLoad.load({ name:'app.console.dashboard', files:[ 'js/console/dashboard/console.dashboard.js', '...
  • ocLazyLoad 是 AngularJS 的延迟加载(惰性加载)模块和组件。 主要特性: 自动加载依赖关系 友好的调试器(无eval代码) 混合正常引导和按需加载的能力 通过服务或指令加载
  • ocLayzLoad-SystemJS-Router 这个类结合了三个不同的项目来启用基于路由的角度模块的延迟加载。... jspm install github:lookfirst/oclazyload-systemjs-router 有关使用的详细信息,请参阅项目。 更具体地说,。
  • Angularjs ocLazyLoad-master 应用在项目应用中由于加载的页面较多,而自己使用Angularjs1.X搭建的时候在主页面加载所有的js文件,导致当Js文件多的时候,主页面加载过于慢,导致用户观感很不好。 而在查找时,找到...
  • OcLazyLoad 示例 现实世界的应用程序与我们学习语言或框架的应用程序非常非常不同而且对于 AngularJs,它也不例外,根据其 SPA 哲学,我最担心的事情之一是按需加载文件. 因为没有这个,我们将在所有要使用的文件的...
  • ionic 框架 ...script type="text/javascript" src="lib/oclazyload/ocLazyLoad.min.js"></script> 2.注入 angular.module('starter', ['ionic', 'oc.lazyLoad']) 3.配置 .state('ap...
  • 当引用ocLazyLoad ,进行模块的懒加载时,报了一个这错controller not function undefine。 开始这么写的: resolve: { deps: ['$ocLazyLoad', function ($ocLazyLoad) {
  • $ocLazyLoad

    2019-10-05 14:13:46
    $ocLazyLoad.load('javascripts/controllers/template/tmplist.js' ); } ); }]   这里我们还可以看很多的东西: http://www.mamicode.com/info-detail-407754.html 这个是这个服务的官网: ...
  • 使用angularJS + ui-router +oclazyload 进行按需加载模块以及文件 ``` .state("hyjx",{ url:"/hyjx", views:{ "":{ templateUrl:"././PAGE-BAG/Login.jsp", controller:"protalCtrl" } }, data:{ ...
  • requirejs方式 oclazyload方式 声明:使用ui-router配置路由,angularv1.5.11; 第一种:oclazyload.js 文件结构为: 所有的**.controller.js都在scripts下,css在styles下 index.html需引...
  • 现引入ocLazyLoad实现按需加载,到指定页面再加载指定js、controller 1、原引用controller.js,首页首次加载时间长,文件打包之后很大 2、引入路由懒加载,直接使用npm或者bower npm install oclazyload ocLazy...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 443
精华内容 177
关键字:

ocLazyLoad