Angular のコンポーネントとモジュール

1. Angular のモジュール
2. Angular のコンポーネント
3. まとめ

この記事では、Angular のコンポーネントとモジュールを紹介し、それらの違いについて説明します。

Angular のモジュール

このモジュールは、アプリケーションの完全な機能です。

たとえば、ユーザー認証は、ユーザーのログイン、登録、認証（パスワードを忘れて電子メールを確認する）を含む完全な機能です。したがって、ユーザー認証はアプリケーションのモジュールです。

ユーザー認証のように、相互に関連する機能のグループがある場合、モジュールには 1つ以上のコンポーネント、サービス、およびピップが含まれます。

たとえば、ユーザー認証には、login、register、forget a password の 3つのコンポーネントがあります。私たちのサービスはユーザー認証の API call であり、pips はヘルパーになります。

したがって、相互に関連するこれらの異なる機能を組み合わせると、Angular アプリケーションに 1つのモジュールが作成されます。

それでは、次のコマンドを使用して新しいアプリケーションを作成しましょう。

# angular
ng new my-app

Angular で新しいアプリケーションを作成したら、このコマンドを使用してアプリケーションディレクトリに移動します。

# angular
cd my-app

それでは、アプリを実行して、すべての依存関係が正しくインストールされているかどうかを確認しましょう。

# angular
ng serve --open

次に、app.module.ts ファイルを開きます。

# angular
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

上記のコードでわかるように、App モジュールに NgModule と BrowserModule をインポートしました。AppComponent という 1つのコンポーネントもインポートしました。

ただし、モジュールにさらに多くのコンポーネントをインポートする場合は、宣言を使用してコンポーネントをモジュールに登録できます。別のモジュールをインポートする場合は、imports を使用できます。

次のコマンドを使用して、Angular アプリケーションで新しいモジュールを簡単に作成できます。

# angular
ng generate module user-auth

このコマンドは、以下に示すように、App フォルダー内に新しいフォルダーを作成し、新しいモジュールを作成します。

出力：

Angular のコンポーネント

コンポーネントは、特定のタスク用に作成されたコードの一部です。

たとえば、ユーザーに自分で登録してもらいたい場合は、ユーザーがアプリケーションに登録できるようにする新しいコンポーネント register を作成できます。

コンポーネントは、再利用できる場所のニーズに応じて再利用できます。たとえば、Angular アプリケーションのすべての Web ページでヘッダーとフッターを使用する場合は、header と footer を作成し、これらのコンポーネントを使用する場所にインポートできます。

コンポーネントは 4つのファイルで構成されています。

1. コンポーネントのスタイルを書き込むために使用される CSS ファイル。
2. コンポーネントのフロントエンドまたはビューの書き込みに使用される HTML ファイル。
3. テストケースの作成に使用される仕様ファイル。
4. 関数、API 呼び出しなどを含むコンポーネントの論理部分を書き込むコンポーネントファイル。

それでは、次のコマンドを使用して新しいアプリケーションを作成しましょう。

# angular
ng new my-app

Angular で新しいアプリケーションを作成したら、このコマンドを使用してアプリケーションディレクトリに移動します。

# angular
cd my-app

それでは、アプリを実行して、すべての依存関係が正しくインストールされているかどうかを確認しましょう。

# angular
ng serve --open

次に、app.component.ts ファイルを開きます。

# angular
import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "App Component";
}

上記のコードでわかるように、@ angle/core から component メソッドをインポートしました。これで、インポートしたばかりの component を使用して、コンポーネントの selector、templateUrl、および styleUrls を定義できます。

セレクターは、Angular アプリケーションでコンポーネントのコンテンツを表示するために使用されるタグです。

上記のコードから、index.html ファイルにタグ <app-root></app-root> を作成すると、Angular アプリケーションはタグを検出し、コンポーネントのコンテンツに置き換えます。

templateUrl は、コンポーネントのテンプレートを定義するために使用されます。また、styleUrls は、スタイルが記述されているコンポーネントの CSS ファイルを定義します。

次のコマンドを使用して、Angular アプリケーションで新しいコンポーネントを簡単に作成できます。

# angular
ng generate component login

このコマンドは、コンポーネントの新しいセレクターを使用して 4つの新しいファイルを作成します。

出力：

まとめ

このチュートリアルでは、Angular のモジュールとコンポーネント、新しいコンポーネントを作成する方法、それらのメソッドを理解する方法、およびそれらが何で構成されているかについて学びました。