ng-http-loader 使用教程

ng-http-loader 使用教程

ng-http-loader:dango: Smart angular HTTP interceptor - Intercepts automagically HTTP requests and shows a spinkit spinner / loader / progress bar项目地址:https://gitcode.com/gh_mirrors/ng/ng-http-loader

项目介绍

ng-http-loader 是一个用于 Angular 应用的 HTTP 加载指示器库。它通过拦截 HTTP 请求并在请求进行时显示加载动画，从而提升用户体验。该库支持 Angular 5 及以上版本，并且提供了多种配置选项，以便开发者根据需求进行定制。

项目快速启动

安装

首先，通过 npm 安装 ng-http-loader：

npm install ng-http-loader

配置

在 Angular 项目的根模块中导入 NgHttpLoaderModule：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { NgHttpLoaderModule } from 'ng-http-loader';

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    NgHttpLoaderModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

使用

在应用的根组件中使用 NgHttpLoaderComponent：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <ng-http-loader></ng-http-loader>
    <router-outlet></router-outlet>
  `,
})
export class AppComponent { }

应用案例和最佳实践

自定义加载动画

ng-http-loader 支持多种加载动画，可以通过配置 spinner 属性来选择不同的动画效果：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <ng-http-loader
      [spinner]="spinkit.skWave"
    ></ng-http-loader>
    <router-outlet></router-outlet>
  `,
})
export class AppComponent {
  public spinkit = Spinkit;
}

过滤特定请求

可以通过配置 filteredUrlPatterns 属性来过滤不需要显示加载动画的特定请求：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <ng-http-loader
      [filteredUrlPatterns]="['example.com']"
    ></ng-http-loader>
    <router-outlet></router-outlet>
  `,
})
export class AppComponent { }

典型生态项目

ng-http-loader 可以与以下 Angular 生态项目结合使用，以提供更丰富的功能和更好的用户体验：

1. Angular Material: 结合 Angular Material 组件库，可以创建更加美观和一致的用户界面。
2. NgRx: 与 NgRx 状态管理库结合，可以更好地管理应用状态，并在状态变化时触发加载动画。
3. Angular Universal: 与 Angular Universal 服务端渲染结合，可以提升首屏加载速度和 SEO 效果。

通过这些生态项目的结合，ng-http-loader 可以更好地融入到复杂的 Angular 应用中，提供更加完善的用户体验。

ng-http-loader:dango: Smart angular HTTP interceptor - Intercepts automagically HTTP requests and shows a spinkit spinner / loader / progress bar项目地址:https://gitcode.com/gh_mirrors/ng/ng-http-loader