Angular 2つの構成要素の紹介

Angular 2つの構成要素の紹介

コンポーネントはAngular 2 アプリケーションの主要な構成要素であり、アプリケーションには任意の数のコンポーネントを含めることができます。コンポーネントは、独自のロジックとデータを持つアプリケーションの特定のビューと見なすことができます。

読書時間7分

コンポーネントはAngular 2 アプリケーションの主要な構成要素であり、アプリケーションには任意の数のコンポーネントを含めることができます。コンポーネントは、独自のロジックとデータを持つアプリケーションの特定のビューと見なすことができます。

AngularJS 1.0では、コントローラ、$Scope、ディレクティブの概念があり、データやロジックをビューにバインドしたり、ビュー上にカスタム要素を作成したりするためのものでした。Angular 2では、コンポーネントがコントローラー、スコープ、指令によって実行されていたすべてのタスクを実行します。データ、ロジック、カスタム要素はすべてAngular 2のコンポーネントを使って作成またはページに追加できます。

Angular 2つのアプリケーションはコンポーネントを中心に構築されており、コンポーネントは独自のビューとして考えることができます。

  • テンプレート
  • Application Data
  • Logic
  • スタイルなど

最初のコンポーネントを作成しましょう

まずは「Hello World」をページに表示する非常にシンプルなコンポーネントを作成しましょう。

appcomponent.component.ts

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

@Component({ 
    selector: 'app-container',
    template: `<h1>{{message}}</h1>`
})
export class AppComponent {
  
    message : string = "Hello World";
    constructor() {
    }
}

コンポーネントを作成するには主に3つのステップがあります

  1. クラスを作成してエクスポートします。このクラスにはデータとロジックが含まれます。
  2. クラスをメタデータで飾り付け@component。基本的に、メタデータはコンポーネントを記述し、異なるプロパティの値を設定するため、TypeScriptクラスをAngular 2コンポーネントとして使うことが可能です。
  3. コンポーネントを作成するために必要なライブラリとモジュールをインポートします。

上記の3つのステップは以下の図で示すことができます。

上記の3つのステップは、以下の図で視覚的に示すことができます

ご覧の通り、Angular 2の構成要素は以下の通りです:

  1. データとロジックを保持するためのTypeScriptクラス、
  2. HTMLテンプレートとアプリ内でデータを表示するためのスタイル。これはビューとも呼ばれ、ユーザーが画面上で見て操作します。
  3. コンポーネントの挙動を定義するメタデータ。コンポーネントメタデータは@Componentデコレータを使ってクラスに適用されます。コンポーネントの異なる挙動はオブジェクトのプロパティとして渡され、@Componentデコレーターの入力パラメータとなります。

では、2つの構成要素のうちこの3つの部分Angular詳しく見ていきましょう。

TypeScript Class in a Component

TypeScriptクラスは型であり、コンポーネントの

  • data
  • Logic
  • 振舞い

​CalculatorComponentを作成するために使われるTypeScriptクラスは、以下の一覧に示されているように作成できます:

export class CalculatorComponent{
    num1: number ;
    num2 : number;
    result : number;
    add():number{
        this.result = this.num1 + this.num2;
        return this.result;
    };
    sub():number {
        this.result = this.num1 - this.num2;
        return this.result;
    }
}

ユーザーは異なる種類のバインディングを使ってコンポーネントクラスの動作を読み取り、修正し、呼び出すことができます。

  1. 補完（Interpolation）
  2. プロパティのバインド（Property binding）
  3. イベントバインディング（Event binding）
  4. Two-way binding

@Component Decorator 

TypeScriptの@ComponentデコレーターはTypeScriptクラスをコンポーネントとして装飾します。これはオブジェクトをパラメータとして取る関数です。@Componentデコレータでは、異なるプロパティの値を設定してコンポーネントの挙動を設定できます。最もよく使われる性質は以下の通りです:

  • テンプレート
  • TemplateUrl
  • ディレクティブ
  • Providers - プロバイダー
  • スタイル
  • StyleUrls
  • パイプ
  • Selector etc.

上記の性質以外にも、他にも性質があります。では、これらの重要な特性を一つずつ見ていきましょう。

テンプレートとテンプレートURL(テンプレートURL)

テンプレートとは、ページ上でレンダリングされるコンポーネントの一部です。テンプレートを作成する方法は2通りあります:

  1. インラインテンプレート
  2. 外部ファイル内のテンプレート

インラインテンプレートは以下のように作成できます:

@Component({ 
    moduleId: module.id ,
    selector: "app-container",
    template:`
    <h1>{{ message}}</h1>
   `,
    styles:["h1{color:red}"]

})

ここで注目すべき重要な点は、テンプレート内で複数行を作成するために使われるティルト記号です。シングルクォートまたはダブルクォートを使って、1行のインラインテンプレートを作成できます。

複雑なビューはインラインテンプレートではなく外部HTMLファイルにまとめるべきだという点で同意します。Angular 2はテンプレートを外部HTMLファイルに入れることができ、テンプレートURLプロパティの値を設定することでコンポーネントにリンクできます。慣例としては、テンプレートとコンポーネントは同じフォルダ内に保管する方が良いです。

@Component({ 
    moduleId: module.id ,
    selector: "app-container",
    templateUrl: '/app/calculators/calculator.component.html',
    styles:["h1{color:red}"]
})

コンポーネントのmoduleIdプロパティを設定することで、完全なパスを出すことを避けられます。

Selector

コンポーネントはセレクターを使って使用できます。上記の例では、セレクタープロパティは< app-container>に設定されています。ページ上のコンポーネントや他のビューを利用できます。

ページ上のコンポーネントや、

スタイルとスタイルURLs

コンポーネントは独自のスタイルを持つこともあれば、他の外部スタイルシートを参照することも可能です。スタイルを扱うために、@ComponentメタデータにはstylesとstyleUrlsプロパティがあります。以下のリストに示されているように、stylesプロパティの値を設定することでインラインスタイルを作成できます。

@Component({ 
    moduleId: module.id ,
    selector: "app-container",
    template:`
    <h1>{{ message}}</h1>
   `,
    styles:["h1{color:red}"],

})

コンポーネントはstyleUrlsプロパティの値を設定することで様々な外部ファイルを参照できます。

@Component({ 
    moduleId: module.id ,
    selector: "app-container",
    template:`
    <h1>{{ message}}</h1>
   `,
    styleUrls:['app.component.css','./app/productorder.css']

})

Providers - プロバイダー

実際のアプリケーションでは、コンポーネントはさまざまなAngular 2サービスやカスタムサービスを使用します。コンポーネントでサービスを利用するには、次の2つのステップを踏む必要があります。

  1. コンポーネント内でサービスをインポートし、
  2. メタデータでプロバイダープロパティの値を設定します。

コンポーネントメタデータには「プロバイダー」と呼ばれる配列タイプのプロパティがあります。プロバイダーでは、コンポーネントで使用されているサービスのリストを渡します。 例えば、次のリストでは、コンポーネント内で2つのサービス、CalServiceとInvoiceServiceを渡しています。

@Component({ 
    moduleId: module.id ,
    selector: "app-container",
    template:`
    <h1>{{ message}}</h1>
   `,
    providers:['CalService','InvoiceService']

})

Angular2が提供するサービスやカスタムサービスを利用するには、これらのサービスをインポートし、メタデータでプロバイダーの値として渡す必要があります。

指令としてのネストされたコンポーネント

Angular 2は、コンポーネントを別のコンポーネントの中に使うことを可能にします。コンポーネントの中にコンポーネントを使うと、入れ子状のコンポーネントの概念が生まれます。ネストされたコンポーネントを使うには、コンポーネントメタデータの指示プロパティを使う必要があります。

では、ネストされたコンポーネントをどのように活用できるかを見てみましょう。TasksComponentというコンポーネントがあり、このコンポーネントをAppComponent内で使いたいと仮定します。 TasksComponent(子コンポーネント)をAppComponent(親コンポーネント)のネストされたコンポーネントとして使用する手順は以下の通りです

  1. 親コンポーネントに子コンポーネントをインポートする
  2. 親コンポーネントのテンプレートにある子コンポーネントのセレクターを使って使う
  3. 親コンポーネントの指示プロパティの値を子コンポーネントに設定します

以下のリストでお気づきかもしれませんが、子コンポーネントであるTaskComponentをインポートし、それをAppComponentの指示として使っています。コンポーネントをネストされたコンポーネントとして使用するには、指示プロパティの値を設定する必要があります。

import { Component } from '@angular/core';
import {TasksComponent} from './task/tasks.component';

@Component({ 
    selector: 'app-container',
    template: `{{message}}<tasks></tasks>`,
    directives:[TasksComponent]
})

親コンポーネントから子コンポーネントへ、またはその逆にデータを渡す必要がある場合もありますが、その場合は今後のブログ記事で詳しく説明します。

というわけで、コンポーネントを子コンポーネントとして使うか、ブートストラップで使うことができます。この2つの要素Angularに関する入門投稿が役に立つことを願っており、読んでいただきありがとうございます!

Angular How To
デモを予約