Angular Loading Bar 终极指南：如何快速为你的应用添加智能加载指示器 🚀

Angular Loading Bar 是一个完全自动化的加载进度条，专门为 AngularJS 应用设计。它能自动监测所有的 XHR 请求，为你的用户提供流畅的加载体验，无需任何复杂配置！

✨ 为什么选择 Angular Loading Bar？

🎯 完全自动化体验

传统的加载指示器需要你手动管理状态，但 Angular Loading Bar 通过拦截器自动处理所有请求，你只需要引入依赖，剩下的工作它都会自动完成！

🎨 精美视觉效果

内置了现代化的加载动画，包括：

• 平滑的进度条过渡效果
• 可选的旋转加载图标
• 优雅的淡入淡出动画

🛠️ 快速安装配置

通过 Bower 安装

bower install angular-loading-bar

通过 NPM 安装

npm install angular-loading-bar

🚀 三步快速上手

1. 添加依赖到你的应用 只需在模块依赖中加入 angular-loading-bar 即可开始使用！

2. 引入 CSS 和 JavaScript 文件 包含提供的样式文件和脚本文件，或者自定义 CSS 来覆盖默认样式。

3. 享受自动化体验 配置完成！现在所有 XHR 请求都会自动显示加载进度。

⚙️ 智能配置选项

自定义加载指示器

你可以轻松配置是否显示旋转图标或进度条：

angular.module('myApp', ['angular-loading-bar'])
  .config(function(cfpLoadingBarProvider) {
    cfpLoadingBarProvider.includeSpinner = false;  // 关闭旋转图标
    cfpLoadingBarProvider.includeBar = false;     // 关闭进度条
});

延迟阈值设置

为了避免频繁显示加载条，可以设置延迟阈值：

cfpLoadingBarProvider.latencyThreshold = 500;  // 500ms 后才显示

🎭 实际应用场景

多请求智能处理

当多个请求同时发生时，Angular Loading Bar 会自动将它们捆绑处理，每个响应都会按比例推进进度条。

忽略特定请求

对于长轮询或调试请求，可以设置忽略加载条：

$http.get('/status', {
  ignoreLoadingBar: true
});

📊 事件系统

Angular Loading Bar 通过 $rootScope 广播事件，让你能够进一步定制用户体验：

• cfpLoadingBar:loading - 每次非缓存 XHR 请求时触发
• cfpLoadingBar:loaded - 每次请求收到响应时触发
• cfpLoadingBar:started - 第一个请求开始时触发
• cfpLoadingBar:completed - 所有请求完成时触发

🏆 项目优势

• 轻量级：仅 2.4Kb 压缩大小，0.5Kb gzip 压缩
• 高测试覆盖率：100% 代码测试覆盖率
• 无 jQuery 依赖：纯 AngularJS 实现
• 完美动画支持：与 ngAnimate 无缝集成

💡 最佳实践建议

1. 结合 ngAnimate 使用 获得更流畅的动画效果
2. 自定义样式 通过 src/loading-bar.css 文件轻松定制外观
3. 合理配置延迟 根据应用特性调整延迟阈值

Angular Loading Bar 是提升 AngularJS 应用用户体验的完美解决方案，让加载过程变得优雅而智能！✨