環境架設

資料結結構介紹

root/

• .editorconfig - 統一編輯樣式設定（官方文件、EditorConfig 快速使用指南）

• angular.json - Angular CLI 的設定檔。詳細說明:  CK's Notepad 的 [Angular] Angular CLI - angular.json 檔說明、 Angular 大師之路 

• karma.conf.js - Karma 的設定檔。Karma 是一套單元測試工具，是以 Jasmine 測試為基礎，並會透過偵測我們的程式碼變更並進行測試。

• node_modules/ - 此專案所有依賴的套件。

• package-lock.json - 用以記錄當前實際安裝的套件的來源與版號。

• package.json - 應用程式的名稱、版本、描述、關鍵字、授權、貢獻者、維護者、腳本、相依的相關套件及其版本資訊等等，詳細請參考官方文件的說明。

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

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

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

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

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

root/src/

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

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

• browserslist -大意就是 Angular 的編譯器會根據此檔案的設定來加上 CSS 的前綴

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

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

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

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

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

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

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