ng-zorro/today-ng-steps

:raising_hand: 一步步学习 ng-zorro-antd

Today 学习指南

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

项目介绍

我们的教程项目要带大家编写一个名为 Today 的待办事项应用，该应用主要包含的几个界面以及各个界面包含的主要功能如下：

• 主界面 main
  • 提供最基本的增加、删除、重命名清单和待办事项的功能
  • 支持改变待办事项的排序方法
  • 提供“建议”帮助用户确定今天（或者说接下来）要做的事情
  • 支持移动待办事项到其他列表
• 待办详情界面 detail
  • 展示和修改待办事项的标题、截止时间、计划时间、详情、是否需要提醒等等
• 总结界面 summary
  • 帮助用户记录他们每一天完成任务的情况，并且通过日历的形式进行展示
• 初始化界面 setup
  • 用户在这个界面输入用户名，然后才能使用 Today
• 设置界面 setting
  • 让用户能够修改用户名

你可以点击这个链接预览项目的最终成果。

目录和连接

本系列文章共有以下 5 篇：

1. 项目简介，学习在项目中添加 NG-ZORRO，编写最简单的 setup（初始设置）界面
2. 编写 main（主）界面左侧的 left-control
3. 编写 main 界面右侧的 right-control，实现排序和建议功能
4. 编写 detail（待办事项详情）界面，设置路由跳转和动画、路由守卫
5. 编写总结界面和设置界面、体验优化、体验发布流程，进一步练习的一些建议

我们的代码是按照文章的顺序 commit 的，所以你可以 checkout 各个 commit，在读完一篇的时候比较你的代码和我们的提供的代码。

构建指导

这个项目的构建方式和一般的 Angular 没有任何不同！而且我们为你准备好了发布脚本，一行代码就能把你的项目发布在 GitHub Pages 上，但是我们还是推荐你去搞懂 404.html 这个文件和我们的脚本都做了什么。

$ ./publish.sh # 输入我就能发布！

学习建议

该系列教程面向已经有一定经验的前端开发者，如果你满足以下的几个条件，应该就能比较顺利地完成：

• 你对 TypeScript 有一定的使用经验，至少读过文档
• 你完成了 Angular 官网的入门教程（英雄教程），了解 Angular 项目的基本结构，以及常见 API 和 angular-cli 的使用（我在写文章的时候把这作为大家都知道的背景知识）
• 习惯通过阅读文档和搜索独立解决问题
• 由于面向的是比较有经验的开发者，所以除了设计层面的一些考虑之外，文章基本不会对代码做出解释，而这也是一个锻炼你的代码和文档阅读能力的好机会（希望代码写的没糟糕到你不能明白它们 在做什么）！我们希望你在阅读文中代码，了解其大意的基础上自行完成编码，这比对着文章打字或者复制粘贴能够带来更好的学习效果（如果你在读文章的时候发现有一些代码没有贴出——这并不是我们的疏忽！）。

如果你尚不具备这些基础，请先掌握它们再来，这样的学习效果才最好。

如果你对 Angular 或者是 RxJS 有不明白的地方，除了去看它们的文档之外，NG-ZORRO 专栏的一篇文章也能帮到你的忙。

如果你在写代码的时候遇到了问题，请按下面的顺序尝试解决：

1. 看 console 中的报错
2. 在 Angular 的文档中寻找线索
3. 阅读我们提供的源码，看看哪里有不同
4. Google，Stackoverflow 之
5. 浏览 ng-zorro 的 issue，看是否有人遇到过同样的问题
6. 给我们团队的一位成员发邮件 [email protected]，清晰地陈述你遇到的问题，最好带上详细的截图

深度参与

完成了项目之后感到意犹未尽吗？欢迎深度参与这个教程项目。你可以提交 PR 来丰富我们在最后一篇文章中提到的功能，详情请查看这个 issue。你的代码通过 review 之后，将会成为项目的一部分，供更多的人进行更深度的练习。

---

准备好了吗？欢迎开始这段学习旅程，希望你能享受到用 Angular + NG-ZORRO 进行开发的乐趣！

today-ng-steps's Issues

下面这个函数使用<T>有什么好处? 返回类型不是 any吗?

第一篇的localStorage的service

public get<T>(key: string): any {
    return JSON.parse(ls.getItem(key)) as T;
}

安装命令缺少

官方实战教程安装项目的命令

$ ng new today-ng
$ cd today-ng
$ ng add ng-zorro-antd

如果没有先执行 cnpm install --save ng-zorro-antd 而直接执行 ng add ng-zorro-antd，则会提示Could not find module "ng-zorro-antd"

环境和版本说明

1. npm 版本和 angular 更新地也太快了，还有很多依赖
2. 装起来真麻烦，npm 的提示可真乱啊，什么时候能稳定一点啊

欢迎提交 PR 来丰富 Today 的功能

⚠️⚠️⚠️ 请不要在这个 issue 中提问题，提问题请开新 issue ⚠️⚠️⚠️

在系列教程的最后的一篇文章中, 我们提到了一些可以作为进一步练习的功能点:

• 头像设置
• 以月为单位总结用户的待办事项完成情况
• 标记待办事项完成时的提示音
• 隐藏已经完成的项目 @tirelyl
• 标签 @tirelyl
• 显示用户所在位置的天气（甚至根据天气推荐适合今日做的待办事项，或者不推荐做的！）
• 可变主题（根据当前的时间选择对应的主题是个不错的主意）
• 通知（我们做了开关，但是还没有实现这个功能）
• 部分功能在 setting 界面的可配置

我们现在开放 PR 来丰富 Today 的功能. 如果你感兴趣的话, 可以在完成教程之后尝试实现其中的一个或几个. 通过了我们的 review, 你的代码将会成为这系列教程的一部分, 可以被其他的人学习. 我们还会将你的 ID 添加到 CONTRIBUTOR.md 文件中.

当你打算实现其中某个功能的时候, 请先在这个 issue 里声明你在做这个, 避免他人的重复劳动.

当你想要提交 PR 之前, 请在 GitHub Pages 上部署好这个项目, 方便预览. 如果你觉得你有必要解释一下你的代码给后面学习的人, 请写一个 markdown 文件.

如果你想到了其他的好功能, 请随意提 issue 说你想要添加某个功能.

已经完成的声明会被收起, 以方便他人阅读.

---

另外, 还有以下任务可以完成:

• 利用 NG-ZORRO 提供的 Drawer 组件替换实现详情页时自己实现的侧边栏
• 添加常用快捷键 (你可以写一个 ShortcutService)
• 增加对所有表单的输入验证, 你也可以用 ReactiveForm 来重写所有的表单
• Todo 列表改变的时候 Checkbox 会闪烁
• Todo, List 支持多选批量操作

大挑战:

• 将 today-ng-steps 移植到 Electron 平台上 (存储, 通知, 快捷键等机制都需要做出修改)

if (!value && value === undefined) { return; }

在 local-storage.service.ts 里面

这句写错了吧？判断既不是null也不是undefined，直接写就行了吧？

Detail 界面 DatePicker 的宽度异常

如图所示, 应当占满宽度, 右边和分割线平齐.

the sort function of todocomponent doesn't work

the sort function of todocomponent doesn't work

Wrong file name in today-ng tutorial

I think it should be setup.component.html instead of setup.module.html ?
我觉得这里应该是setup.component.html而不是setup.module.html把?按照命令自动生成的话

这块应该是!==吧

today-ng-steps/src/app/services/list/list.service.ts

Line 41 in 8354dbe

if (index === -1) {

第一章初始化local-storage时--module app无法使用

将--module app删除可正常工作

node-version: 12.12.0-1
os-version: 5.6.3-2-MANJARO
npm-sersion: 6.14.4-1
ng-vserion: 9.0.1

能请问下assets中要用的一些svg图片怎么源码中没有了

在IE11下右键菜单的位置不对

在IE11下右键菜单的位置不对

2019 年更新计划

App

• 更新到 8.0.0 之后版本的 ng-zorro-antd
• 使用 ng-zorro-antd 提供的更多新组件和特性
• 增加国际化内容
• 在 app 中添加版权信息和贡献者列表
• #2 中提到的其他功能
• 测试
• 使用 Now 进行部署

教程

• 教程的 2.0 版本
  • 覆盖更多主题，使得内容更为全面
  • 更新图片 (由于上传过知乎服务器, 图片被压缩了)
  • 更多的功能, 比如用户登录和注册, 基于 firebase 的多端同步

待计划

• 接入 Firebase 以打造多端同步功能
• today-ng-mobile, today-ng-steps 的 mobile 版本, 基于 ng-zorro-mobile 和 ionic, 能够和 today-ng-steps 同步待办事项

文档

• 整理贡献者清单，重新撰写 README

周边工具

• Angular Extension Pack，一个 vscode 扩展包，帮助使用 vscode 的用户安装必要插件

---

@wendzhue 2019

PS：最近有点忙……十月份开始陆续更新

Tutorial translation

At least we should translate this tutorial into English.

建议修改文章内容，与当前版本ng-zorro和angular保持更新

希望作者能够明白这样做对于新手的好处，新手希望通过这篇文章快速上手ng-zorro 而不是因为版本的缘故卡在bug中，在此基础上能够希望作者考虑我的提议

请教layout固定头部的问题

layout固定头部后，content如有表单或卡片，且有垂直滚动，头部会被覆盖，请问这个如何解决？谢谢！

ngModel error

<input nz-input placeholder="请输入你喜欢的用户名" #usernameInput [(ngModel)]="username">

报错：Can't bind to 'ngModel' since it isn't a known property of 'input'.

app.module.ts中已经导入了FormsModule并添加进了NgModule中。

按照指引文件有错，如何解决

在指引文件中，ervices/local-storage --module app，执行这一步的时候，会报错：
Unknown option: '--module' Unknown option: 'app' ，
即便我尝试添加flat也依旧如此。
这个问题该怎么解决呢

Todo 列表闪烁

在切换 list 的时候, 即使两个 list 下同顺序的 todo 是相同的, 也会重新渲染而导致闪烁.

小提示: 使用 ngFor 的 trackby 指令.

ng add ng-zorro-antd执行报错，报下载下来了，但是没有把配置文件和APModule修改

Excute： ng add ng-zorro-antd
错误提示：
Installing packages for tooling via npm.
undefined does not have an architect configuration
查看package.json
"ng-zorro-antd": "^1.5.0",是安装了的，是需要手动去配置APPModule么？

国际化

现在 ng-zorro-antd 是完全中文的.

ng add ng-zorro-antd 执行报错（最新版angular cli 14.0.1，改13也不行）

$ ng add ng-zorro-antd
ℹ Using package manager: npm
⚠ Unable to find compatible package. Using 'latest' tag.
⚠ Package has unmet peer dependencies. Adding the package may not succeed.

The package [email protected] will be installed and executed.
Would you like to proceed? Yes
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/animations
npm ERR!   @angular/animations@"^14.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/animations@"^13.0.1" from [email protected]
npm ERR! node_modules/ng-zorro-antd
npm ERR!   ng-zorro-antd@"13.2.2" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/circle/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/circle/.npm/_logs/2022-06-14T04_36_03_626Z-debug.log
✖ Packages installation failed, see above.

教程 2.0 版写作计划

自从本系列教程的 1.0 版本发布以来，ng-zorro-antd 已从 1.1.0 升级到 8.3.x，新增了大量组件和实用功能，一些老的写法也被逐渐废弃，Angular 也已从 6 升级到 8，因此原本的教程已经不足以反映 ng-zorro-antd 的强大功能，也会给如今的 Angular 初学者造成理解上的困难。因此我们启动了 2.0 版本的写作计划，目的在于：

• 更新到 Angular 和 ng-zorro-antd 最新的 API，遵循最佳实践
• 使用 ng-zorro-antd 提供的一些进阶功能，帮助读者更深入地掌握该组件库
• 丰富 Today 应用的内容
• 降低教程的学习门槛，对于新手常会遇到的问题给出详细的链接以备学习，使得这套教程也可以作为 Angular 的入门教程
• 提供进阶阅读部分，帮助读者更深入地理解 Angular 和 ng-zorro-antd

内容计划

共分为以下 xx 课（暂定）：

• 1 开发环境、项目介绍、使用 ng schematics 创建项目脚手架
• 2~6 按照之前的节奏编写各个页面（应用 ng-zorro-antd 的新组件）
• 7 使用 global config 实现应用选项功能
• 8 天气功能
• 9 PWA 支持
• 10 Angular 应用的部署

代码

我会先将项目完整的代码推送到 master 分支，然后将按章节 commit 的代码和教程文本推送到 2.0.0 分支。

相关链接

• 2019 更新计划