Angular + ocLazyLoad动态化加载脚本

 2015-12-26 18:25:29    AngularJs

在实际的开发中,由于功能众多产生的脚本文件也随之增多.这时候,我们要实现动态加载脚本来提升网页的响应速度,并且还要实现脚本缓存.现在市面上的加载器很多, 比如现在的require,但是相对来说require还是“弱”了一点,对angular来讲不是太完美,况且Angular本身就是模块化的东西，并不能完美的贴合. 所以,一个为angular量身定制的脚本加载器就出现了,小巧玲珑的它只有15KB，15KB, 它就是ocLazyLoad

所有的文档在这里：猛戳这里

关于ocLazyLoad的文档很简单，大家看看就明白了。前提是你得先了解angular。

使用的方式大致三种：服务结合路由，指令，注入。下面的代码块一一对应

1 2 3 4 5 6 7 8 9 10 11 12 13 14

$stateProvider.state('index', {       url: "/", // root route       views: {           "lazyLoadView": {                 controller: 'AppCtrl', // This view will use AppCtrl loaded below in the resolve                templateUrl: 'partials/main.html'             }       },         resolve: { // Any property in resolve should return a promise and is executed before the view is loaded         loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {      // you can lazy load files for an existing module              return $ocLazyLoad.load('js/AppCtrl.js');         }]   } });

1 2 3

<div oc-lazy-load="['js/testModule.js', 'partials/lazyLoadTemplate.html']">   <!-- Use a directive from TestModule -->   <test-directive></test-directive></div>

1 2 3 4 5

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

在实际项目中最理想的方式就是结合路由来动态加载脚本，之前加载成功的脚本会在浏览器做缓存。

这里有一个完整的实例项目(戳这里)。