ペロハム大学

ﾔﾙｿﾞｰ

Angularチュートリアルをやる 3日目

Angular

■ 思ったこと

4年前ぐらいに買いっぱなしだった書籍「Angularアプリケーションプログラミング」を辞書のように使っていく！

【番外編】 Angularの概念

いまさらだが、やっぱこっからちゃんと見た方がいいよね（Angular 日本語ドキュメンテーション）

Angularとは

  • HTMLとTypeScriptでSPA（＝シングルページクライアントアプリケーション）を開発するためのフレームワーク
  • 基本的な構成要素は、 NgModule で組織されたAngularコンポーネント・・NgModule ？？

NgModule！？

  • @NgModuleデコレーターを付与されたクラスのこと
  • モジュールとは、Angularアプリを構成する部品（コンポーネント、サービス、ディレクティブ、パイプなど）をまとめた単位のこと
  • Angularアプリは最低一個のモジュールが必要
  • 起動時に呼ばれるのがルートモジュール（またはメインモジュール）
  • とりあえずNgModule をインポートして@NgModuleデコレーターで構成情報を付与すれば君も今日からモジュールだ！

Angularアプリケーションとは

  • 常に1つの ルートモジュールと多くの 機能モジュール で構成されたもの！

デコレーター （＠）

  • Angularに構成情報を教えてあげるもの
  • モジュール、コンポーネントやサービスなどのクラスに付与して使う

コンポーネント

  • ページを構成するUI部品をまとめた単位のこと
  • 起動時に呼ばれるのがルートコンポーネント（またはメインコンポーネント）
  • Componentをインポートして@Componentデコレーターで構成情報（紐づくビューとか）を付与すればよい
  • コンポーネントで使用したいデータはサービスから注入される

サービス

  • コンポーネント間で共有したいデータやロジックを設定するクラス
  • サービスクラスには@Injectable()デコレーターを付与して共有したいメソッドを定義する
  • これのいいところですが、コンポーネントがサービスクラスを実体化してインスタンス化…とかしなくても、サービスクラス使う宣言すればインスタンス化し放題なところです！
  • そこら辺の仕組みはDIコンテナってやつがうまくやってくれている
  • 依存関係（Dependency）の注入（injetion）なのでDI

■ 4. サービスの追加

今は配列にいろいろ直書きした仮データを表示しているが、この章ではモックサービスを利用していい感じにするらしい。

そもそもコンポーネント内では

データの取得や保存は行わぬ、コンポーネントはデータの受け渡しに専念せねばならぬのだ。なので、その他の処理はServiceクラスに任せよう！！

HeroServiceを作成しよう

ng generate service heroってやるとまたも良い感じにファイルが作成される。src/appの直下に出来るのがちょっとイヤ！今度はCREATE のみのようだ。

CREATE src/app/hero.service.spec.ts (347 bytes)
CREATE src/app/hero.service.ts (133 bytes)

生成されたhero.service.tsは@Injectable()があらかじめ付与されていた、()の中に構成情報が書かれている。 デフォルトでprovidedIn: 'root'となっているが、ここでは依存性の注入方法を宣言しており、ルート指定するとアプリケーション全体で使用できるみたい…むしろ、こうしないと使えないぜ！

データの取得

  • データは例えばAPI、ローカルストレージ、モックデータなど色んなとこからやってくるが、サービスに取得ロジックを書いてあげればコンポーネントはただ受け取り屋さんになれるので便利！
  • 今回は引き続きモックデータを使うので、HEROESをインポートし、取ってきた結果を入れるようの配列も必要なのでHeroもインポートする
  • あとはgetメソッドつくればOK！
  getHeroes(): Hero[] {
    return HEROS;
  }

HeroesComponent の更新

  • 上記の通りコンポーネントで直接データを取得する必要はないため、「2. リストの表示＞ヒーローのモックを作成」で作ったモッククラスのインポートは削除する
  • そんで、今作ったサービスをインポートする！
  • Heroクラスはインポート済なので、もらったデータをheroesに設定できるように書き換える
  • このままではサービスはまだ使えない、サービスの注入を行おう
  • コンストラクタを追加して、引数にHeroServiceを渡してあげればOK
 constructor(private heroService: HeroService) {}

HeroesComponentでデータをゲット

  • するには、注入されたサービスのgetメソッドを使いましょう
// サービスからheroesを取得
  getHeros() {
    this.heroes = this.heroService.getHeroes();
  }
  • getメソッドはngOnInit()というメソッドで呼び出して使う、コンストラクタは使わないのか？オーキドのことば、ものにはつかいどころがあるんじゃ…！

ngOnInit()

  ngOnInit(){
    this.getHeros();
  }
  • ここまでやれば、画面が動く！

いったん整理

  • src/app
    • app.component
    • app.module
      • ルートモジュール
    • hero.service
      • サービスクラス、今回はモックデータゲットに使う
    • hero
      • Hero型
    • mock-heros
      • モックデータ入りのHero型配列
  • src/app/heroes
  • src/app/hero-detail
    • hero-detail.component
      • heroesから詳細画面を分割したもの

■ 感想

DI完全に理解した！！