本文會在我的部落格上動態更新例項式探索Angular5最佳實踐
引言
作為一個曾經的新手，我深知在面對無比龐大的Angular體系時，我曾經最需要的是什麼。
不是Angular是什麼，這在Angular的官網上已經說得很清楚了。
不是Angular與其他框架（React、Vue、Riot、Knockout、Ember等）有什麼不同，這在網上有很多好的相關文章，例如Vue官網上的這篇對比其他框架。
不是一個簡單的例項教程，就像官網上的Tour of Heroes，這個例項太簡單了，看完了對我寫實際專案也沒什麼實質性幫助。
不是一個完整的沒有教程的專案，這在Github上一搜一大堆，但對曾經處於新手的我來說，完全就是一臉懵逼，完全無從下口。這就好像你給了我一臺冰箱，然後又給了我所有制作冰箱的工具和原材料，可我還是不知道怎麼做出一臺好的冰箱啊。
我當時最需要、最想要的是什麼呢？
一個完整的專案，一個能有完整製作過程的完整專案。看完了，我能夠快速的搭建自己的專案，而且這個專案最好組織結構能好點（別怪我心太野，我當時真就是這樣想的）。
所以，我當時想找的不是是什麼、為什麼而是怎麼做。
這可能和很多人的想法有點相悖，覺得你不知道了解其本質，你永遠是小白。但在這個前端技術更新快、專案工期緊的前提下，我真的就想能先找到一個能先製作出成品的菜譜。
其實這和泡妞是一樣的，我需要一個人能手把手的先教我怎麼去追到一個女生，在追女生的過程中，我可以去慢慢學習一些技巧，後期再深化。不然我空有妞不知道怎麼勾兌，或者空有滿腔泡妞技能，卻沒妞，再或者有妞和一點點淺嘗輒止的泡妞教程，這些都讓我很難把到妹。
因此，我就想寫這一篇可能會很長很長的教程，希望對有我曾經困惑的同學一點幫助，哪怕是能幫助到一個人，那也是極好的。
我的環境
| 名稱 | 版本 |
|---|---|
作業系統 |
Windows10企業版 |
Node |
9.2.0 |
Npm |
5.5.1 |
IDE |
WebStorm2017.1.4 |
瀏覽器 |
60.0.3080.5（正式版本） |
angular/cli |
1.5.4 |
目標
以ngx-admin為藍本，實現一個類似於英雄聯盟英雄資料庫的管理系統。
初始化專案
我使用Angular CLI作為腳手架。
讓我們先全域性安裝1.5.4版本的Angualr CLI。
npm install -g @angular/cli@1.5.4複製程式碼如果安裝成功，在你的控制檯輸入ng version指令，你將得到Angular CLI的相關版本資訊。
在你的控制檯下切換到你喜歡的一個碟符下(我的是D:\workspace\Bangood>)建立專案。
輸入如下指令(我建立的專案名叫HYP2017)：
ng new HYP2017複製程式碼根據網路環境的不同，這個專案初始化過程所需時間也不同。
當初始化結束後，我們就切換到我們的專案目錄（我的是D:\workspace\Bangood\HYP2017>)。
好，這個時候，我們就已經完成了我們的第一步，初始化了一個基本的專案，以上步驟官網的QuickStart更詳細。
讓我們使用如下命令來看看效果，獲得一點微乎其微的成就感吧。
ng serve --open複製程式碼稍等片刻，你的瀏覽器應該就會自動開啟http://localhost:4200/這個頁面，如果你在你的瀏覽器裡看到了以下頁面，那麼恭喜你，你已經邁出了我們的第一步。
圖1
照搬ngx-admin的目錄結構
既然我們是以ngx-admin為藍本，那麼我們就先把它專案中最基本的東西複製過來。
我們先複製它的目錄結構，我們現在主要需要的是src目錄下的內容。
對比一下我們已有的專案結構，和ngx-admin的專案結構，想想有什麼不同（就算想不出也沒關係，這太正常不過了）。二話不說，先把資料夾建起，裡面的檔案先不管，當我們用到的時候，再逐一新增，這樣好讓我們能循序漸進的瞭解怎麼完成這麼一個專案。
你看，我不知道花了多少分鐘，非常操蛋的一個一個把資料夾建立完了，我之所以一個一個的建立是因為，我剛剛看了些英文文件，看得頭有點脹，所以這樣無聊的放鬆下，又可以對ngx-admin有一個最最基本的認識。
圖2
其實建立的這些資料夾在以後我們可能很多都用不到，那就等以後再刪除吧。ps:在這裡可能會有睿智（懶）的程式設計師把
ngx-admin專案克隆到本地，然後用指令碼刪除裡面的所有檔案只留資料夾，再將資料夾拷貝到我們的專案下（這算我能想到的比較懶得方式了，不知道諸位還有什麼更懶得方式來複制資料夾目錄結構）。這個時候我們再看我們的瀏覽器頁面，是沒有任何變化的（見圖1），因為我們只是新增了一些空資料夾，沒有修改任何的程式碼。