angular-lazyload
NOT CURRENTLY MAINTAINED, use ocLazyLoad or angular2
a lazyload service for angular projects, only load-on-demand, support seajs/requirejs/custom.
按需加载AngularJS模块, 支持Sea.js和RequireJS。
下载 (or 压缩版) | 使用指南 | 基本原理 | TODO/贡献代码 | 示例使用说明
使用指南
(1) 安装
(2) 在你的index.html中引入angular-lazyload。
<!-- 实际项目中用bower安装到本地 -->
<script src="components/seajs/sea.js" id="seajsnode"></script>
<script src="components/angular/angular.js"></script>
<script src="components/angular-route/angular-route.js"></script>
<!-- Step1: include js -->
<script src="../../src/angular-lazyload.js"></script>
(3) 在你的启动文件里面, 手动启动bootstrap。
//Step2: bootstrap youself
seajs.use(['app'], function(app){
angular.bootstrap(document, ['app']);
});
(3) 添加angular-lazyload为你的主模块的依赖中。
//Step3: add 'angular-lazyload' to your main module's list of dependencies
var app = angular.module('app', ['angular-lazyload', 'ngRoute']);
(4) 在app.run里进行初始化。
app.run(['$lazyload', function($lazyload){
//Step5: init lazyload & hold refs
$lazyload.init(app);
app.register = $lazyload.register;
}]);
(5) 路由映射, 添加controllerUrl
//Step4: add `controllerUrl` to your route item config
$routeProvider
.when('/test/a', {
controller: 'testACtrl',
controllerUrl: 'modules/module1/testACtrl.js',
templateUrl: 'modules/module1/testA.tpl.html'
})
}
(6) 在你的模块里进行注册controller。
//Step6: use `app.register` to register controller/service/directive/filter
app.register.controller('testACtrl', ['$scope', function($scope){
...
}]);
基本原理
- 通过
route的resolve做hack点 - 在
config期保存register的引用 - 监听
$routeChangeStart事件, 动态添加一个resolve resolve里面通过seajs去动态加载模块,并动态注册
TODO
- 添加测试的示例, 参考seajs/seajs#874
- 欢迎PullRequest贡献代码