这是什么？我适合阅读吗？

ng.ant.design/docs/introd…

NG-ZORRO 是由阿里巴巴阿里云和计算平台事业部的小伙伴为 Ant Design 开发的 Angular 版本，是一个适用于构建中后台应用的组件库。该系列文章是为 ng-zorro 的用户提供的教程项目 Today 的配套教程。如果你是新用户，想要了解一下 ng-zorro 的使用姿势，或者你是 Angular 初学者，想要通过一个项目来锻炼自己的开发能力，欢迎阅读。

目录和链接

本系列文章共有以下几篇（更新中）：

1. （本篇）项目简介，学习在项目中添加 ng-zorro，编写最简单的 setup（初始设置）界面

你可以点击下面的链接预览：

Today

点击下面的链接获取源代码：

today-ng

点击下面的链接获取按照行文顺序 commit 的源代码：

wendzhue/today-ng-steps

项目介绍

我们的教程项目要编写一个名为 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！

ng g m pages/setup
ng g c pages/setup --module pages/setup

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 {}

// ...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 { }

在我们开始写界面之前，先简单分析一下。显然，我们需要把用户名和初始化标记存入 local storage，也很显然，我们不应该把 localStorage.set 等代码直接下载组件文件中，一是因为其他 module 和 component 肯定也要访问用户名信息，二是这提高了代码的耦合性——如果我们切换了存储机制，我们需要到处修改——所以我们要在这里引入 local storage service。除此之外，既然多个 module 需要读取同一信息，我们就要对键值 key 做出约定。

想清楚了，我们再开始写代码，在命令行中输入：

$ ng g s services/local-storage --module app

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>

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 检视面板中看到有三个字段存储了值。