ocLazyLoad 使用教程

1. 项目的目录结构及介绍

ocLazyLoad 是一个用于 AngularJS 的懒加载模块和组件的开源项目。以下是项目的目录结构及其介绍：

ocLazyLoad/
├── dist/
│   ├── ocLazyLoad.js
│   ├── ocLazyLoad.min.js
│   └── ocLazyLoad.min.js.map
├── src/
│   ├── ocLazyLoad.js
│   └── ocLazyLoad.spec.js
├── examples/
│   ├── basic/
│   ├── ui-router/
│   └── webpack/
├── gulpfile.js
├── package.json
├── README.md
└── LICENSE

• dist/：包含编译后的文件，如 ocLazyLoad.js 和 ocLazyLoad.min.js。
• src/：包含源代码文件，如 ocLazyLoad.js 和测试文件 ocLazyLoad.spec.js。
• examples/：包含多个示例项目，如基本示例、使用 UI-Router 的示例和使用 Webpack 的示例。
• gulpfile.js：Gulp 构建脚本。
• package.json：项目的依赖和脚本配置。
• README.md：项目说明文档。
• LICENSE：项目许可证。

2. 项目的启动文件介绍

ocLazyLoad 的启动文件主要是 ocLazyLoad.js 和 ocLazyLoad.min.js，这两个文件位于 dist/ 目录下。ocLazyLoad.js 是未压缩的版本，适合开发环境使用；ocLazyLoad.min.js 是压缩后的版本，适合生产环境使用。

在 AngularJS 项目中，你需要在 HTML 文件中引入 ocLazyLoad.js 或 ocLazyLoad.min.js：

<script src="path/to/ocLazyLoad.min.js"></script>

然后在 AngularJS 应用的配置阶段，注入 ocLazyLoad 服务：

angular.module('myApp', ['oc.lazyLoad'])
  .config(function($ocLazyLoadProvider) {
    // 配置 ocLazyLoad
  });

3. 项目的配置文件介绍

ocLazyLoad 的配置文件主要是 package.json 和 gulpfile.js。

package.json

package.json 文件包含了项目的依赖和脚本配置。以下是部分关键内容：

{
  "name": "ocLazyLoad",
  "version": "1.1.0",
  "description": "Lazy load modules & components in AngularJS",
  "main": "dist/ocLazyLoad.min.js",
  "scripts": {
    "test": "gulp test"
  },
  "dependencies": {
    "angular": "^1.2.x || >= 1.4.0-beta.0 || >= 1.5.0-beta.0"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-uglify": "^2.0.0"
  }
}

• name：项目名称。
• version：项目版本。
• description：项目描述。
• main：主文件路径。
• scripts：脚本命令，如测试命令 npm test。
• dependencies：项目依赖，如 AngularJS。
• devDependencies：开发依赖，如 Gulp 和相关插件。

gulpfile.js

gulpfile.js 文件是 Gulp 构建脚本，用于自动化构建过程，如编译、压缩和测试。以下是部分关键内容：

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

gulp.task('build', function() {
  return gulp.src('src/ocLazyLoad.js')
    .pipe(concat('ocLazyLoad.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
});

gulp.task('default', ['build']);