Angula8 开发（一）

1.准备工作

1.1.开发工具

开发工具：node，vscode

1.2.开发插件

所需主要开发插件：Angular 8 Snippets，Angular Files、Angular Language
Service，至于其他的比如Beautify、Document This,Tslint 等等

1.3.功能

Angular8+Rxjs+zorro+TypeScript+aplayer等的搞笑段子+音乐搜索播放项目

1.4.环境初试

1. 安装Angular CLI:
   . npm install -g @angular/cli

2. 创建新应用
   ng new my-app

3. 启动应用
   ng serve --open

创建应用

创建应用
ng new my-music

项目主要文件结构：

文件	用途
.editorconfig	代码编辑器的配置。参见 EditorConfig 。
angular.json	为工作区中的所有项目指定 CLI 的默认配置，包括 CLI 要用到的构建、启动开发服务器和测试工具的配置项，比如 TSLint，Karma 和 Protractor。欲知详情，请参阅 Angular 工作空间配置 部分。
package.json	配置工作空间中所有项目可用的 npm包依赖 。有关此文件的具体格式和内容，请参阅 npm 的文档 。
package-lock.json	提供 npm 客户端安装到 node_modules 的所有软件包的版本信息。欲知详情，请参阅 npm 的文档。如果你使用的是 yarn 客户端，那么该文件就是 yarn.lock 。
src/	根项目的源文件。
tsconfig.json	工作空间中各个项目的默认 TypeScript 配置。
tslint.json	工作空间中各个项目的默认 TSLint 配置

添加NG-ZORRO

方式一： 命令ng add ng-zorro-antd [options]
这里直接使用默认options配置。执行命令 ng add ng-zorro-antd 即可，其中options配置参考官网。
执行命令后将自动完成 ng-zorro-antd 的初始化配置，包括引入国际化文件，导入模块，引入样式文件等工作。请查看app.module.ts中已经自动引入了相关代码# 封装服务 http拦截和统一响应请求处理

方式二：自行构建
npm install ng-zorro-antd --save
然后自行配置：

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd';
import { AppComponent } from './app.component';

/** 配置 angular i18n **/
import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh';
registerLocaleData(zh);

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    BrowserAnimationsModule,
    /** 导入 ng-zorro-antd 模块 **/
    NgZorroAntdModule
  ],
  bootstrap: [ AppComponent ],
  /** 配置 ng-zorro-antd 国际化（文案 及 日期） **/
  providers   : [
    { provide: NZ_I18N, useValue: zh_CN }
  ]
})
export class AppModule { }

封装服务 添加http拦截和统一响应请求处理

新建文件夹http-interceptors，并新建文件http-index.ts,http-interceptor.ts，
http-interceptor.ts:
新建类Interceptor并实现HttpInterceptor接口。如果响应Response，pipe管道组合rxjs 多个操作符处理统一对请求响应等处理

响应处理：

private handleData(event: HttpResponseBase): Observable<any> {
        // 业务处理
        switch (event.status) {//正常的status响应
            case 200:
                if (event instanceof HttpResponse) {
                    const body: any = event.body;
                    console.log(body.code)
                    if (body && body.code != 200) {//200为业务编码响应成功
                        return throwError({});
                    } else {
                        return of(new HttpResponse(Object.assign(event, { body: body.result })));
                    }
                }
                break;
            case 401:

            case 403:
            case 404:
            case 500:
                break;
            default:
                break;
        }
        return of(event);
    }

request则直接发送即可of(event)。有的时候需要设置token。和url等等。因为HttpRequest 和 HttpResponse 实例的属性却是只读的，所以需要重新克隆一份，然后操作克隆体。

let newReq = req.clone({
         url:baseUrl+req.url,
 		headers: req.headers.set('Authorization', authToken)         
 });

http-index.ts：
在从 @angular/common/http 中导入了 HTTP_INTERCEPTORS 注入令牌之后，编写如下的 Interceptor提供商注册语句：
{ provide: HTTP_INTERCEPTORS, useClass: Interceptor, multi: true },
然后就可以将之加入到AppModule providers 数组中，

import { httpInterceptorProviders } from "./http-interceptors/http-index";
...
providers: [{ provide: NZ_I18N, useValue: zh_CN },httpInterceptorProviders],

完整拦截代码
http-interceptor.ts:：

import { Injectable } from '@angular/core';
import {
    HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse, HttpErrorResponse, HttpResponseBase
} from '@angular/common/http';

import { Observable, of, throwError } from 'rxjs';
import { catchError, mergeMap, tap } from 'rxjs/operators';

const baseUrl="https://api.apiopen.top"
@Injectable()
export class Interceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        let newReq = req.clone({
            url:baseUrl+req.url
          });
        return next.handle(newReq).pipe(
            mergeMap((event: any) => {
                // 允许统一对请求错误处理
                if (event instanceof HttpResponseBase) return this.handleData(event);
                // 若一切都正常，则后续操作
                return of(event);
            }),
            catchError((err: HttpErrorResponse) => this.handleData(err)),
        );
    }
    private handleData(event: HttpResponseBase): Observable<any> {
        // 业务处理
        switch (event.status) {//正常的status响应
            case 200:
                if (event instanceof HttpResponse) {
                    const body: any = event.body;
                    console.log(body.code)
                    if (body && body.code != 200) {//200为业务编码响应成功
                        return throwError({});
                    } else {
                        return of(new HttpResponse(Object.assign(event, { body: body.result })));
                    }
                }
                break;
            case 401:

            case 403:
            case 404:
            case 500:
                break;
            default:
                break;
        }
        return of(event);
    }
}

http-index.ts:

import { HTTP_INTERCEPTORS } from '@angular/common/http';

import { Interceptor } from './http-interceptor';

export const httpInterceptorProviders = [
  { provide: HTTP_INTERCEPTORS, useClass: Interceptor, multi: true },
];

集成MoePlayer之Aplayer

更多请参考 文档

1. 命令安装aplayer
   . npm install aplayer --save
2. 在需要使用的地方aplayer的组件中导入APlayer
   import APlayer from 'APlayer';
3. 这里样式采用在index.html中cdn加载:
   <linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.css">

ng serve --open 运行ok正常~