Angular の ngModule とは何かについての簡単な分析

ngModuleとは何ですか?この記事では、angular 構文を簡単に理解し、Angular での ngModule について紹介します。

Angular10 のチュートリアルとして、私の理解では、VUE と比較して、Angular はよりモジュール化されており、コード構造がより明確に見えます。そこでこのセクションでは、angular 構文と ngModule の理解を簡単に紹介します。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

まず第一に、angular モジュール (ngModule) とは何ですか?

私の理解:実際、これは @NgModule で装飾された通常のクラスであり、特別なものではありません。

それでは、@NgModule とは何でしょうか?という質問です。

最初に src/app/app.module.ts のデフォルト コードを見てみましょう:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
// @NgModule(元数据)
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { } // 模块名AppModule

@NgModule はメタデータ オブジェクトを取得します。これにより、Angular にコンパイル方法が指示されます。そしてこのアプリケーションを起動します。 (メタデータは上記の設定項目以外にもありますが、まずはこれらについて説明します)

declarations array

単語自体は「発表、発表」を意味します。このモジュールの依存関係。モジュールが依存する可能性のあるいくつかの component、directives、pipelines が含まれます。インポート ルール:

• ルールを使用するには、最初にルールをインポートする必要があります。 \
• コンポーネント、ディレクティブ、またはパイプは 1 つのモジュールによってのみ導入 (宣言) できます
• 宣言内のコンポーネントは、デフォルトでは現在のモジュールでのみ使用できます。それらを使用する場合、エクスポートする必要があります

imports array

imports 配列は @NgModule デコレータにのみ表示されます。モジュールは通常どおりに動作します。独自の依存関係 (宣言) が必要であり、他のモジュールによってエクスポートされた依存関係も必要になる場合があります。 Angular モジュールである限り、カスタム モジュール (AppRoutingModule など)、サードパーティ、または NG 組み込みモジュール (@angular/**)

# などの imports 配列にインポートできます。 ##providers 配列

一連のサービスを提供します

ブートストラップ配列

配列内の各

コンポーネントは次のとおりです。コンポーネント ツリー ルート (ルート コンポーネント) として使用され、起動プロセス中に、内部のコンポーネントが 1 つずつ解析され、ブラウザの DOM に挿入されます。

ただし、通常、内部には

AppComponent が 1 つだけあります。

角度コンポーネントはどのようなものですか?

最初にアプリ コンポーネントを見てください。

src/app/app.component.ts のデフォルト コード:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {// 组件名AppComponent
  title = 'hero';
}

であることがわかります。まだ通常の操作です:

はじめに–>構成–>エクスポート

セレクター:

#名前が示すように、それは選択肢です ネイティブ JS を通じて選択できる単なるセレクターです (必須構成)。

templateUrl:

Angular コンポーネント テンプレート ファイルの URL。提供されている場合は、インライン テンプレートを提供するために template

を使用しないでください (必要な構成である

templateUrl および template オプションのいずれかを選択してください)。 styleUrls:

1 つ以上の スタイル パス ## を導入する

構成 (オプションの構成) であることを理解するのは難しくありません。

#コンポーネントが比較的単純な場合、ページとスタイルを個別に抽出する必要はなく、@Component の設定項目をインライン形式で直接使用できます:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
    <h1>{{title}}</h1>
    <h2>My favorite hero is: {{myHero}}</h2>
    `,
  styles: [`h1 { color: red }`]
})
export class AppComponent { // 组件名AppComponent
  title = &#39;Tour of Heroes&#39;;
  myHero = &#39;Windstorm&#39;;
}

To ここまで、デフォルトの App モジュールについて簡単に説明しましたが、その中にある app-routing.module.ts ファイルについては、後ほど説明します。

Angular アプリケーションの一般的な考え方は次のようになります:

たとえば、Angular アプリケーションが会社の場合、次に AppModule これが会社です。 AppComponent はこの会社のファクトリーであり、1 つの会社に多数のファクトリーを持つことができます。宣言配列内の要素は、生産ワークショップ、人事管理システムなどの工場の一部です。輸入品の配列は工場が誘致する外国援助のようなもので、比較的専門的です。プロバイダー アレイは、さまざまなサービスを提供する物流部門のようなものです。

プログラミング関連の知識について詳しくは、プログラミング入門

をご覧ください。 ！

以上がAngular の ngModule とは何かについての簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。