20 ocLazyLoad使用

迷南。 2022-05-26 10:14 169阅读 0赞

# ocLazyLoad使用 #

参考自[http://dreamapple.leanapp.cn/gitbook/oclazyload-doc/quick-start/quick-start.html][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适用于所有的原生加载器(浏览器默认所有的请求都被缓存了).如果你使用它,加载器会在路径的后面追加一个时间戳以便绕过浏览器的缓存.

[http_dreamapple.leanapp.cn_gitbook_oclazyload-doc_quick-start_quick-start.html]: http://dreamapple.leanapp.cn/gitbook/oclazyload-doc/quick-start/quick-start.html