Angular CLI的簡單使用(2)
剛才創建了myApp這個項目,看一下這個項目的文件結構.
項目文件概覽
Angular CLI項目是做快速試驗和開發企業解決方案的基礎。
你首先要看的文件是README.md
。 它提供了一些如何使用CLI命令的基礎信息。 如果你想了解 Angular CLI 的工作原理,請訪問 Angular CLI 的倉庫及其Wiki。
有些生成的文件你可能覺得陌生。接下來就講講它們。
src
文件夾
你的應用代碼位於src
文件夾中。 所有的Angular組件、模板、樣式、圖片以及你的應用所需的任何東西都在那裏。 這個文件夾之外的文件都是為構建應用提供支持用的。
文件 |
用途 |
---|---|
app/app.component.{ts,html,css,spec.ts} |
使用HTML模板、CSS樣式和單元測試定義 |
app/app.module.ts |
定義 |
assets/* |
這個文件夾下你可以放圖片等任何東西,在構建應用時,它們全都會拷貝到發布包中。 |
environments/* |
這個文件夾中包括為各個目標環境準備的文件,它們導出了一些應用中要用到的配置變量。 這些文件會在構建應用時被替換。 比如你可能在產品環境中使用不同的API端點地址,或使用不同的統計Token參數。 甚至使用一些模擬服務。 所有這些,CLI都替你考慮到了。 |
favicon.ico |
每個網站都希望自己在書簽欄中能好看一點。 請把它換成你自己的圖標。 |
index.html |
這是別人訪問你的網站是看到的主頁面的HTML文件。 大多數情況下你都不用編輯它。 在構建應用時,CLI會自動把所有 |
main.ts |
這是應用的主要入口點。 使用JIT compiler編譯器編譯本應用,並啟動應用的根模塊 ng serve 傳入 --aot 參數就可以了。
|
polyfills.ts |
不同的瀏覽器對Web標準的支持程度也不同。 填充庫(polyfill)能幫我們把這些不同點進行標準化。 你只要使用 |
styles.css |
這裏是你的全局樣式。 大多數情況下,你會希望在組件中使用局部樣式,以利於維護,不過那些會影響你整個應用的樣式你還是需要集中存放在這裏。 |
test.ts |
這是單元測試的主要入口點。 它有一些你不熟悉的自定義配置,不過你並不需要編輯這裏的任何東西。 |
tsconfig.{app|spec}.json |
TypeScript編譯器的配置文件。 TypeScript compiler configuration for the Angular app ( |
根目錄
src/
文件夾是項目的根文件夾之一。 其它文件是用來幫助你構建、測試、維護、文檔化和發布應用的。它們放在根目錄下,和src/
平級。
文件 |
用途 |
---|---|
e2e/ |
在 |
node_modules/ |
|
.angular-cli.json |
Angular CLI的配置文件。 在這個文件中,我們可以設置一系列默認值,還可以配置項目編譯時要包含的那些文件。 要了解更多,請參閱它的官方文檔。 |
.editorconfig |
給你的編輯器看的一個簡單配置文件,它用來確保參與你項目的每個人都具有基本的編輯器配置。 大多數的編輯器都支持 |
.gitignore |
一個Git的配置文件,用來確保某些自動生成的文件不會被提交到源碼控制系統中。 |
karma.conf.js |
給Karma的單元測試配置,當運行 |
package.json |
|
protractor.conf.js |
給Protractor使用的端到端測試配置文件,當運行 |
README.md |
項目的基礎文檔,預先寫入了CLI命令的信息。 別忘了用項目文檔改進它,以便每個查看此倉庫的人都能據此構建出你的應用。 |
tsconfig.json |
TypeScript編譯器的配置,你的IDE會借助它來給你提供更好的幫助。 |
tslint.json |
給TSLint和Codelyzer用的配置信息,當運行 |
Angular CLI的簡單使用(2)