angular-lazyload

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

Added by: Sam Deering

GitHub

Repository

atian25/angular-lazyload

Stats

Stars: 95

Watchers: 95

Forks: 41

Author

TZ | 天猪
TZ | 天猪

Module Description

angular-lazyload

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

按需加载AngularJS模块, 支持Sea.jsRequireJS


下载 (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){
    ...
  }]);

基本原理

  • 通过routeresolve做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贡献代码

Module stats last updated: 2017-03-24 16:00:03

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!