Angularのモジュール
Angularそのものも複数のモジュール(部品)から構成されており、アプリの要件に応じて必要なモジュールをインポートして利用する。原則として、Angularアプリは1以上のモジュールで構成されなければならない。
例)
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のクラスの命名規則
種類 |
命名規則 |
例 |
クラス名 |
「名前+種類」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のデータバインディングはバインド方式によって記法も異なる。
親子関係のデータのやりとり
親コンポーネントから子コンポーネントに対して値を渡す。
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ディレクティブ
をセットする。これでコンパイル時にエラーを教えてくれる。