Angular 實戰教程 - Today 系列文章目錄
來自專欄 NG-ZORRO
16 人贊了文章
項目預覽
這是什麼？我適合閱讀嗎？
http://ng.ant.design/docs/introduce/zh
NG-ZORRO 是由阿里巴巴阿里雲和計算平台事業部的小夥伴為 Ant Design 開發的 Angular 版本，是一個適用於構建中後台應用的組件庫。該系列文章是為 NG-ZORRO 的用戶提供的教程項目 Today 的配套文章。
如果你想要了解一下 NG-ZORRO 的使用姿勢，或者你是 Angular 初學者，想要通過一個項目來鍛煉自己的開發能力，歡迎閱讀。
目錄和鏈接
本系列文章共有以下 5 篇：
- Angular 實戰教程 - 手把手教你構建待辦事項應用 Today (Part 1)：項目簡介，學習在項目中添加 NG-ZORRO，編寫最簡單的 setup（初始設置）界面
- Angular 實戰教程 - 手把手教你構建待辦事項應用 Today (Part 2)：編寫 main（主）界面左側的 left-control
- Angular 實戰教程 - 手把手教你構建待辦事項應用 Today (Part 3)：編寫 main 界面右側的 right-control，實現排序和建議功能
- Angular 實戰教程 - 手把手教你構建待辦事項應用 Today (Part 4)：編寫 detail（待辦事項詳情）界面，設置路由跳轉和動畫、路由守衛
- Angular 實戰教程 - 手把手教你構建待辦事項應用 Today (Part 5)：編寫總結界面和設置界面、體驗優化、體驗發布流程，進一步練習的一些建議
你可以點擊下面的鏈接預覽項目的最終成果：
Today點擊下面的鏈接獲取按照行文順序 commit 的源代碼：
wendzhue/today-ng-steps
項目介紹
我們的教程項目要帶大家編寫一個名為 Today 的待辦事項應用。
該應用主要包含的幾個界面以及各個界面包含的主要功能如下：
- 主界面 main
- 提供最基本的增加、刪除、重命名清單和待辦事項的功能
- 支持改變待辦事項的排序方法
- 提供「建議」幫助用戶確定今天（或者說接下來）要做的事情
- 支持移動待辦事項到其他列表
- 待辦詳情界面 detail
- 展示和修改待辦事項的標題、截止時間、計劃時間、詳情、是否需要提醒等等
- 總結界面 summary
- 幫助用戶記錄他們每一天完成任務的情況，並且通過日曆的形式進行展示
- 初始化界面 setup
- 用戶在這個界面輸入用戶名，然後才能使用 Today
- 設置界面 setting
- 讓用戶能夠修改用戶名
學習建議
該系列教程面向已經有一定經驗的前端開發者，如果你滿足以下的幾個條件，應該就能比較順利地完成：
- 你對 TypeScript 有一定的使用經驗，至少讀過文檔
- 你完成了 Angular 官網的入門教程（英雄教程），了解 Angular 項目的基本結構，以及常見 API 和 angular-cli 的使用（我在寫文章的時候把這作為大家都知道的背景知識）
- 習慣通過閱讀文檔和搜索獨立解決問題
由於面向的是比較有經驗的開發者，所以除了設計層面的一些考慮之外，文章基本不會對代碼做出解釋，而這也是一個鍛煉你的代碼和文檔閱讀能力的好機會（希望代碼寫的沒糟糕到你不能明白它們 在做什麼）！我們希望你在閱讀文中代碼，了解其大意的基礎上自行完成編碼，這比對著文章打字或者複製粘貼能夠帶來更好的學習效果。
如果你對 Angular 或者是 RxJS 有不明白的地方，除了去看它們的文檔之外，NG-ZORRO 專欄的一篇文章也能幫到你的忙：
VTHINKXIE：Angular資料獲取不完全指南
如果你在寫代碼的時候遇到了問題，請按下面的順序嘗試解決：
- 看 console 中的報錯
- 在 Angular 的文檔中尋找線索
- 閱讀我們提供的源碼，看看哪裡有不同
- Google，Stackoverflow 之
- 瀏覽 ng-zorro 的 issue，看是否有人遇到過同樣的問題
- 給我發郵件 wendzhue@gmail.com，清晰地陳述你遇到的問題，最好帶上詳細的截圖
準備好了嗎？歡迎開始這段學習旅程，希望你能享受到用 Angular + NG-ZORRO 進行開發的樂趣！如果對這一系列文章有意見或建議，歡迎在本篇的評論區留言。
推薦閱讀：
※Web前端知識體系梳理
※Angular 實戰教程 - Today (Part 3)
※MVVM基本實現
※打破JS特權——CSS動畫