Angularとは
Sat Aug 10, 2024Angularのモジュール
Angularそのものも複数のモジュール（部品）から構成されており、アプリの要件に応じて必要なモジュールをインポートして利用する。原則として、Angularアプリは1以上のモジュールで構成されなければならない。
例)
// 利用できるモジュールを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 | コンポーネント適用するビュー（テンプレート） |
例)
@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のデータバインディングはバインド方式によって記法も異なる。
親子関係のデータのやりとり
@Inputデコレーター
親コンポーネントから子コンポーネントに対して値を渡す。
構文
@Input() prop: type
-----------------------
- prop: プロパティ名
- type: データ型
例) 親から子へ 親がitemを子に渡す
// AppComPonent 親
selected: Book;
<detail-book [item]="selected"></detail-book>
selectedのプロパティの値をitem属性にバインド
DetailsComponet 子
// item属性を受け取る
// DetailsComponet 子
@Input() item: Book;
@Inputを付けたプロパティには外から値を渡せる
@Outputデコレーター
子コンポーネントから親コンポーネントに対して値を渡す。
例で言えば、editedイベントがイベント発生時にBook型の $eventオブジェクトを引き渡すと宣言している。
構文
@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>の型と一致してなければならない。
構文
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 親
// AppComPonent 親
onedited(book: Book) {...}
<edit-book ... (edited)="onedited($event)">
DetailsComponet 子
// DetailsComponet 子
@Output() edited= new EventEmitter<Book>();
コンポーネントのサイクル
詳細は公式Angularへ。
覚書としては、
- コンポーネントの初期化処理は
ngOnlnitメソッドに集約する
サービス
コンポーネントはビューとのやりとりに徹し、アプリ固有のビジネスロジックをサービスに委ねる。
サービスクラスを使うには標準的なクラス定義の前に@injectableデコレーターをつける。この@injectableデコレーターはコンポーネントに対してサービスを引き渡せることを意味する。
サービスを登録するには@NgModuleデコレーターのprovidersパラメーターに対象のクラスを列挙。
用語
デコレーター
クラスやプロパティ/メソッド、引数などに対して、構成情報を付与するための仕組み。
ルートモジュール
起動時に呼び出されるモジュールのことをモジュールのこと。
UpperCamelCase記法
先頭文字も含めて、単語の区切りは全て大文字
LowerCamelCase記法
先頭の文字だけを小文字
KebabCase記法
すべて小文字で単語の区切りはハイフン
ディレクティブ
コンパイル時にコンパイルエラーに与える補足情報。
Angularだと以下のようにして、#name変数にngModelディレクティブをセットする。これでコンパイル時にエラーを教えてくれる。
#name="ngModel"
