Angular2-Busy 项目教程

1. 项目介绍

Angular2-Busy 是一个用于在 Angular 2+ 应用中显示繁忙/加载指示器的开源项目。它可以在任何 Promise 或 Observable 的订阅上显示加载指示器，帮助用户在等待数据加载时获得更好的用户体验。该项目是基于 Angular 2 重写的 angular-busy，并添加了一些新的特性。

主要功能

• 支持在 Promise 或 Observable 的订阅上显示加载指示器。
• 提供灵活的配置选项，如消息、背景、延迟和最小持续时间等。
• 支持自定义模板和 CSS 类。

2. 项目快速启动

安装

首先，通过 npm 安装 Angular2-Busy：

npm install --save angular2-busy

引入 CSS

在项目的 index.html 中引入 CSS 文件：

<link rel="stylesheet" href="/node_modules/angular2-busy/build/style/busy.css">

导入模块

在应用的根模块中导入 BusyModule：

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BusyModule } from 'angular2-busy';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    BusyModule
  ],
})
export class AppModule { }

使用指令

在组件中使用 ngBusy 指令来显示加载指示器：

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';

@Component({
  selector: 'some-component',
  template: `
    <div [ngBusy]="busy"></div>
  `
})
export class SomeComponent implements OnInit {
  busy: Promise<any>;

  constructor(private http: Http) {}

  ngOnInit() {
    this.busy = this.http.get('https://api.example.com/data').toPromise();
  }
}

3. 应用案例和最佳实践

应用案例

假设你正在开发一个电子商务网站，用户在点击“购买”按钮后，需要等待服务器处理订单。此时，你可以使用 Angular2-Busy 来显示一个加载指示器，告知用户正在处理请求。

@Component({
  selector: 'purchase-button',
  template: `
    <button (click)="purchase()">购买</button>
    <div [ngBusy]="busy"></div>
  `
})
export class PurchaseButtonComponent {
  busy: Promise<any>;

  constructor(private http: Http) {}

  purchase() {
    this.busy = this.http.post('/api/purchase', { productId: 123 }).toPromise();
  }
}

最佳实践

• 自定义消息：通过配置 message 选项，可以自定义加载指示器显示的消息。
• 延迟显示：通过设置 delay 选项，可以延迟加载指示器的显示，避免短暂的加载时间导致的不必要的闪烁。
• 最小持续时间：通过设置 minDuration 选项，可以确保加载指示器至少显示一定的时间，避免加载时间过短导致用户体验不佳。

4. 典型生态项目

Angular Material

Angular Material 是一个基于 Material Design 的 UI 组件库，与 Angular2-Busy 结合使用可以创建美观且功能强大的 Angular 应用。

RxJS

RxJS 是一个用于处理异步事件的库，Angular2-Busy 可以与 RxJS 的 Observable 结合使用，提供更强大的异步处理能力。

Angular CLI

Angular CLI 是一个用于快速生成 Angular 项目的命令行工具，结合 Angular2-Busy 可以快速搭建带有加载指示器的 Angular 应用。

通过以上模块的介绍和实践，你可以快速上手并深入使用 Angular2-Busy 项目，提升 Angular 应用的用户体验。