20 ocLazyLoad使用

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适用于所有的原生加载器(浏览器默认所有的请求都被缓存了).如果你使用它,加载器会在路径的后面追加一个时间戳以便绕过浏览器的缓存.