Angular 專案資料夾結構介紹 - 筆記長也NotesHazuya

Angular 專案資料夾結構介紹

2020-12-26 00:35:00   Angular

上一篇我們已經建立了一個專案,本篇介紹一下專案的資料夾基本結構。

Angular 專案目錄

  • .editorconfig :讓專案在不同的編輯上可以保持一致的程式風格
  • .git :Git版控資料夾,CLI建立專案時預設會加入版控。
  • .gitignore:Git版控忽略檔。
  • angular.json:angular CLI設定檔。
  • browserslist:讓 Angular 編譯器針對舊版瀏覽器(Ex. IE9-11)加上CSS前綴字。
  • dist/:編譯後的 JS 檔案會放置於此,專案建立時不會有此資料夾,需下編譯指令後才會出現。
  • e2e/ :E2E 測試程式放置的地方。E2E 測試是一種模擬使用者實際使用程式的測試方式。
  • karma.conf.js :Karma 設定檔,Karma 是一套單元測試工具。
  • node_modules/:npm 安裝之套件都放置於此。
  • package-lock.json:紀錄專案 npm 套件安裝的來源與版本號。
  • package.json:紀錄專案詳細資訊的說明文件,例如應用程式名稱、版本、描述、關鍵字、授權、相依套件, etc.
  • README.md:介紹專案的文件。
  • src/:主要的開發程式碼都會放置於此。
  • tsconfig.json 及 tsconfig.app.json:Typescript 編譯時的編譯設定檔。
  • tsconfig.spec.json :與 tsconfig.app.json 類似,不過是針對測試檔。
  • tslint.json:Tslint 設定檔,Tslint 是 Typescript 的格式驗證工具,可以檢查程式碼是否具有可讀性、可維護性和功能性錯誤。

src/ 目錄說明

  • app/:大部分我們篩寫的程式碼都放置於此,包含 Module、Component、Service 等。
  • assets/ :放置靜態資源的地方,例如圖片等多媒體檔案。
  • environments/:環境變數設定檔案放置處。
  • favicon.ico :網站小圖標。
  • index.html:整個網站的首頁與根頁面,也是 SPA 唯一一個頁面。
  • main.ts:CLI 打包時會把這檔案作為程式的主要進入點。
  • polyfills.ts:載入 Angular 應用之前,要預先載入的程式。
  • styles.css:整體應用程式使用的樣式表。
  • test.ts:與 main.ts 類似,但是用於測試檔。

這一篇基本上就這樣,雖然檔案很多但是後續會慢慢解說,基本上這一篇只是要大致上暸解整體專案在新增之後的架構而已。

下一篇就會開始寫 Angular 的程式囉!


長也

糾結當中的資管系學生,常碰PHP,喜歡進行網頁相關的設計,閒暇之餘就記錄一些筆記,紀錄自己的學習軌跡。