AngularJS 2 Day3 了解Angular2專案架構

這一章節主要會帶各位認識一下當我使用Angular CLI 指令產生出的專案

到底這麼多專案中分別代表什麼意義呢?

首先,各位在前一章中了解到了常用的CLI指令大概有哪些

其中,我們透過 ng new "專案名稱" 來建置我們的專案

這時候我們的專案大致上會長這個樣子:

有沒有發現到,我們之前僅輸入短短的一行指令,我們的Angular CLI 就幫我們完成了許多事情

因此CLI真的是一個很棒的東西,還記得筆者剛初學的時候,因為還不了解,一直覺得為什麼不CDN就好

非得要透過指令來編寫程式,直到後來發現CLI強大的地方,筆者的問題自然也就煙消雲散

回歸到我們的專案目錄上,會發現在目錄中幫我們創建了許多資料夾以及檔案

到底這些檔案在做什麼用呢?

e2e

e2e這個資料夾主要用來存放end to end的測試案例,關於測試相關的設定,則是存放在/protractor.conf.js這個檔案中。

因此我們可以透過ng e2e指令來進行end to end的測試。

不過由於我們暫時不會使用到這功能,因此就不在這邊多做攢述

node_modules

在一開始各位使用npm進行安裝的時候,會經過一陣漫長的等待,為什麼會那麼久呢?主要原因在於CLI幫你安裝了各種套件在node_modules裡面

因此需要大量的時間,而在下一篇我會講解如何加快CLI安裝的時間。

src

這應該就不用多說了,所有專案你要撰寫的地方都是在這裡。

.editorconfig

這個檔案主要是讓我們的IDE 知道我們的程式碼是怎麼撰寫的,包括風格等等。

不過我們目前不需要用到此功能因此也不多在攢述。

.gitgonre

這個檔案主要是存放git相關的檔案,有使用過git的人應該就不陌生了。

angular-cli.json

給Angular CLI看的設定檔,基本上就是一些目錄及打包程式時的設定。

另外如果有需要引入額外的程式庫(Bootstrap、JQuery等),都可以在這個檔案中設定。

karma.conf.js

這格檔案主要是在針對unit test使用的測試框架,因此相關設定都會寫在這裡。

如果需要要進行unit test時,可以使用ng test指令來幫助我們執行。

tslint.json

用來針對TypeScript的程式撰寫風格進行規範的設定檔,我們也可以透過TSLint來檢查TypeScript的coding style,只要執行ng lint來檢查就可以了。

以上文章敘述如有錯誤及觀念不正確,請不吝嗇指教:)

有任何家教、案子 或技術相關問題 請都歡迎聯繫我

http://www.zhenghui.idv.tw/