Awesome

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) 安装

• 通过Bower安装: bower install angular-lazyload
• 直接下载: Download (or Minified)

(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

• 添加测试的示例, 参考https://github.com/seajs/seajs/issues/874
• 欢迎PullRequest贡献代码

示例使用说明

1. 安装nodejs -- 下载对应版本并安装
2. 安装grunt -- 命令行下执行: npm install -g grunt-cli (不包含符号` ,下同)
3. 安装bower -- 命令行下执行: npm install -g bower (不包含符号` ,下同)
4. 安装依赖库 -- 命令行到项目根目录,执行 npm install
5. 安装Web类库 -- 命令行到example目录,执行 bower install
6. 运行示例 -- 命令行执行 grunt server, 将自动打开浏览器显示首页
7. 若参与开发则 -- 命令行执行 grunt dev, 欢迎通过PullRequest贡献代码