发表于: 2017-01-08 23:59:32

1 1257


今天完成的事:文件加载问题,在大型项目中一次性加载全部文件,过多的请求拖慢速度,影响体验,懒加载可以解决这个问题。

遇到的问题及收获:阅读ocLazyLoad文档了解其用法:

添加依赖

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

控制器按需加载:

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

配置:

angular.module('app', ['oc.lazyLoad']).config(['$ocLazyLoadProvider',function($ocLazyLoadProvider$ocLazyLoadProvider.config({ // ... }); }]);

可选选项:

debug:值为true会将错误打印出来

events:$ocLazyLoad加载文件时广播事件,默认为false

modules:预定义模块配置

$ocLazyLoadProvider.config({ modules: [{ name'TestModule'files: ['js/TestModule.js'] }] });

$ocLazyLoad.load('TestModule'); // will load the predefined configuration

可加载多个文件,可指定类型(js!开头文件不可指定扩展名),可加载非angular外部库

$ocLazyLoad.load([ 'testModule.js', {type'css'path'testModuleCtrl'}, {type'html'path'testModuleCtrl.html'}, {type'js'path'testModuleCtrl'}, 'js!testModuleService''less!testModuleLessFile']);

$ocLazyLoad服务可选参数:

cache:false:使用它,加载器会在路径的后面追加一个时间戳以便绕过浏览器的缓存.

reconfig:false:重新加载模块,旧配置不会重新调用(充分调用可能出问题),true可强制重新执行

serie:默认同时加载文件,true则顺序加载;

指令:

延时渲染,需要加载的文件加载完成才会编译指令的内容;

<div oc-lazy-load="['js/testModule.js', 'partials/lazyLoadTemplate.html']">  

<!-- Use a directive from TestModule -->  

<test-directive></test-directive></div>

可用变量存储参数:

$scope.lazyLoadParams = [  'js/testModule.js',  'partials/lazyLoadTemplate.html'];

div oc-lazy-load="lazyLoadParams"></div>

可在依赖注入时加载

angular.module('MyModule', ['pascalprecht.translate', [  '/components/TestModule/TestModule.js',  '/components/bootstrap/css/bootstrap.css',  '/components/bootstrap/js/bootstrap.js']]);

https://oclazyload.readme.io/docs/getting-started官方文档

明天要做的事:实现搜索功能,完善代码。


返回列表 返回列表
评论

    分享到