適合Angular初學者的小項目

Note：這個項目只適合初學者，對 Angular 熟悉的能夠跳過。

相信不少Angular初學者在學習過程當中都閱讀過成熟開源項目的代碼，好比：ngx-admin，primeng。這些項目，內容豐富，結構良好，惟一的缺點就是太大了，新手剛接觸的時候會比較懵，不知道如何下手。

我當初也有過這樣的經歷，突擊學習 Angular 一個月而後作項目，過程當中的血和淚再也不細表。學習過程當中，折騰我最久和讓我印象最深入的地方有兩點：

1. 如何引入第三方插件庫
2. 如何理解和使用路由

第一點，我之前在 SegmentFault 上問過這個問題 Angular 4.X版本如何引入第三方JS的庫，已經有了很好的回答，這裏就再也不贅述。

第二點纔是我這篇文章的目的，我將真實項目中的結構簡化抽取出來，着重於演示切分頁面使用路由，寫了一個簡單易懂，對初學者比較友好的，很容易理解並模仿的小項目 HW-admin。

主界面以下：

很典型的企業應用，此項目遵循 Angular 推薦的結構規範，層次清晰明瞭，也包括懶加載，預加載等功能。主要的樣式暫時使用 Bootstrap，將一些經常使用的第三方庫封裝進來，好比 jQuery，Echarts等。

代碼量不大，結構也很簡單，假如看過以後理解了，寫相似項目的佈局應該是垂手可得的事情。

熟悉 Angular 的小夥伴假如對移動端開發感興趣的，我推薦下 ionic ，基於 Angular 的， 能夠看我另外一個ionic 小項目 hw-basic。

歡迎 fork 和 star