Angular目錄結構分析以及app.module.ts詳解

場景

Angular介紹、安裝Angular Cli、創建Angular項目入門教程：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017

在上面搭建的Angular項目的目錄結構如下

 

 

具體的目錄結構的作用如下

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

大體的目錄結構分析

 

 

 

 

Src目錄下

 

app/	包含定義應用邏輯和數據的組件文件。
assets/	包含要在構建應用時應該按原樣復制的圖像和其它靜態資源文件。
environments/	包含特定目標環境的構建配置選項。默認情況下，有一個無名的標准開發環境和一個生產（“prod”）環境。你還可以定義其它的目標環境配置。
favicon.ico	用作該應用在標簽欄中的圖標。
index.html	當有人訪問你的站點時，提供服務的主要 HTML 頁面。CLI 會在構建你的應用時自動添加所有的 JavaScript 和 CSS 文件，所以你通常不用手動添加任何 <script> 或 <link> 標簽。
main.ts	應用的主要切入點。用 JIT 編譯器編譯應用，然后引導應用的根模塊（AppModule）在瀏覽器中運行。你也可以在不改變任何代碼的情況下改用 AOT 編譯器， 只要在 CLI 的 build 和 serve 命令中加上 --aot 標志就可以了。
polyfills.ts	為瀏覽器支持提供了膩子（polyfill）腳本。
styles.sass	列出為項目提供樣式的 CSS 文件。該擴展還反映了你為該項目配置的樣式預處理器。
test.ts	單元測試的主入口點，帶有一些Angular特有的配置。你通常不需要編輯這個文件。

Src下app目錄下

app/app.component.ts	為應用的根組件定義邏輯，名為 AppComponent 。當你向應用中添加組件和服務時，與這個根組件相關聯的視圖就會成為視圖樹的根。
app/app.component.html	定義與根組件 AppComponent 關聯的 HTML 模板。
app/app.component.css	為根組件 AppComponent 定義了基本的 CSS 樣式表。
app/app.component.spec.ts	為根組件 AppComponent 定義了一個單元測試。
app/app.module.ts	定義了名為 AppModule 的根模塊，它會告訴 Angular 如何組裝應用。這里最初只聲明一個 AppComponent。當你向應用中添加更多組件時，它們也必須在這里聲明。

 

工作區配置文件

 

.editorconfig	代碼編輯器的配置。參見 EditorConfig 。
.gitignore	指定 Git 應忽略的不必追蹤的文件。
README.md	根應用的簡介文檔.
angular.json	為工作區中的所有項目指定 CLI 的默認配置，包括 CLI 要用到的構建、啟動開發服務器和測試工具的配置項，比如 TSLint，Karma 和 Protractor。欲知詳情，請參閱 Angular 工作空間配置 部分。
package.json	配置工作空間中所有項目可用的 npm包依賴 。有關此文件的具體格式和內容，請參閱 npm 的文檔 。
package-lock.json	提供 npm 客戶端安裝到 node_modules 的所有軟件包的版本信息。欲知詳情，請參閱 npm 的文檔。如果你使用的是 yarn 客戶端，那么該文件就是 yarn.lock 。
src/	根項目的源文件。
node_modules/ README.md	根應用的介紹性文檔。
tsconfig.json	工作空間中各個項目的默認 TypeScript 配置。
tslint.json	工作空間中各個項目的默認 TSLint 配置。

 

app.module.ts

定義了名為 AppModule 的根模塊，它會告訴 Angular 如何組裝應用。這里最初只聲明一個 AppComponent。當你向應用中添加更多組件時，它們也必須在這里聲明。

可以看到其位置

 

 

 

這個文件是Angular 根模塊，告訴Angular如何組裝應用。

下面打開這個文件，詳解其結構

 

 

再打開app.component.ts看一下組件的組成