Angular Webアプリ開発入門18

はじめに

今回からテキストボックスに文字列を入力すると、データを検索できる仕組みを作っていく。
一覧ページと詳細ページともに、RecipeServiceを経由してデータを取得できるようにする。

データを管理するサービスを導入する

今回はデータを管理するオブジェクトを導入する。このオブジェクトはコンポーネントからの指示でデータを取り出したり、格納したりする操作をする。このよのうなオブジェクトをAngularでは「サービス」という。サービスを導入するメリットは、様々なメソッドを介してデータの絞り込みや加工ができるようになる。

データを操作するサービスをを作る

ここで「recipe」という名前のサービスを作る。
コマンドで下記のように入力する。
ng g s recipe –module–app

app.module.ts
下記を追加する

mport {BrowserModule }from‘@angular/platform-browser’;

import {NgModule }from‘@angular/core’;

import {AppRoutingModule }from‘./app-routing.module’;

import {AppComponent }from‘./app.component’;

import {RecipeListComponent }from‘./recipe-list/recipe-list.component’;

import {RecipeDataComponent }from‘./recipe-data/recipe-data.component’;

import { RecipeService } from ‘./recipe.service’;

@NgModule({

declarations: [

AppComponent,

RecipeListComponent,

RecipeDataComponent

],

imports: [

BrowserModule,

AppRoutingModule

],

providers: [RecipeService],

bootstrap: [AppComponent]

})

export classAppModule { }

 

サービスにデータを返す機能を実装する

レシピデータを返す機能を実装する。ここでは、recipe.service.tsに2つのメソッドを追加する。

①全データを返す
レシピの全データを返すもの。getRecipedataという名前にする。

②指定したidのデータを返す。
odが指定された時、そのidのデータを返すもの。getRecipeというメソッド名にする。

import {Injectable }from‘@angular/core’;

import { Recipe } from ‘./recipe/recipe’;

import { RECIPEDATA } from ‘./recipe/recipedata’;

@Injectable({

providedIn: ‘root’

})

export classRecipeService {

recipedata:Recipe[]=RECIPEDATA;

constructor() { }

getRecipedata():Recipe[]{

return this.recipedata;

}

getRecipe(id:string):Recipe{

return this.recipedata.find(Recipe=>this.recipedata.indexOf.toString()==id);

}

}

まずは、レシピのモデルを定義しているクラスとレシピとデータの配列を定義しているファイルをインポートする。

import {Recipe }from‘./recipe/recipe’;

import {RECIPEDATA }from‘./recipe/recipedata’;

自身のプロパティとして、このデータを定義する。ここではrecipedataというプロパティ(変数)名とする。

recipedata:Recipe[]=RECIPEDATA;

次にメソッド定義する。まずは、全データを消すメソッドを定義する。これはいま定義したrecipedataの内容を返すようにするだけである。

getRecipe(id:string):Recipe{

return this.recipedata.find(Recipe=>this.recipedata.indexOf.toString()==id);

コンポーネントを修正する

サービスが出来上がったので、一覧表示するコンポーネントと詳細表示するコンポーネントをこのサービスを使えるように修正する。

一覧表示するコンポーネントの修正

recipe-list.component.ts

import {Component,OnInit }from‘@angular/core’;

import { RecipeService } from ‘../recipe.service’;

import { Recipe } from ‘../recipe/recipe’;

@Component({

selector: ‘app-recipe-list’,

templateUrl: ‘./recipe-list.component.html’,

styleUrls: [‘./recipe-list.component.css’]

})

export classRecipeListComponentimplementsOnInit {

recipedata:Recipe[];

constructor(private rsv: RecipeService) { }

ngOnInit() {

this.recipedata = this.rsv.getRecipedata();

}

}

まずはいま作成したRecipeサービスやデータモデルをインポートする。

import {RecipeService }from‘../recipe.service’;

import {Recipe }from‘../recipe/recipe’;

サービスを使うため、このクラスに注入する。ここでは、rsvという名前で注入した。
すなわち、「this.rsv_でサービスのオブジェクトであるRecipeServiceオブジェクトを利用できるようになる。

constructor(privatersv:RecipeService) { }

そして全データを、このRecipeServiceオブジェクトから取得する。そのため、変数を用意する。recipedata:Recipe[];

そして変数に、RecipeServiceオブジェクトから読み込んだデータを設定する。

this.recipedata =this.rsv.getRecipedata();

これでテンプレート側からrecipedataプロパティを参照することで、全レシピデータを取得できる。
すでにrecipedataプロパティから参照するよう作っているので、テンプレート側を修正する必要はなく、テンプレート側はそのまま使える。

詳細表示するコンポーネントの修正

同様にして、詳細表示するコンポーネントにも修正を加える。

recipe-data.component.ts

import {Component,OnInit }from‘@angular/core’;

import {ActivatedRoute }from‘@angular/router’;

import {Location }from‘@angular/common’;

import {Recipe }from‘../recipe/recipe’;

import { RecipeService } from ‘../recipe.service’;

@Component({

selector: ‘app-recipe-data’,

templateUrl: ‘./recipe-data.component.html’,

styleUrls: [‘./recipe-data.component.css’]

})

export classRecipeDataComponentimplementsOnInit {

recipeid:string;

recipe:Recipe;

constructor(privateroute:ActivatedRoute,privatelocation:Location,private rsv: RecipeService) { }

ngOnInit() {

this.recipeid=this.route.snapshot.paramMap.get(‘id’);

this.recipe = this.rsv.getRecipe(this.recipeid);

}

backToList() {

this.location.back();

}

}

このプログラムの修正は、RECIPEDATA変数を直接読み込むのではなくて。RecipeServiceオブジェクトからデータを取得するようにしただけです。まずはRecipeServiceをインポートする。

import {RecipeService }from‘../recipe.service’;

 

このオブジェクトを利用できるようにする

constructor(privateroute:ActivatedRoute,privatelocation:Location,privatersv:RecipeService) { }

RecipeServiceに実装したgetRecipedataメソッドを呼び出すように修正する。

this.recipe =this.rsv.getRecipe(this.recipeid);

 

終わりに

一覧ページと詳細ページともに、RecipeServiceを経由してデータを取得できるようになった。
次回はレシピデータを増やし、レシピの項目を増やす。

 

コメント