Angularのモジュール

Angularそのものも複数のモジュール（部品）から構成されており、アプリの要件に応じて必要なモジュールをインポートして利用する。原則として、Angularアプリは1以上のモジュールで構成されなければならない。

Angularとは

例)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
// 利用できるモジュールをimport
// @angularはAngularが標準で提供するモジュール
import { NgModule }      from '@angular/core';
// BrowserModuleはブラウザー上で動作させることができるモジュール
import { BrowserModule } from '@angular/platform-browser';

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

// NgModuleはモジュールを定義するためのモジュール
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
// Angularに置けるモジュールの実態は、`TypeScriptのクラス`です。
// 他のモジュールから参照できるようにexportを使ってAppModuleを外部に公開している。
export class AppModule { }

export class AppModule { }でクラスを定義 → @NgModuleデコレーターでモジュールとしての情報を宣言。

@NgModuleデコレーターの主なパラメーター

@NgModuleデコレーターの使い方は重要！

パラメーター名	概要
imports	現在のモジュールで利用する他のモジュール
exports	現在のモジュールから外部に公開するコンポーネントなど
declarations	現在のモジュールに属するコンポーネントなど
bootstrap	アプリで最初に起動すべき最上位のコンポーネント（=ルートコンポーネント）
id	モジュールのid値

@Componentデコレーターの主なパラメーター

パラメーター名	概要
selector	コンポーネントを適用すべき要素を表すセレクター式
template	コンポーネント適用するビュー（テンプレート）

例)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
@Component({
  selector: 'my-app',
  template: `
    <table class="table">
      <tr>
        <th>ISBNコード</th><th>書名</th><th>価格</th><th>出版社</th>
      </tr>
      <tr *ngFor="let b of books">
        <td>{{b.isbn}}</td>
        <td>{{b.title}}</td>
        <td>{{b.price}}円</td>
        <td>{{b.publisher}}円</td>
      </tr>
    </table>
  `,
})

<my-app>要素に対して、<table class="table">というテンプレートが適用される。Railsでいうところのrenderみたいなもの。

実際にデベロッパーツールで見ると。こんな感じ。

Angularとは

Angularのクラスの命名規則

種類	命名規則	例
クラス名	「名前+種類」UpperCamelCase記法	AppModule, FriendListComponent
ファイル名	「名前.種類.ts」KebabCase記法	app.module.ts, friend-list.component.ts
テストスクリプト	テスト対象のファイル名に「.spec.ts」を追加	friend-list.component.spec.ts

Angularのデータバインディング構文

モード	説明	記法
コンポーネント→View	interpolation(補間)	{{…}}
コンポーネント→View	プロパティ/属性バインディング	[property]=“value”
View→コンポーネント	イベントバインディング	(event)=“handler”
コンポーネント→View	双方向バインディング	[(target)]=“value”

Angularのデータバインディングはバインド方式によって記法も異なる。

親子関係のデータのやりとり

@Inputデコレーター

親コンポーネントから子コンポーネントに対して値を渡す。

1
2
3
4
5
6
7
8
構文

@Input() prop: type
-----------------------

- prop: プロパティ名

- type: データ型

例) 親から子へ親がitemを子に渡す

1
2
3
4
5
// AppComPonent 親

selected: Book;
<detail-book [item]="selected"></detail-book>
selectedのプロパティの値をitem属性にバインド

DetailsComponet 子

1
2
3
4
5
// item属性を受け取る
// DetailsComponet 子

@Input() item: Book;
@Inputを付けたプロパティには外から値を渡せる

@Outputデコレーター

子コンポーネントから親コンポーネントに対して値を渡す。

例で言えば、editedイベントがイベント発生時にBook型の$eventオブジェクトを引き渡すと宣言している。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
構文

@Output() event = new EventEmitter<type>();
-----------------------

- event: イベント名

- type: $evnetオブジェクトとして渡すデータ型

例)

export class EditComponent {
  @Input() item: Book;
  @Output() edited = new EventEmitter<Book>();

  onsubmit() {
    this.edited.emit(this.item);
  }
}

@Outputデコレーターは、イベント名と型を宣言しているだけなので、イベントを実際に発生させるためには、emitメソッドを使う。

例で言えば、onsubmitメソッドでemitメソッドを呼び出し、編集済みの書籍情報(this.item)を引き渡す。

※ 引数dataはEventEmitter<type>の型と一致してなければならない。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
構文

this.event.emit(data)
-----------------------

- event: イベント名

- data: $eventオブジェクトとして引き渡すデータ 

例)

export class EditComponent {
  @Input() item: Book;
  @Output() edited = new EventEmitter<Book>();

  onsubmit() {
    this.edited.emit(this.item);
  }
}

例) 子から親へ値を渡す

AppComPonent 親

1
2
3
4
// AppComPonent 親

onedited(book: Book) {...}
<edit-book ... (edited)="onedited($event)">

DetailsComponet 子

1
2
3
// DetailsComponet 子

@Output() edited= new EventEmitter<Book>();

コンポーネントのサイクル

詳細は公式Angularへ。

覚書としては、

コンポーネントの初期化処理はngOnlnitメソッドに集約する

サービス

コンポーネントはビューとのやりとりに徹し、アプリ固有のビジネスロジックをサービスに委ねる。

サービスクラスを使うには標準的なクラス定義の前に@injectableデコレーターをつける。この@injectableデコレーターはコンポーネントに対してサービスを引き渡せることを意味する。

サービスを登録するには@NgModuleデコレーターのprovidersパラメーターに対象のクラスを列挙。

用語

デコレーター

クラスやプロパティ/メソッド、引数などに対して、構成情報を付与するための仕組み。

ルートモジュール

起動時に呼び出されるモジュールのことをモジュールのこと。

UpperCamelCase記法

先頭文字も含めて、単語の区切りは全て大文字

LowerCamelCase記法

先頭の文字だけを小文字

KebabCase記法

すべて小文字で単語の区切りはハイフン

ディレクティブ

コンパイル時にコンパイルエラーに与える補足情報。

Angularだと以下のようにして、#name変数にngModelディレクティブをセットする。これでコンパイル時にエラーを教えてくれる。

1
#name="ngModel"

Angularアプリケーションプログラミング

Amazon

楽天

Honto