Angular Busy 项目教程

1. 项目介绍

Angular Busy 是一个用于在 Angular 应用中显示繁忙/加载指示符的开源项目。它可以在任何 $http 或 $resource 请求或任何承诺（Promise）上显示繁忙指示符，帮助用户在等待数据加载时获得视觉反馈。Angular Busy 通过简单的指令和配置选项，使得在应用中添加加载指示符变得非常容易。

2. 项目快速启动

安装

首先，使用 npm 或 yarn 安装 Angular Busy：

npm install angular-busy --save

或者

yarn add angular-busy

引入模块

在 Angular 应用的入口文件（如 app.module.ts）中引入 angular-busy 模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularBusyModule } from 'angular-busy';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AngularBusyModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

使用指令

在需要显示加载指示符的组件中，使用 cgBusy 指令，并绑定一个承诺（Promise）或 $http 请求：

<div cgBusy="{promise: myPromise, message: 'Loading...'}"></div>

在组件的 TypeScript 文件中定义 myPromise：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myPromise: Promise<any>;

  constructor(private http: HttpClient) {
    this.myPromise = this.http.get('https://api.example.com/data').toPromise();
  }
}

3. 应用案例和最佳实践

应用案例

Angular Busy 可以用于各种需要加载指示符的场景，例如：

• 表单提交：在用户提交表单时显示加载指示符，直到服务器响应。
• 数据加载：在页面初始化时或用户切换页面时显示加载指示符，直到数据加载完成。
• 文件上传：在用户上传文件时显示加载指示符，直到文件上传完成。

最佳实践

• 自定义消息：通过 message 属性自定义加载指示符的提示信息。
• 自定义模板：通过 templateUrl 属性使用自定义的加载指示符模板。
• 延迟显示：通过 delay 属性设置加载指示符的延迟显示时间，避免短暂的加载指示符闪烁。
• 最小显示时间：通过 minDuration 属性设置加载指示符的最小显示时间，确保用户能够看到加载指示符。

4. 典型生态项目

Angular Busy 作为 Angular 生态系统中的一个实用工具，可以与其他 Angular 项目和库结合使用，例如：

• Angular Material：结合 Angular Material 的组件和样式，创建更加美观和一致的用户界面。
• NgRx：在 NgRx 的状态管理中使用 Angular Busy，显示全局或局部状态的加载指示符。
• Angular Universal：在 Angular Universal 的服务器端渲染中使用 Angular Busy，提升用户体验。

通过这些生态项目的结合，Angular Busy 可以更好地服务于复杂的 Angular 应用，提升应用的可用性和用户体验。