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

(2) 在你的

index.html

angular-lazyload

<!-- Step1: include js --> ```

(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贡献代码