實例式探索Angular5最佳實踐

本文會在個人博客上動態更新實例式探索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），由於咱們只是添加了一些空文件夾，沒有修改任何的代碼。

未完待續