當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Angular目录结构分析以及app.module.ts详解

發布時間：2025/3/19 编程问答 14 豆豆

生活随笔收集整理的這篇文章主要介紹了 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
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

大體的目錄結構分析

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特有的配置。你通常不需要編輯這個文件。

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?配置。

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

可以看到其位置

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

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

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

以上是生活随笔為你收集整理的Angular目录结构分析以及app.module.ts详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。