Angular2のモジュール、コンポーネント、bootstrapの概要

wp-admin

8年前

Angular２の基本構成の中心であるモジュール、コンポーネントについての概要とbootstrap関数によるアプリの起動について確認しました。
※Angularの4.4.3版、TypeScriptを使って確認したものです。

　
※目次をクリックすると目次の下部にコンテンツが表示されます。

１．簡単なサンプルコード
２．コンポーネントの概要
３．モジュールと@NgModule
４．コンパイラ、bootstrap関数を使ってアプリを起動

簡単なサンプルコード

以下の簡単なサンプルコードを例に説明します。

（title.component.ts）
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-title',
  template: '<h1>{{title}} {{subtitle}}</h1>'
})
export class TitleComponent {
  @Input() subtitle = '';
  title = 'Angular Modules';
}

（app.module.ts）
import { NgModule } from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { Component } from '@angular/core';
import { TitleComponent } from './title.component.ts';
@Component({
  selector: 'my-app',
  template:`
<app-title [subtitle]="subtitle"></app-title>
  `
})
export class AppComponent {
  subtitle = '(v1)';
}

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

（main.ts）
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module.ts';

platformBrowserDynamic().bootstrapModule(AppModule);

（index.html）
　　　：
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app/main.ts').catch(function(err){ console.error(err); });
    </script>
　　　：
  </head>
  <body>
    <div class="container">
      <my-app>Loading...</my-app>
    </div>
  </body>

コンポーネントの概要

１）コンポーネントの特徴
　
・コンポーネントは、Angular1のディレクティブに類似している。
　
・Webコンポーネントの機能によって作られている。
　
・コンポーネントは、ビューとロジックを持つ。
　
・サービスを依存性注入によって連携できる。
　
・コンポーネントは、プロパティパインディングを使用して値の更新をチェックする。
　
・コンポーネントはイベントを処理でき、イベントハンドラーは、コンポーネントのクラス内で定義されたパブリックメソッド。
　
２）モジュールとコンポーネントの関係
　
・Angularアプリは、モジュール構成で、目的に応じて分けられた複数のファイルで構成。上記サンプルではtitle.component.ts
　
・多くのファイルはコンポーネントとしてexportしている。exportすることにより、他のモジュールからこのコンポーネントを利用できる。
　
・他のコンポーネントを使用する場合は、importする。
例）
import { TitleComponent } from ‘./title.component.ts’;
　
title.component.tsという名前のファイルをインポートし、”TitleComponent”というシンボルで参照する。
　
３）コンポーネントのメタデータ
　
・メタデータを指定する事によってクラスがAngularコンポーネントになる。

@Component({
  selector: 'app-title',
  template: '<h1>{{title}} {{subtitle}}</h1>'
})
export class TitleComponent {
  @Input() subtitle = '';
  title = 'Angular Modules';
}

　
・Angularは、ビューの組み立てやコンポーネントがアプリの他のパーツとどのように関連するのかを知るためにメタデータを必要とする。
　
・コンポーネントのメタデータは、Angularの”Component”関数を使って定義する。
　
・”Component”関数は、Angularのcoreモジュールをインポートしてアクセスする。
　
・TypeScriptでは、@シンボルでプレフィックスし、コンポーネントクラスの真上に記述する事によって、この関数をクラスへのデコレータとして適用する。
　
・@Componentの記述によって、AngularはこのクラスがAngularコンポーネントであることを認識し、引数で指定した”selector”と”template”はconfigurationオブジェクトとなる。
　
“selector”はCSSセレクターの名前を示し、”template”はコンポーネントのビューとなる。
　
・上記サンプルでは、ビュー内でselector属性で指定した”my-app”の記述を見つけると、Angularは”AppComponent”クラスのインスタンスを生成して、テンプレートを表示する。
　
例）
<my-app>Loading…</my-app>

モジュールと@NgModule

●@NgModule
例）

@NgModule({
  imports: [
    BrowserModule,
  ],
  declarations: [
    AppComponent,
    TitleComponent
  ],
  bootstrap: [ AppComponent ]
})

　
○imports属性
　
・モジュールのリストを指定。
・BrowserModuleは、すべてのブラウザーアプリがインポートしなければならないモジュール。
　
○declarations属性
　
・このモジュール内で定義したカスタムのディレクティブとパイプのリストを指定。
　
○bootstrap属性
　
・このモジュールがブートストラップされるときにブートストラップされるべきコンポーネントを定義
・Angular2がアプリを開始するとき、AppComponentのtemplateで定義したHTMLをindex.htmlの<my-app>要素タグ内に配置する。

コンパイラ、bootstrap関数を使ってアプリを起動

○Just-in-time(JiT)コンパイラによるダイナミックブートストラップ
　
import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’;
import { AppModule } from ‘./app.module.ts’;
　
platformBrowserDynamic().bootstrapModule(AppModule);
　
・ブラウザ内にアプリをコンパイルし、アプリを開始する。