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

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

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

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

(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>

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

関連記事の目次

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください