這邊我會比較詳細介紹檔案目錄，可能會有點無聊，但是希望大家在開始寫code前都能稍微了解目錄下每個檔案及目錄的功能。

你看到了，用 Angular-CLI，下幾個 command，馬上可以建立一個基本的專案。

我們來看看 Angular 幫我們建立了哪些檔案吧！

你可以在目錄下用 command line 下這個命令:

dir

他會幫你列出你目錄下有哪些東西，有標<DIR>的就代表他是個 directory 。

或是我們可以用比較舒服的方式來看檔案目錄，用 VSCODE 開就好了：

Angular-CLI幫我們包了蠻多東西進來，我們先從比較重要的開始介紹：

• angular.json

這是Angular專案的設定檔，裡面有非常多的參數，這個檔案用 Json 格式儲存。
json格式基本上就是一對一的儲存格式，一個 key 搭配一個 value ，對 json 格式不熟的朋友可以參考wiki進一步了解。
我們來看一些比較簡單的:

• "root": ""
  定義根目錄的位置
• "sourceroot": "src"
  定義原始碼(Source code)目錄的位置，Source code 我們會簡寫為src。
• "outputPath": "dist/Sponge-Website"
  定義程式碼打包後會存放的位置。
• "index": "src/index.html"
  定義網站首頁的位置。
• "main": "src/main.ts"
  定義程式的進入點。
  其他還有像configurations底下的參數，如：

"serve": { "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "Sponge-Website:build"
          },
         },
"test": { ...
        }

這些是定義給Angular-CLI看的，也就是你在下ng serve、ng test這些命令時會參考這邊的配置，我們遇到要更改時再回來研究即可。

• package.json
• package-lock.json

由於我們使用npm做套件管理，所以目錄下會有package.json、package-lock.json這兩個檔案。

我們先看package.json

這個檔案原先是為了套件的開發、發佈而設計的，所以 name 跟 version 這兩項資訊一定不能為空，其中還有許多欄位像 description 、license 在這邊都被拿掉了，有興趣的朋友可以自己下 npm init ，建一個新的npm專案自己玩玩看。

• scripts
  再來是scripts欄位，這邊可以客製化你想要的npm command，舉例我們開測試server的命令：

ng serve

由於我們這邊有定義了 "start": "ng serve" ，所以當我們下了這個指令：

npm start

就會幫我們執行ng serve這個命令，另外如果你專案底下的 Angular-CLI 版本，跟安裝在本機的 Angular-CLI 版本不同時， ng serve 會執行本機的版本， npm start 則是執行專案底下的版本。這邊是 scripts 主要的用途。

• private
  這個參數設成 true 時，可以避免這個package不小心被發佈到npm上。

• dependencies

• devDependencies
  由於我們開發時用到的package、模組非常多，如果移植專案時，要把所有檔案一起複製，或是上傳版本控管系統，非常浪費時間。所以通常在專案移植、或是clone他人的專案時，只要下npm install，就可以建立好原先的環境了。
  因此這邊就是用來記錄這個專案底下用的所有套件，我們稱它為相依性(dependency)，dependencies 和 devDependencies的差別在於， devDependencies下的套件，只有在開發專案時才會用到，因此做出區分，當我們用 npm install 安裝 package 時，後面帶的參數：

  • -p 或 --save-pro
    預設值，安裝的package會被記錄在 dependencies 的清單底下。
  • -d 或 --save-dev
    安裝的package會被記錄在 devdependencies 的清單底下。
  • -g 或 --global
    package會安裝在本機，不會被記錄。
  • --no-save
    套件安裝後不會記錄在 package.json 中。

  剛剛說過，在移植專案時下npm install 即可裝好原本的環境，如果不帶任何參數的話，會把 dependencies 跟 devdependencies 下的套件都安裝好。如果只是要建立執行環境，那麼只要下 npm install --production，就不會安裝devdependencies的套件。

• package-lock.json

在package.json中記錄了許多套件，這些套件的dependencies會被記錄在這個地方，因此node_modules裡的檔案才會這麼多，看似只裝了幾十個套件，其實相依的套件有數百個。通常這個檔案我們不太會動到。

剩下的檔案我們明天在再繼續！