angular-lazyload

by atian25

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

123 Stars 38 Forks Last release: about 7 years ago (v0.4.0) 16 Commits 2 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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.jsRequireJS


下载 (or 压缩版) | 使用指南 | 基本原理 | TODO/贡献代码 | 示例使用说明


使用指南

(1) 安装 - 通过Bower安装:

bower install angular-lazyload
- 直接下载: Download (or Minified)

(2) 在你的

index.html
中引入
angular-lazyload
。 ``` <!-- 实际项目中用bower安装到本地 -->

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.