角度ディレクトリ構造の分析と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/	特定のターゲット環境用のビルド構成オプションが含まれています。デフォルトでは、名前のない標準開発環境と本番（「製品」）環境があります。他のターゲット環境構成を定義することもできます。
favicon.ico	タブバーでアプリのアイコンとして使用されます。
index.html	誰かがあなたのサイトを訪れたとき、サービスを提供するメインのHTMLページ。CLIはアプリケーションのビルド時にすべてのJavaScriptおよびCSSファイルを自動的に追加するため、通常は手動で タグ  やタグを追加する必要はありません。 <script> <link>
main.ts	アプリケーションのメインエントリポイント。アプリケーションをJITコンパイラーでコンパイルし、アプリケーションのルートモジュール（AppModule）をブラウザーで実行するようにガイドします。CLI  および コマンドに フラグを追加する限り、コードを変更せずにAOTコンパイラーを使用することもできます。   build serve --aot
polyfills.ts	ブラウザサポート用のポリフィルスクリプトを提供。
styles.sass	プロジェクトのスタイルを設定するCSSファイルをリストします。拡張機能には、プロジェクトに構成したスタイルプリプロセッサも反映されます。
test.ts	いくつかのAngular固有の構成でのユニットテストのメインエントリポイント。通常、このファイルを編集する必要はありません。

Srcの下のappディレクトリの下

app/app.component.ts	という名前のアプリケーションのルートコンポーネントのロジックを定義します 。アプリケーションにコンポーネントとサービスを追加すると、このルートコンポーネントに関連付けられているビューがビューツリーのルートになります。 AppComponent
app/app.component.html	ルートコンポーネントに 関連付けられたHTMLテンプレートを定義します。 AppComponent
app/app.component.css	ルートコンポーネントに対して 基本的なCSSスタイルシートが定義されています。 AppComponent
app/app.component.spec.ts	ユニットテストがルートコンポーネントに対して定義されます。 AppComponent
app/app.module.ts	という名前の ルートモジュールを定義すると、アプリケーションをアセンブルする方法がAngularに通知されます。ここでは最初は1つだけが宣言されています。さらにコンポーネントをアプリケーションに追加する場合、それらもここで宣言する必要があります。 AppModule AppComponent

 

ワークスペース構成ファイル

 

.editorconfig	コードエディターの構成。EditorConfigを参照してください 。
.gitignore	Git  が無視し、追跡する必要のないファイルを指定します。
README.md	ルートアプリケーションの紹介ドキュメント。
angular.json	CLIは、ビルド、テスト・ツールへのCLIの使用を含め、ワークスペース内のすべてのプロジェクトのデフォルト設定を指定してのような開発サーバーの設定項目、開始しTSLint、カルマ や分度器を。詳細については、Angularワークスペースの設定 セクションを参照してください。
package.json	ワークスペース内のすべてのプロジェクトで使用可能なnpmパッケージの依存関係を構成します 。このファイルの特定の形式と内容については、npmのドキュメントを参照してください 。
package-lock.json	npmクライアントにインストールされて いるすべてのパッケージのバージョン情報を提供します。詳細については、npmのドキュメントを参照してください。ヤーンクライアントを使用している場合、ファイルはyarn.lock  です。 node_modules
src/	ルートプロジェクトのソースファイル。
node_modules/ README.md	ルートアプリケーションの紹介ドキュメント。
tsconfig.json	ワークスペース内の各プロジェクトのデフォルトのTypeScript  構成。
tslint.json	ワークスペース内の各プロジェクトのデフォルトのTSLint  構成。

 

app.module.ts

AppModuleという名前のルートモジュールが定義されています。これは、Angularにアプリケーションのアセンブル方法を指示します。ここでは1つのAppComponentのみが最初に宣言されています。さらにコンポーネントをアプリケーションに追加する場合、それらもここで宣言する必要があります。

その場所を見ることができます

 

 

 

このファイルはAngularルートモジュールであり、アプリケーションのアセンブル方法をAngularに指示します。

以下のこのファイルを開いて、その構造を詳細に説明してください

 

 

次にapp.component.tsを開いてコンポーネントの構成を確認します