angular8案例-网易云音乐

技术栈

angular8+ngrx8+ng-zorro+material/odk

ng模块化设计/proxy,http拦截器/依赖注入/自定义指令和管道、自定义表单控件/动态组件/rxjs操作符/变更检测策略/ngrx8

api：

创建项目

依赖	步骤	报错/效果
ng-zorro	npm install rxjs@^6.5.2	只出现fsevents的WARN可忽略
	npm install ng-zorro-antd --save //安装到本地	8.3.1版本需要依赖rxjs@^6.5.2
	ng add ng-zorro-antd //项目中添加	? Add icon assets [ Detail: https://ng.ant.design/components/icon/en ] Yes ? Set up custom theme file [ Detail: https://ng.ant.design/docs/customize-theme/en ] Yes ? Choose your locale code: zh_CN ? Choose template to create project: blank found 1 high severity vulnerability   run `npm audit fix` to fix them, or `npm audit` for details可忽略
	ng serve --open //重启项目	页面变成ng-zorro则为成功
	<button nz-button nzType="primary">button</button>	使用ng-zorro
minireset	npm install minireset.css  //安装minireset	出现fseven警告可hulue
	@import '~minireset.css'; //样式文件中引用	使用minireset

页面结构、模块化设计

 

文件类型	步骤	解释
style文件	style样式文件位置： 1.手动剪切style.css黏贴到assets/styles 2.angular.json上改样式的配置，包括"projects"下“styles”和"test"下“styles”路径都要改为src/assets/styles/index.css 3.ctrl+c退出再重新npm server --open
module	创建module ng g module core
route	ng g module app-routing --flat --module=app	--flat 把这个文件放进了 src/app 中，而不是单独的目录中。  --module=app 告诉 CLI 把它注册到 AppModule 的 imports 数组中。

 

轮播图数据+推荐歌单数据+入驻歌手数据

知识点：自定义pipe，get请求+传参，resolve守卫

步骤
获取数据	接口	services.module.ts	common.type.ts
	下载 clone API的库 安装依赖 npm install 运行 node ./app.js	export const API_CONFIG=new InjectionToken('ApiConfigToken') @NgModule({ providers:[  {provide:API_CONFIG,useValue :'http://localhost:3000/'} ] })	创建 services/data-types/common.type.ts 数据原形 export type Banner={   targetId:number;   url:string;   imageUrl:string } export type Singer={   id:number;   name:string;   picUrl:string;   albumSize:number; } export type SongSheet={   id:number;   name:string;   picUrl:string;   playCount:number;  /*tracks:Song[]*/    }
	服务home.service.ts		服务singer.service.ts
	创建服务 ng g s services/home 引入 import { Banners } from './data-type/comment.type'; import { ServicesModule, API_CONFIG } from './services.module'; @Injectable({   providedIn: ServicesModule }) http请求 export class HomeService {   constructor(private http:HttpClient,@Inject(API_CONFIG) private uri:string) {}   goBanners():Observable<Banners[]>{     return this.http.get(this.uri+'banner')     .pipe(map((res:{banners:Banners[]})=> res.banners))   }   getPersonalSheetList():Observable<SongSheet[]>{     return this.http.get(t