上一篇文章介紹了angular.json、package.json和 package-lock.json，讓我們繼續往下吧！

• node_modules
  

這邊會有上萬個檔案，所有的套件都安裝在這裡這個資料夾，了解資料夾的用途即可。

• src
  
  我們撰寫的所有程式碼都放在這個資料夾，我們在angular.json看到的程式進入點以及首頁，main.ts、index.html都放在這裡。

  • app
    之後撰寫的所有Conponent、Pipe、Service、Module...都會放在這個資料夾。預設是放AppModule和app-root的檔案，我們講到程式啟動流程時在來說明。
  • assets
    通常我們把素材放在這個地方，例如:圖片、其他人寫的css等。
    你會發現裡面有個 .gitkeep 檔案，因為我們很常使用git這個軟體來做版本控管，若是一個資料夾裡面沒有檔案，git就不會把這個資料夾推上遠端的repository，也就是儲存庫或是目錄。
    所以我們塞一個沒有內容的檔案，讓這個資料夾可以被上傳，這個檔案不一定要命名為.gitkeep，可以是任何的名字，命名為.gitkeep只是大家的一個習慣而已。
    有關git的使用，我們會在後續的文章介紹。
  • styles.css
    這邊可以定義自己的css，或是import他人的css，這個檔案是全域的，也就是可以被整個專案使用。
  • polyfills.ts
    
    當你的網站需要支援比較低版本的瀏覽器，比方說萬年IE，就可能需要來這邊改設定。
    舉例如果要讓NgClass支援SVG的話，我們就把下面這行取消註解：

  // import 'classlist.js';
  

  變成

  import 'classlist.js';
  

  並且按照它的提示，執行 npm install --save classlist.js 這個指令就可以了。

  • favicon.ico
    Angular預設的icon圖示，這個icon會顯示在瀏覽器，網頁標題的左方，如果想換成自己喜歡的icon，之後可以在index.html中設定。
    

  • environments
    這邊放的是環境變數，裡面有兩個ts檔environment.prod.ts 和 environment.ts，裡面各有一個變數environment。未來可以在這邊定義自己的環境配置。
    當我們下 ng build --configuration=production或ng build --prod 來部署網站時，environment.ts 會被置換成 environment.prod.ts，這些細節都定義在angular.json中。
    

  • test.ts
    這個檔案是使用karma做單元測試時才需要，我們日後有碰到單元測試時在介紹。

• .gitignore
  
  這是讓git看的檔案，這邊可以設定哪些檔案不要上傳到遠端目錄，例如:部署網站產生的/dist、存放套件的/node_modules資料夾、vscode的設定檔等，只要符合.gitignore裡的規則，這些檔案就不會被上傳。假設我在.gitignore加入*.txt，那所有的.txt檔，就都不會被上傳。要注意的是，如果你在檔案上傳後，才加入忽略規則，那麼這個檔案就不會被.gitignore裡面的規則限制。

• .editorconfig
  
  這是給編輯器看的一個檔案，為了在多人開發時，可以保持一樣的coding style，並且多數編輯器都能吃這個檔案。在 VSCODE 安裝 editorconfig　的 extentions 就能使用：
  
  root = true表示這是最外層的.editorconfig。第四行的[*]表示所有檔案都會符合下面的規則，一直到下個[ ]出現為止，依序是設定：
  charset 檔案編碼
  indent_style 使用空格縮排
  indent_size每次縮排兩個字元、
  insert_final_newline 在檔案結尾加入換行
  trim_trailing_whitespace 去除行尾多餘的空白
  max_line_length 每行長度上限
  大家可以試試看把indent_size改成其他數字後儲存，並切換到其他檔案，右下角的「空格」應該會跟著改變。
  

• browserslist
  
  我們有時會在各瀏覽器發生語法不相容、css被要求加入prefix等狀況，為了適應各種瀏覽器，而把各家的語法都寫過一遍，實在非常麻煩，browserslist就幫忙了解決這個問題。
  例如：我在style.css中自訂了css：
  
  然後把not IE 9-11的not刪掉，讓其可以支援IE11，再執行ng build --prod進行部署，就可以看到我們輸出的css被加入display:-ms-flexbox;這行。
  
  browserslist 可以設定你要支援哪些版本的瀏覽器。先用command line執行 npx browserslist，會列出目前設定所支援的瀏覽器版本，這些設定本身是甚麼意思呢：
  > 0.5% 支援所有使用率大於 0.5% 的瀏覽器
  last 2 versions 支援所有瀏覽器最新的兩個版本
  Firefox ESR 支援最新版的 Firefox ESR瀏覽器
  not dead 不支援超過24個月沒有更新的瀏覽器版本
  not IE 9-11 不支援IE9、IE10、IE11

• karma.conf.js
  這是單元測試karma的設定檔，當要做單元測試時，我們再來研究。

• e2e
  這個資料夾存放end-to-end測試的程式碼，也就是從使用者端出發，到真實系統的整合測試，用的是protractor這個套件，我們需要做end-to-end 測試時再來研究。

• tsconfig.json
  這是給typescript compiler看的文件。typescript compiler負責把typescript編譯成javascript(ECMAscript)，讓瀏覽器能閱讀，也為了因應舊版瀏覽器不支援太新的語法，我們可以設定 target這個參數，編成es2016、es2015等更舊的javascript語法。或是想支援較新的語法，例如ES7的Decorator，就可以設定"experimentalDecorators": true等等。

• tslint.json
  tslint是個檢查coding style的套件，tslint.json可以寫很多的規則，例如下面這段：
  
  因為沒有良好的空格習慣，所以被tslint抓出來了。
  或是我們試著加入一條規則。由於===會連同變數型別一起檢查，相較之下會比==安全。加入一條規則，要求使用三個等號檢查兩邊變數是否相等：
  "triple-equals": true
  只寫兩個等號，馬上就被tslint抓到：
  
  tslint也可以限制變數命名規則、逗號後一定要空格等等。由於設定非常多，我們之後再詳細介紹。

以上檔案目錄的簡介，有一些講的不夠詳細的檔案，我會再另外用其他文章講解。