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

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