AngularJS按需加载文件

$ocLazyload官网: https://oclazyload.readme.io/docs/getting-started

为什么要按需加载文件

当一个单页应用规模越来越大，一个ng-route或者ui-router要切换的路由或状态很多而且每个都有相对应的controller文件时，如果在index.html一开始就加载上百可能甚至上千个controller文件以及对应的css文件等外联文件时，网页速度往往会因为需要加载如此庞大的数据，加载时间会变得很冗长。我们有没有想过，一开始index.html的加载可能只需要一点点的数据处理，其他的能不能在切换到那个路由的时候，再加载那个路由所对应的所有相关文件，会省去很多页面加载的时间，这样也方便代码解读及后期维护。

$ocLazyLoad使用

今天这篇文章主要讲解一下$ocLazyLoad.js的使用，它实现了按需加载的功能，一般和ui-router组合使用的比较多。

安装

在git中，输入以下代码

bower install oclazyload 或者 npm install oclazyload

添加依赖

var app = angular.module("MyApp", ["oc.lazyLoad"]); 注意，这里依赖模块的名字是固定的，"oc.lazyLoad"，切记不要写错。a app.controller("MyController", function($ocLazyLoad) { $ocLazyLoad.load('testModule.js'); }); 以上就是$ocLazyload的加载模块的简单例子。

$ocLazyLoad加载多种类型文件

$ocLazyLoad 可以加载模块，其他文件也是可以的， 比如controller、service、filter、css等与web app相关的文件都能加载。加载的时候要注意，你写的这些文件都是在已经存在的模块中，不然就加载不了。

$ocLazyLoad配置

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

选项 类型 默认值

debug

boolean

false

events

boolean

false

modules

对象数组

undefined

debug:$ocLazyLoad 会返回一个promise对象，如果有报错时，promise对象会被拒绝（rejected）, 也就是说，所有的errors不会显示。如果debug设为true，$ocLazyLoad会把所有的errors放在console上显示。 $ocLazyLoadProvider.config({ debug: true }); events: 当你加载一个模块、js文件、css文件等时，$ocLazyLoad会广播一个事件，它默认是false，如果设为true时，则会激活它的功能。        这些事件有：  ocLazyLoad.moduleLoaded ocLazyLoad.moduleReloaded ocLazyLoad.componentLoaded ocLazyLoad.fileLoaded $ocLazyLoadProvider.config({ events: true }); $scope.$on('ocLazyLoad.moduleLoaded', function(e, module) { console.log('module loaded', module); }); modules: 预定义一个模块，在之后用。再次之前，需要注册模块名字，及其文件地址。 $ocLazyLoadProvider.config({ modules: [{ name: 'TestModule', files: ['js/TestModule.js'] }] }); $ocLazyLoad.load('TestModule'); // will load the predefined configuration

$ocLazyLoad作为service

Parameter 针对本地加载器 Type Default value

cache 

Boolean

true

reconfig 

Boolean

false

rerun 

Boolean

false

serie 

Boolean

false

insertBefore 

Boolean

undefined

cache:  如果为false，为了绕开浏览器缓存，向url中追加一个时间戳 $ocLazyLoad.load({ cache: false, files: ['testModule.js', 'bower_components/bootstrap/dist/js/bootstrap.js'] }); reconfig: 如果重新加载模块，不会再次调用config代码块，这样可以手动操作再加载一次config代码 $ocLazyLoad.load({ reconfig: true, files: ['testModule.js', 'bower_components/bootstrap/dist/js/bootstrap.js'] }); rerun: 重新运行块 $ocLazyLoad.load({ rerun: true, files: ['testModule.js', 'bower_components/bootstrap/dist/js/bootstrap.js'] }); serie: 为true，打开平行加载文件功能 $ocLazyLoad.load({ serie: true, files: [ 'bower_components/angular-strap/dist/angular-strap.js', 'bower_components/angular-strap/dist/angular-strap.tpl.js' ] }); insertBefore: 默认情况下，css文件会被加载在head元素中最后一个子元素之前插入文件，这里你可以写一个选择器重写它 $ocLazyLoad.load({ insertBefore: '#load_css_before', files: ['bower_components/bootstrap/dist/css/bootstrap.css'] });

$ocLazyLoad作为directive

可以在tag中，输入指令，直接加载文件或者加载参数（文件路径已经放在了参数中） <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>

和ui-router一起使用

通常，$ocLazyLoad主要用于提前加载html模板所关联的文件，比如controller、css文件等，所以加载这些时，需要使用到resolve这个功能。resolve就是在这个路由或者状态被激活时，在html模板被加载之前，提前把需要的数据加载好。 $stateProvider.state('index', { url: "/", views: { "lazyLoadView": { controller: 'AppCtrl', templateUrl: 'partials/main.html' } }, resolve: { loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) { return $ocLazyLoad.load('js/AppCtrl.js'); }] } }); 还有一点一定要记住的是，在加载模块后一定要写这些代码，不然达不到按需加载的效果, 报错ng-areq： //配置动态加载 app.config(["$provide", "$compileProvider", "$controllerProvider", "$filterProvider", function($provide, $compileProvider, $controllerProvider, $filterProvider) { app.controller = $controllerProvider.register; app.directive = $compileProvider.directive; app.filter = $filterProvider.register; app.factory = $provide.factory; app.service = $provide.service; app.constant = $provide.constant; } ]); 具体原因还在查证。。。