Angular的項目結構

前面咱們已經在咱們想要的位置順利的建立了Angular項目，如今咱們就來看一下項目的結構吧。

下面使咱們項目的總體結構，包括node的模板、src資源文件以及配置文件等。

 

 

下面是根目錄文件夾內的文件用途：

文件	用途
e2e/	在 e2e/ 下是端到端（end-to-end）測試。 它們不在 src/ 下，是由於端到端測試實際上和應用是相互獨立的，它只適用於測試你的應用而已。 這也就是爲何它會擁有本身的 tsconfig.json。
node_modules/	Node.js 建立了這個文件夾，而且把 package.json 中列舉的全部第三方模塊都放在其中。
.editorconfig	給你的編輯器看的一個簡單配置文件，它用來確保參與你項目的每一個人都具備基本的編輯器配置。 大多數的編輯器都支持 .editorconfig 文件，詳情參見 http://editorconfig.org 。
.gitignore	一個 Git 的配置文件，用來確保某些自動生成的文件不會被提交到源碼控制系統中。
angular.json	Angular CLI 的配置文件。 在這個文件中，你能夠設置一系列默認值，還能夠配置項目編譯時要包含的那些文件。 要了解更多，請參閱它的官方文檔。
package.json	npm 配置文件，其中列出了項目使用到的第三方依賴包。 你還能夠在這裏添加本身的自定義腳本。
protractor.conf.js	給Protractor使用的端到端測試配置文件，當運行 ng e2e 的時候會用到它。
README.md	項目的基礎文檔，預先寫入了 CLI 命令的信息。 別忘了用項目文檔改進它，以便每一個查看此倉庫的人都能據此構建出你的應用。
tsconfig.json	TypeScript 編譯器的配置，你的 IDE 會藉助它來給你提供更好的幫助。
tslint.json	給TSLint和Codelyzer用的配置信息，當運行 ng lint 時會用到。 Lint 功能能夠幫你保持代碼風格的統一。

src文件夾：你的應用代碼位於 src 文件夾中。 全部的 Angular 組件、模板、樣式、圖片以及你的應用所需的任何東西都在那裏。 這個文件夾以外的文件都是爲構建應用提供支持用的。

 下面是這些文件的做用：

文件	用途
app/app.component.{ts,html,css,spec.ts}	使用 HTML 模板、CSS 樣式和單元測試定義 AppComponent 組件。 它是根組件，隨着應用的成長它會成爲一棵組件樹的根節點。
app/app.module.ts	定義 AppModule，根模塊爲 Angular 描述如何組裝應用。 目前，它只聲明瞭 AppComponent。 不久，它將聲明更多組件。
assets/*	這個文件夾下你能夠放圖片等任何東西，在構建應用時，它們全都會拷貝到發佈包中。
environments/*	這個文件夾中包括爲各個目標環境準備的文件，它們導出了一些應用中要用到的配置變量。 這些文件會在構建應用時被替換。 好比你可能在生產環境中使用不一樣的 API 端點地址，或使用不一樣的統計 Token 參數。 甚至使用一些模擬服務。 全部這些，CLI 都替你考慮到了。
browserslist	一個配置文件，用來在不一樣的前端工具之間共享目標瀏覽器。
favicon.ico	每一個網站都但願本身在書籤欄中能好看一點。 請把它換成你本身的圖標。
index.html	這是別人訪問你的網站是看到的主頁面的 HTML 文件。 大多數狀況下你都不用編輯它。 在構建應用時，CLI 會自動把全部 js 和 css 文件添加進去，因此你沒必要在這裏手動添加任何 <script>或 <link> 標籤。
karma.conf.js	給Karma的單元測試配置，當運行 ng test 時會用到它。
main.ts	這是應用的主要入口點。 使用JIT 編譯器編譯本應用，並啓動應用的根模塊 AppModule，使其運行在瀏覽器中。 你還可使用AOT 編譯器，而不用修改任何代碼 —— 只要給 ng build 或 ng serve 傳入 --aot 參數就能夠了。
polyfills.ts	不一樣的瀏覽器對 Web 標準的支持程度也不一樣。 膩子腳本（polyfill）能把這些不一樣點進行標準化。 你只要使用 core-js 和 zone.js 一般就夠了，不過你也能夠查看瀏覽器支持指南以瞭解更多信息。
styles.css	這裏是你的全局樣式。 大多數狀況下，你會但願在組件中使用局部樣式，以利於維護，不過那些會影響你整個應用的樣式你仍是須要集中存放在這裏。
test.ts	這是單元測試的主要入口點。 它有一些你不熟悉的自定義配置，不過你並不須要編輯這裏的任何東西。
tsconfig.{app|spec}.json	TypeScript 編譯器的配置文件。tsconfig.app.json 是爲 Angular 應用準備的，而 tsconfig.spec.json 是爲單元測試準備的。
tslint.json	額外的 Linting 配置。當運行 ng lint 時，它會供帶有 Codelyzer 的 TSLint 使用。 Linting 能夠幫大家保持代碼風格的一致性。