初始化

创建项目

  • 安装Angular脚手架,使用的是8.0版本,需要进行降级处理
1
2
3
npm uninstall -g angular-cli
npm cache clean
npm install -g @angular/cli@8.3.0
  • 创建项目,安装需要的模块。-S表示不生成单元测试
1
ng new NeteaseCloudMusic --style=less --routing -S
1
ng add ng-zorro-antd

创建模块

  • 总体模块结构如下
1
2
3
4
5
6
7
8
9
10
11
|--src
|-- app
|-- core // 管理核心模块
|-- core.module.ts
|--pages // 管理页面模块
|-- pages.module.ts
|--services // 管理服务模块
|-- services.module.ts
|--share // 管理共享模块
|-- share.module.ts
|-- app.module.ts // 主模块
  • 所有组件放在AppModule上会导致难以维护,所以需要创建另一个模块core
1
ng g m core
  • 把一些非全局的模块放在core模块里,然后在主模块中导入core即可。设置此模块只能被app主模块引用,其它模块不能引入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import { NgModule } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from '../app-routing.module';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ServicesModule } from '../services/services.module';
import { PagesModule } from '../pages/pages.module';
import { ShareModule } from '../share/share.module';
import zh from '@angular/common/locales/zh';
import { NZ_I18N, zh_CN } from 'ng-zorro-antd';

// 配置语言
registerLocaleData(zh);
// 管理模块组件
@NgModule({
declarations: [],
imports: [
BrowserModule,
HttpClientModule,
BrowserAnimationsModule,
ServicesModule, // 服务模块
PagesModule // 页面模块
ShareModule, // 共享模块
AppRoutingModule, // 路由模块 放最后面比较好
],
exports: [
ShareModule,
AppRoutingModule
],
providers: [{ provide: NZ_I18N, useValue: zh_CN }],
})
export class CoreModule {
// 引入其它模块就会执行
constructor(@SkipSelf() @Optional() parentModule:CoreModule) {
if(parentModule){
throw new Error('CoreModule 只能被appModule引入')
}
}
}
  • 再创建一个共享模块share用于存放一些全局使用的模块,并且引入到core模块中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgZorroAntdModule } from 'ng-zorro-antd';
import { FormsModule } from '@angular/forms';

// 管理全局组件
@NgModule({
declarations: [],
imports: [
CommonModule,
NgZorroAntdModule,
FormsModule
],
// 共享模块 需要导出
exports: [
CommonModule,
NgZorroAntdModule,
FormsModule
],
})
export class ShareModule { }
  • 再创建一个pages模块,用于管理页面模块。并且引入到core模块中
1
2
3
4
5
6
7
8
9
10
11
12
13
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ShareModule } from '../share/share.module';

// 只需引入Share模块 有了页面管理模块,那么就不需要每个页面都导模块
@NgModule({
declarations: [],
imports: [
CommonModule,
ShareModule
]
})
export class PagesModule { }
  • 再创建一个services模块,用于管理HTTP模块。并将此模块引入到core模块中
1
2
3
4
5
6
7
8
9
10
import { NgModule } from '@angular/core';

// HTTP服务模块
@NgModule({
declarations: [],
imports: [

]
})
export class ServicesModule { }
  • app的主模块就比较简洁了,只需引入core模块,其内容如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';
import { ShareModule } from './share/share.module';

// 引入子模块
@NgModule({
declarations: [
AppComponent
],
imports: [
CoreModule
],
bootstrap: [AppComponent]
})
export class AppModule { }

首页视图

首页布局

  • app.component.html中编写头部和底部结构,中间内容使用路由。使用NG-ZORRO
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<div id="app">
<nz-layout class="layout">
<!--头部-->
<nz-header class="header">
<div class="wrap">
<div class="left">
<h1>Music</h1>
<ul nz-menu nzTheme="dark" nzMode="horizontal">
<li nz-menu-item>发现</li>
<li nz-menu-item>歌单</li>
</ul>
</div>
<div class="right">
<div class="search">
<nz-input-group [nzSuffix]="suffixIconSearch">
<input type="search" nz-input placeholder="歌单/歌手/歌曲">
</nz-input-group>
<ng-template #suffixIconSearch>
<i nz-icon type="search"></i>
</ng-template>
</div>
<div class="member">
<div class="no-login">
<ul nz-menu nzTheme="dark" nzMode="horizontal">
<li nz-submenu>
<div title>
<span>登录</span>
<i nz-icon type="down" nzTheme="outline"></i>
</div>
<ul>
<li nz-menu-item>
<i nz-icon type="mobile" nzTheme="outline"></i>
手机登陆
</li>
<li nz-menu-item>
<i nz-icon type="user-add" nzTheme="outline"></i>
注册
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</nz-header>
<!--中心内容-->
<nz-content class="content">
<router-outlet></router-outlet>
</nz-content>
<!--底部-->
<nz-footer class="footer">
Ant Design @2021 Implement By Angular
</nz-footer>
</nz-layout>
</div>

创建首页

  • 使用命令行创建home组件模块
1
ng g m pages/home --routing
  • 修改主页模块home.module.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
import { NgModule } from '@angular/core';
import { HomeRoutingModule } from './home-routing.module';
import { ShareModule } from 'src/app/share/share.module';
import { HomeComponent } from './home.component';

@NgModule({
declarations: [HomeComponent],
imports: [
HomeRoutingModule,
ShareModule, // 引入共享模块
]
})
export class HomeModule { }
  • pages.module.ts总页面模块中导入主页模块
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { NgModule } from '@angular/core';
import { HomeModule } from './home/home.module';

// 管理所有页面
@NgModule({
declarations: [],
imports: [
HomeModule, // Home页面组件
],
exports: [
HomeModule
]
})
export class PagesModule { }
  • 再创建home组件
1
ng g c pages/home
  • home-routing.module.ts配置路由
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';


const routes: Routes = [
{
path: 'home',
component: HomeComponent,
data: {
title : '发现'
}
}
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class HomeRoutingModule { }
  • 然后在app-routing.module.ts,根路由中配置空路由重定向
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";

const routes: Routes = [
{
path: "",
redirectTo: "/home",
pathMatch: "full",
},
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}