日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

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

编程问答

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

發布時間:2025/3/19 编程问答 19 豆豆
生活随笔 收集整理的這篇文章主要介紹了 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看一下組件的組成

?

總結

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

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