Angular Loading Bar 项目教程

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

Angular Loading Bar 项目的目录结构相对简单，主要包含以下几个部分：

angular-loading-bar/
├── src/
│   ├── loading-bar.css
│   ├── loading-bar.js
│   └── loading-bar.tpl.html
├── .gitignore
├── .jshintrc
├── .travis.yml
├── bower.json
├── gulpfile.js
├── karma.conf.js
├── package.json
├── README.md
└── webpack.config.js

目录结构介绍

• src/：包含项目的核心文件，包括样式文件 loading-bar.css、JavaScript 文件 loading-bar.js 和模板文件 loading-bar.tpl.html。
• .gitignore：Git 忽略文件配置。
• .jshintrc：JSHint 配置文件。
• .travis.yml：Travis CI 配置文件。
• bower.json：Bower 包管理配置文件。
• gulpfile.js：Gulp 任务配置文件。
• karma.conf.js：Karma 测试配置文件。
• package.json：NPM 包管理配置文件。
• README.md：项目说明文档。
• webpack.config.js：Webpack 配置文件。

2. 项目的启动文件介绍

Angular Loading Bar 项目的启动文件主要是 src/loading-bar.js。这个文件定义了 Angular 模块 angular-loading-bar，并设置了拦截器来自动更新加载进度条。

angular.module('angular-loading-bar', ['ng'])
  .config(['$httpProvider', function($httpProvider) {
    // 配置拦截器
    $httpProvider.interceptors.push('cfpLoadingBarInterceptor');
  }])
  .factory('cfpLoadingBarInterceptor', ['$q', '$injector', function($q, $injector) {
    // 拦截器实现
  }]);

3. 项目的配置文件介绍

Angular Loading Bar 项目的配置文件主要包括 package.json 和 bower.json。

package.json

package.json 文件定义了项目的依赖和脚本命令：

{
  "name": "angular-loading-bar",
  "version": "0.9.0",
  "description": "An automatic loading bar for AngularJS",
  "main": "src/loading-bar.js",
  "scripts": {
    "test": "karma start karma.conf.js"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/angular-loading-bar/angular-loading-bar.git"
  },
  "author": "Wes Cruver",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/angular-loading-bar/angular-loading-bar/issues"
  },
  "homepage": "https://github.com/angular-loading-bar/angular-loading-bar",
  "devDependencies": {
    "angular": "^1.2.x",
    "angular-mocks": "^1.2.x",
    "gulp": "^3.8.10",
    "gulp-concat": "^2.5.2",
    "gulp-header": "^1.2.2",
    "gulp-jshint": "^1.9.2",
    "gulp-rename": "^1.2.2",
    "gulp-uglify": "^1.1.0",
    "jshint-stylish": "^1.0.0",
    "karma": "^0.12.31",
    "karma-jasmine": "^0.3.5",
    "karma-phantomjs-launcher": "^0.1.4",
    "phantomjs": "^1.9.15"
  }
}

bower.json

bower.json 文件定义了 Bower 包管理器的依赖：

{
  "name": "angular-loading-bar",
  "version": "0.9.0",
  "main": [
    "build/loading-bar.min.