这是什么？我适合阅读吗？
NG-ZORRO 是由阿里巴巴阿里云和计算平台事业部的小伙伴为 Ant Design 开发的 Angular 版本，是一个适用于构建中后台应用的组件库。该系列文章是为 ng-zorro 的用户提供的教程项目 Today 的配套教程。如果你是新用户，想要了解一下 ng-zorro 的使用姿势，或者你是 Angular 初学者，想要通过一个项目来锻炼自己的开发能力，欢迎阅读。
目录和链接
本系列文章共有以下几篇（更新中）：
- （本篇）项目简介，学习在项目中添加 ng-zorro，编写最简单的 setup（初始设置）界面
你可以点击下面的链接预览：
点击下面的链接获取源代码：
点击下面的链接获取按照行文顺序 commit 的源代码：
项目介绍
我们的教程项目要编写一个名为 Today 的待办事项应用。
Today 还有一个基于 electron 和 Vue 的版本，完成度比较高，建议你浏览 该项目的主页（对于 Mac 用户我们还提供了能直接运行的 dmg，其他平台的用户请自行 build）。
该应用主要包含以下几个界面，并提供如下的功能：
- 主界面，分为左边的清单列表和右边的待办事项列表。除了最基本的增加、删除、重命名清单和待办事项外，我们还要支持改变待办事项的排序方法，特别的，我们还要提供“建议”帮助用户确定今天（或者说接下来）要做的事情
- 待办详情界面：在用户点击一个待办事项之后，这个界面会弹出以让用户对改办事项进行更多的修改，包括修改截止时间、计划时间、待办标题、详情、是否需要提醒等等
- 总结界面，我们帮助用户记录他们每一天完成任务的情况，并且通过日历的形式展示
- 初始化（setup）界面
- 设置界面
是不是有点期待了呢？我们现在就开始！
项目构建
想要了解更多关于项目构建的内容， 请阅读 ng-zorro 的文档。
我们先构建一个新项目，然后在这个项目里安装 ng-zorro。
$ ng new today-ng
$ cd today-ng
$ ng add ng-zorro-antd现在尝试 ng serve，并打开 locahost:4200，你应该可以看到 ng-zorro 的标志了，恭喜你顺利的为你的项目引入了 ng-zorro！
划分模块并设置路由
我们的应用分为好几个页面，为了在代码的层面也有对应的划分，并保持好的拓展性和可维护性，我们将每个大页面都划分为一个独立的模块。这篇文章里，我将会向你展示如何做最简单的一个模块 setup。
我们先创建 setup module 和对应的 component：
ng g m pages/setup
ng g c pages/setup --module pages/setup给项目添加路由。创建 app/app-routing.module.ts 文件，然后编写如下内容：
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SetupComponent } from './pages/setup/setup.component';
const routes: Routes = [
{ path: 'setup', component: SetupComponent },
{ path: '', redirectTo: '/setup', pathMatch: 'full' }
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}修改 app.module.ts 来引入 setup 以及路由模块：
// ...
import { AppRoutingModule } from './app-routing.module';
import { SetupModule } from './pages/setup/setup.module';
registerLocaleData(zh);
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
HttpClientModule,
NgZorroAntdModule,
AppRoutingModule,
SetupModule
],
providers: [ { provide: NZ_I18N, useValue: zh_CN } ],
bootstrap: [ AppComponent ]
})
export class AppModule { }最后再更新 app.component.html 的内容为 <router-outlet></router-outlet>，这样，我们就划分好了第一个模块并处理了部分路由，现在请看浏览器，是不是显示 setup works! 了呢？
Setup 模块
在我们开始写界面之前，先简单分析一下。显然，我们需要把用户名和初始化标记存入 local storage，也很显然，我们不应该把 localStorage.set 等代码直接下载组件文件中，一是因为其他 module 和 component 肯定也要访问用户名信息，二是这提高了代码的耦合性——如果我们切换了存储机制，我们需要到处修改——所以我们要在这里引入 local storage service。除此之外，既然多个 module 需要读取同一信息，我们就要对键值 key 做出约定。
想清楚了，我们再开始写代码，在命令行中输入：
$ ng g s services/local-storage --module app然后在 local-storage.service.ts 中编码：
import { Injectable } from '@angular/core';
const ls = localStorage;
@Injectable()
export class LocalStorageService {
constructor() { }
public get<T>(key: string): any {
return JSON.parse(ls.getItem(key)) as T;
}
public getList<T>(key: string) {
const before = ls.getItem(key);
return before ? (JSON.parse(before) as T[]) : [];
}
public set(key: string, value: any): void {
if (!value && value === undefined) { return; }
const arr = JSON.stringify(value);
ls.setItem(key, arr);
}
}在 local-storage.service.ts 同目录下创建 local-storage.namespace.ts 文件（为了简化后面的教程，我这里就把后面会用到的键全告诉你了）：
export const GLOBAL_NAMESPACE = 'today.';
export const APP_INFO_NAMESPACE = GLOBAL_NAMESPACE + 'appInfo.';
export const INIT_FLAG = APP_INFO_NAMESPACE + 'initFlag';
export const START_USING_DATE = APP_INFO_NAMESPACE + 'startUsingDate';
export const USER_INFO_NAMESPACE = GLOBAL_NAMESPACE + 'userInfo.';
export const USERNAME = USER_INFO_NAMESPACE + 'username';
export const AVATAR_CODE = USER_INFO_NAMESPACE + 'avatarCode';
export const TODO_NAMESPACE = GLOBAL_NAMESPACE + 'todo.';
export const TODOS = TODO_NAMESPACE + 'todos';
export const LIST_NAMESPACE = GLOBAL_NAMESPACE + 'list.';
export const LISTS = LIST_NAMESPACE + 'lists';
export const SUMMARY_NAMESPACE = GLOBAL_NAMESPACE + 'summary.';
export const LAST_SUMMARY_DATE = SUMMARY_NAMESPACE + 'lastSummaryDate';
export const SUMMARIES = SUMMARY_NAMESPACE + 'summaries';在用 local storage 进行存储的时候使用命名空间是个最佳实践，命名空间可以是应用名加模块名等形式。
这样就搞定了 service 了，接下来写组件，在 setup.module.html 当中编写界面内容：
<div class="full-screen page-content">
<div class="wrapper">
<img class="logo-img" src="./assets/img/logo.png" alt="">
<div class="text-wrapper">
<h1 class="title-text">
Today
</h1>
</div>
<input nz-input placeholder="请输入你喜欢的用户名" #usernameInput [(ngModel)]="username">
<button nz-button [nzType]="'primary'" (click)="completeSetup()" [disabled]="!usernameInput.value">
开始
</button>
<div class="copy-right">
Copyright © 2018 Wendell Hu
</div>
</div>
</div>在 setup.module.ts 当中编写界面逻辑：
import { Component, HostBinding, OnInit } from '@angular/core';
import { LocalStorageService } from '../../services/local-storage/local-storage.service';
import {
USERNAME,
INIT_FLAG,
START_USING_DATE
} from '../../services/local-storage/local-storage.namespace';
import { getTodayTime } from '../../../utils/time';
@Component({
selector: 'app-setup',
templateUrl: './setup.component.html',
styleUrls: [ './setup.component.less' ]
})
export class SetupComponent implements OnInit {
username: string;
constructor(
private store: LocalStorageService
) {
}
ngOnInit() {
}
completeSetup(): void {
this.store.set(INIT_FLAG, true);
this.store.set(START_USING_DATE, getTodayTime());
this.store.set(USERNAME, this.username);
}
}完成（CSS 请自行编写，推荐使用 CSS 的各种预处理器）！你可以在这个界面输入用户名，点击按钮之后，你就能在 local storage 检视面板中看到有三个字段存储了值。
