iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 5
2
Modern Web

Angular 深入淺出三十天系列 第 5

[Angular 深入淺出三十天] Day 04 - 資料夾結構說明

「我都裝好了!!接下來可以開始 Coding 了嗎?!」Wayne 把環境跟編輯器都安裝完之後,興奮地說。

「別急,你先開啟剛剛用 Angular CLI 建立的 HelloAngular 資料夾。」我笑而不語地說。

「哇!居然有這麼多檔案阿?!這些檔案都是要幹嘛的?」Wayne 打開資料夾之後,看到裡面居然已經產生了這麼多檔案有點驚訝地說。

「你看,都還沒搞清楚架構就想 Coding?!我跟你說...」


專案資料夾之結構說明

Imgur

打開用 Angular CLI 所建立出來得專案資料夾時,應該會看到如上圖所示之結構。說明如下:

  • .editorconfig - 這個檔案可以幫助開發人員在不同的編輯器和 IDE 之間更容易定義與維護一致的編碼樣式。(官方文件EditorConfig 快速使用指南

  • .git - Git 版本控制用的資料夾,Angular CLI 建立出來的專案,預設會加入版控。如果建立專案的時候不想要加入版控,可以加上 --skip-git 的參數來讓 CLI 不要將此專案加入版控。例如:ng new SampleProject --skip-git

  • .gitignore - Git 版本控制用的忽略設定檔。值得一提的是,就算在建立專案時加入 --skip-git 參數,此檔案也會被創建出來。

  • angular.json - Angular CLI 的設定檔。詳細說明可以參考 CK's Notepad 的 [Angular] Angular CLI - angular.json 檔說明,也可以參考隔壁棚 Angular 大師之路 的說明,都滿詳細的!

  • dist/ - 編譯且打包過後的程式碼會放在這裡。一開始其實並不會看到此資料夾,是我為了介紹結構的關係,才先下指令讓其出現。

  • e2e/ - E2E 測試 (End-to-End Testing) 的程式碼要擺放的位置。E2E 測試是使用程式來模擬實際使用者的操作來進行的一種測試方式。Angular 在 E2E 測試方面是使用自己特製的工具 Protractor。Angular CLI 在建立專案時也會連帶建立範例,有興趣的朋友可以自己玩玩看,後面如果我想不出要寫什麼篇幅夠的話,我再來分享怎麼寫 E2E 測試。

  • node_modules/ - 此專案所有依賴的套件經由使用 npm install 安裝後,都會擺放到這裡。說到這,或許你會覺得奇怪,我又沒有打過這個指令,為什麼會有這個資料夾?!其實 Angular CLI 在建立這個專案的時候,一併幫你處理好了。

  • package-lock.json - 這個檔案是當我們使用 npm install 安裝套件時所產生的文件,用以記錄當前實際安裝的套件的來源與版號。比較需要注意的地方可以點我參考,但我們目前安裝的 npm 版本已經不會有這個問題,請安心將其加入版控。

  • package.json - 這個檔案是用來定義我們這一包阿哩阿紮的東西是什麼的說明文件,像是應用程式的名稱、版本、描述、關鍵字、授權、貢獻者、維護者、腳本、相依的相關套件及其版本資訊等等,詳細請參考官方文件的說明。

  • README.md - 這個檔案是這個專案的說明文件,採用 Markdown 的語法。可以自由撰寫關於此專案的任何說明。

  • src/ - 主要在開發的所有程式碼都會放在這裡。

  • tsconfig.json - 這個檔案是 TypeScript 編譯時看的編譯設定檔。由於 Angular 預設是使用 TypeScript 來開發,所以當然少不了 TypeScript 需要的相關設定檔囉!想知道更詳細的內容請點我參考

  • tslint.json - 這個檔案是 TSLint 的設定檔。TSLint 是 TypeScript 的格式驗證工具,它可以檢查你寫出來的 TypeScript 的格式是不是具有可讀性、可維護性和功能性錯誤。

以上大多數檔案都是跟「設定」有關,初期我們不太會去修改到這些設定,頂多會在 package.json 檔裡修改或新增腳本,或是調整 angular.json 檔裡的某些設定。至於其他的設定,就再自己慢慢研究囉!


src/ 之結構說明

Imgur

至於在主要開發用的 src/ 底下:

  • app/ - 整個網頁應用程式的 Module、Component、Service 等等都放在這。其實整個專案除了 E2E 測試的程式碼之外,大概有九成九都是放這裡。

  • assets/ - 靜態資源放置處,如圖片。

  • browserslist - 檔案內其實有說明,大意就是 Angular 的編譯器會根據此檔案的設定來加上 CSS 的前綴,如果要支援 IE 9-11,記得要取消此檔案最後一行的註解。

browserslist 後來有調整檔案內容,如果讀者有發現檔案內容與敘述不一樣的話,請參考留言區 SuperMike 的留言。

  • environments/ - 環境變數設定檔放置處。建立專案時其實就有一併建立兩個檔案,environment.tsenvironment.prod.ts。全系統的環境相關變數都請在這兩個檔案裡設定。

  • favicon.ico - 瀏覽器的網址列、書籤、頁籤上都會用到的小 icon 圖檔。

  • index.html - 整個網頁應用程式的首頁與根頁面,也是 SPA 唯一的那一頁。

  • karma.conf.js - Karma 的設定檔。Karma 是一套單元測試工具,是以 Jasmine 測試為基礎,並會透過偵測我們的程式碼變更並進行測試。Angular CLI 在建立專案時,預設會使用此套工具。也用有人會改為使用其他工具如:JestMocha 來進行測試。

  • main.ts - Angular CLI 在編譯與打包的時候,把這支檔案裡的程式,當做整個網頁應用程式的主要程式進入點。一般也是不會去動到這裡的程式碼。

  • polyfills.ts - 這個檔案滿重要的,檔案內有說明。大意是指這個檔案主要是在載入 Angular 的程式之前,會預先載入的程式。裡面也有一些是如果需要支援較低版本的瀏覽器時,需要取消註解的程式。

  • styles.css - 整個網頁應用程式共用的樣式設定檔。

  • test.ts - 跟 main.ts 檔類似,不過主要是用在測試檔上。

  • tsconfig.app.json - 跟外層的 tsconfig.app.json 用途類似,在這個檔案裡也會看到有繼承外層的 tsconfig.app.json 的設定。

  • tsconfig.spec.json - 跟 tsconfig.app.json 用途類似,不過主要是針對測試檔。

  • tslint.json - 跟外層的 tslint.json 用途類似。

雖然跟 Angular 的專案初見面時,會有點好像很複雜的感覺。但隨著一層層地抽絲剝繭,希望可以讓大家對於 Angular 的專案結構有更進一步的了解,令大家在使用 Angular 時,能夠更知道 Angular 的各檔案的用意與用途。

錯誤更新記錄

  • 2019/05/28 11:30 - 非常感謝邦友 SuperMike 的提醒,增加 browserslist 的補充說明。

上一篇
[Angular 深入淺出三十天] Day 03 - 開發工具與環境建置
下一篇
[Angular 深入淺出三十天] Day 05 - Angular 小學堂(一)
系列文
Angular 深入淺出三十天33

2 則留言

0
scertgogo
iT邦新手 5 級 ‧ 2018-11-05 21:16:24

第一張圖放錯囉,放到src的去了

Leo iT邦新手 4 級‧ 2018-11-05 22:11:22 檢舉

真的耶!!! 怎麼都沒人發現><

我馬上改,非常感謝你!

1
SuperMike
iT邦新手 5 級 ‧ 2019-05-24 15:42:11

browserslist - 檔案內其實有說明,大意就是 Angular 的編譯器會根據此檔案的設定來加上 CSS 的前綴,如果要支援 IE 9-11,記得要取消此檔案最後一行的註解。

不知道Leo大大當時的內容是長怎樣,目前的內容已經改成

# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
#
# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed

> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11

所以已經不是取消註解,而是刪除not囉!

Leo iT邦新手 4 級‧ 2019-05-28 11:44:53 檢舉

Hi SuperMike,

非常感謝您的補充!已增加補充說明囉!^^

我要留言

立即登入留言