Angularとは

Angularのモジュール


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

Angularとは





例)

// 利用できるモジュールを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とは





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属性にバインド
// 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 親

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

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





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


詳細は公式Angularへ。

覚書としては、

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



サービス


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

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

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





用語


デコレーター

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



ルートモジュール

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



UpperCamelCase記法

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



LowerCamelCase記法

先頭の文字だけを小文字



KebabCase記法

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



ディレクティブ

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

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

#name="ngModel"