atian25 / angular-lazyload

A lazyload service for angular projects, only load-on-demand, support seajs/requirejs/custom.

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

• 添加测试的示例, 参考seajs/seajs#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贡献代码

angular-lazyload's Issues

requirejs按需加载的问题？

seajs.use 和 seajs中的require.async 中的依赖是可以引入变量的。
seajs.require与requirejs.require是不能引入变量的。

你代码中的requirejs引入的
require(route.controllerUrl, function(m){}) 确定能用？
我还没有测试，但感觉好像有问题吧，或者需要引入requirejs的插件？

请问如何加载css？

ocLazyLoad

ocLazyLoad支持 seajs 吗

sos

http://git.oschina.net/taffy/angular-lazyload/issues/1#note_519344

关于按需加载的实现方式讨论

支持ui-router吗？

RT

请问路由里引用的controller怎么注入其他模块呢？

例如原来写法是
angular.module('app', ['datatables']);

现在换成lazyload,这里的datatables我不知道该怎么做了。

Cannot read property 'one' of undefined

when i use angular-lazyload, i meet this error, seems there is an error in your code at line 459 and line 460
img.one('load', _loaded);
img.one('error', _error);