資料夾結構


Posted by wayne201299 on 2023-09-20

一般的Angular專案結構大致上會長這樣

以幾個開發主要會碰到的檔案來解說

  • .vscode - vscode設定,在多人開發下,非常需要統一大家的寫作風格,不然光是排版就可以搞很久了
  • node_module - npm 套件包,所有透過npm安裝的library都會集中放置在此
  • projects - 專案中的專案,看需求建立,monoRepo架構可以使用
  • src - 專案中最重要的source code都集中於此,包含Layout、商業邏輯...,一般都是集中在此開發
  • .gitignore - 不希望被git管控的副檔名設定
  • angular.json - Angular專案的設定檔,包括了專案架構跟一些環境設定
  • package.lock.json - npm 安裝後產生的暫存檔,可以上傳成共用統一套件版本
  • package.json - 設定了所有第三方套件的版本,node js透過npm安裝時會先讀取專案下的設定檔,並依照設定安裝對應的套件包
  • tsconfig.json - TypeScript config,如同其名,是用來設定TypeScript的檢查標準

再來從src資料夾一步一步解析

  • app - application,意思就是所有的應用程式內容source code會在這裡
  • assets - 放置一些圖片、icon或是靜態檔案供讀取
  • enviroment - 環境設定檔,環境變數
  • favicon.ico - 網站icon
  • index.html - 初始頁面
  • main.ts - controller 出發點
  • polyfill.ts - 不會動到,可以讓APP在不同瀏覽器下運行
  • styles.scss - 最上層的CSS,CSS權重相對高

有了以上的基礎後,至少有個概念知道要動哪個檔案


#Angular







Related Posts

Client Side Rendering(CSR) 的缺點與優化

Client Side Rendering(CSR) 的缺點與優化

React 基礎:Function component vs Class component

React 基礎:Function component vs Class component

form 表單

form 表單


Comments