1. 程式人生 > >Angular CLI的簡單使用(2)

Angular CLI的簡單使用(2)

https 配置文件 nbsp lis itl doc height 構建 設置

剛才創建了myApp這個項目,看一下這個項目的文件結構.

技術分享圖片 技術分享圖片

項目文件概覽

Angular CLI項目是做快速試驗和開發企業解決方案的基礎。

你首先要看的文件是README.md。 它提供了一些如何使用CLI命令的基礎信息。 如果你想了解 Angular CLI 的工作原理,請訪問 Angular CLI 的倉庫及其Wiki。

有些生成的文件你可能覺得陌生。接下來就講講它們。

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都替你考慮到了。

favicon.ico

每個網站都希望自己在書簽欄中能好看一點。 請把它換成你自己的圖標。

index.html

這是別人訪問你的網站是看到的主頁面的HTML文件。 大多數情況下你都不用編輯它。 在構建應用時,CLI會自動把所有jscss文件添加進去,所以你不必在這裏手動添加任何 <script><link> 標簽。

main.ts

這是應用的主要入口點。 使用JIT compiler編譯器編譯本應用,並啟動應用的根模塊AppModule,使其運行在瀏覽器中。 你還可以使用AOT compiler編譯器,而不用修改任何代碼 —— 只要給ng build

ng serve 傳入 --aot 參數就可以了。

polyfills.ts

不同的瀏覽器對Web標準的支持程度也不同。 填充庫(polyfill)能幫我們把這些不同點進行標準化。 你只要使用core-jszone.js通常就夠了,不過你也可以查看瀏覽器支持指南以了解更多信息。

styles.css

這裏是你的全局樣式。 大多數情況下,你會希望在組件中使用局部樣式,以利於維護,不過那些會影響你整個應用的樣式你還是需要集中存放在這裏。

test.ts

這是單元測試的主要入口點。 它有一些你不熟悉的自定義配置,不過你並不需要編輯這裏的任何東西。

tsconfig.{app|spec}.json

TypeScript編譯器的配置文件。tsconfig.app.json是為Angular應用準備的,而tsconfig.spec.json是為單元測試準備的。

TypeScript compiler configuration for the Angular app (tsconfig.app.json) and for the unit tests (tsconfig.spec.json).

根目錄

src/文件夾是項目的根文件夾之一。 其它文件是用來幫助你構建、測試、維護、文檔化和發布應用的。它們放在根目錄下,和src/平級。

技術分享圖片

文件

用途

e2e/

e2e/下是端到端(End-to-End)測試。 它們不在src/下,是因為端到端測試實際上和應用是相互獨立的,它只適用於測試你的應用而已。 這也就是為什麽它會擁有自己的tsconfig.json

node_modules/

Node.js創建了這個文件夾,並且把package.json中列舉的所有第三方模塊都放在其中。

.angular-cli.json

Angular CLI的配置文件。 在這個文件中,我們可以設置一系列默認值,還可以配置項目編譯時要包含的那些文件。 要了解更多,請參閱它的官方文檔。

.editorconfig

給你的編輯器看的一個簡單配置文件,它用來確保參與你項目的每個人都具有基本的編輯器配置。 大多數的編輯器都支持.editorconfig文件,詳情參見 http://editorconfig.org 。

.gitignore

一個Git的配置文件,用來確保某些自動生成的文件不會被提交到源碼控制系統中。

karma.conf.js

給Karma的單元測試配置,當運行ng test時會用到它。

package.json

npm配置文件,其中列出了項目使用到的第三方依賴包。 你還可以在這裏添加自己的自定義腳本。

protractor.conf.js

給Protractor使用的端到端測試配置文件,當運行ng e2e的時候會用到它。

README.md

項目的基礎文檔,預先寫入了CLI命令的信息。 別忘了用項目文檔改進它,以便每個查看此倉庫的人都能據此構建出你的應用。

tsconfig.json

TypeScript編譯器的配置,你的IDE會借助它來給你提供更好的幫助。

tslint.json

給TSLint和Codelyzer用的配置信息,當運行ng lint時會用到。 Lint功能可以幫你保持代碼風格的統一。

Angular CLI的簡單使用(2)