Day 04：看看 Angular CLI 对我们做了什麽？认识专案架构

今天，我们要来看看在使用 Angular CLI 後，专案的架构会长什麽样？

angular.json：是 Angular CLI 的设定档，包含许多参数，必要时要来这边调整。
.editorconfig：是常见的编辑器设定档，针对你目前使用的编辑器来设定，e.g. 如何处理 tab 符号及断行符号等内容，可以根据自己的需求，进行设定。
.gitignore：是 Git 的忽略设定档，里头定义的是不需要进入版控的档案及资料夹。
karma.conf.js：如果有使用到 Karma 这个单元测试工具时，有机会用到。
package.json：你目前专案的 npm 设定档，是个十分重要的档案，里头可以看到一些套件的版本，在 script 这个区块里，包含了将来在使用 Angular 开发时，会用到的命令，如：我们前一篇文使用到的 npm start/ng serve。
tsconfig.json：是专案 TypeScript 相关设定存放的地方，通常不太需要修改。
tsconfig.app.json：继承自 tsconfig.json，并做出额外的设定，比较有机会用到的地方为档案里头的 types 部分。
tsconfig.spec.json：用於测试的 TypeScript 设定。
node_modules：这个资料夹包含了我们使用 npm 安装好的所有套件，档案很多又大，在 .gitingore 里预设是把这个资料夹列入，不进入版控。

接下来要介绍的是我们最常接触的资料夹 src，我们开发 Angular 主要的原始码都放在这个资料夹里。

app 资料夹：里面包含我们 Angular 应用程序的主要档案。
- app.component.ts：为 app.module 指定的 Angular 应用程序的根元件。
- app.component.html：app.component.ts 的 template，里头定义了这个元件的范本。
- app.component.css：可在里头定义此元件的 CSS。
- app.component.spec.ts：此为单元测试的定义档。
index.html：Angular 这个 Web 应用程序的首页。
style.css：此为 global styles，也就是整个应用程序通用的 CSS 设定可以写在这里。
main.ts：Angular 官方建议使用 TypeScript 来当成开发 Angular 的程序语言，因此不会看到 .js 档，此档案为 Angular 的 JavaScript 程序的进入点，为主程序所在。
assets 资料夹：assets 为资产的意思，通常里面包含专案所有的静态档案，e.g. 额外的 JavaScript 档案、额外的 CSS 档案、额外的图片、favicon 等。
- .gitkeep：此档案是给 Git 看的，因为我们在做版控时，如果有一个资料夹里头连一个档案都没有，这个资料夹是不会进入版控的，所以此档案是为了让 assets 能进入版控而设计的。
environments 资料夹：里头的档案为此 Angular 应用程序会用到的环境变数。
- environment.ts：开发时期，预设使用此档案。
- environment.prod.ts：build 出 production 版的 Angular 应用程序才用得上。
favicon.ico：浏览器页签上的 icon 图档。
polyfills.ts：当 Angular 在执行时，如果使用者用了较旧版的浏览器，有些功能可能无法正确呈现，此时，就可以在此档案中，把相对应的 code 取消注解，把所需的 npm 模组 import 进来，来让 Angular 应用程序可以在旧版浏览器正常运作。
test.ts：写单元测试时才会用到。