Angular 2-HTTPを使用したCRUD操作

この章で説明する基本的なCRUD操作は、Angular 2を使用したWebサービスからのデータの読み取りです。

例

この例では、製品の単純な json ファイルであるデータソースを定義します。次に、 json ファイルからデータを読み取るために使用されるサービスを定義します。次に、メインのapp.component.tsファイルでこのサービスを使用します。

ステップ1 *-まず、Visual Studioコードでproduct.jsonファイルを定義しましょう。

製品サービス

products.jsonファイルに、次のテキストを入力します。これは、Angular JSアプリケーションから取得されるデータになります。

[{
   "ProductID": 1,
   "ProductName": "ProductA"
},

{
   "ProductID": 2,
   "ProductName": "ProductB"
}]

ステップ2 *-products.jsonファイルからの情報を保存するためのクラス定義となるインターフェースを定義します。 products.tsというファイルを作成します。

製品

ステップ3 *-ファイルに次のコードを挿入します。

export interface IProduct {
   ProductID: number;
   ProductName: string;
}

上記のインターフェイスには、インターフェイスのプロパティとしてProductIDとProductNameの定義があります。

ステップ4 *-app.module.tsファイルに次のコードを含めます-

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { HttpModule } from '@angular/http';

@NgModule ({
   imports:      [ BrowserModule,HttpModule],
   declarations: [ AppComponent],
   bootstrap:    [ AppComponent ]
})
export class AppModule { }

ステップ5 *-Visual Studioコードでproducts.service.tsファイルを定義する

製品の定義

ステップ6 *-次のコードをファイルに挿入します。

import { Injectable } from '@angular/core';
import { Http , Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import { IProduct } from './product';

@Injectable()
export class ProductService {
   private _producturl='app/products.json';
   constructor(private _http: Http){}

   getproducts(): Observable<IProduct[]> {
      return this._http.get(this._producturl)
      .map((response: Response) => <IProduct[]> response.json())
      .do(data => console.log(JSON.stringify(data)));
   }
}

上記のプログラムについて、次の点に注意する必要があります。

「@ angular/http」ステートメントからのインポート\ {Http、Response}を使用して、https関数を使用してproducts.jsonファイルからデータを取得できるようにします。
Observable変数を作成するために使用できるReactiveフレームワークを使用するには、次のステートメントを使用します。 Observableフレームワークを使用して、http応答の変更を検出し、メインアプリケーションに送り返すことができます。

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';

クラスのステートメントprivate _producturl = 'app/products.json’は、データソースの場所を指定するために使用されます。必要に応じて、Webサービスの場所を指定することもできます。
次に、データソースから応答を取得するために使用されるHttp型の変数を定義します。
データソースからデータを取得したら、JSON.stringify（data）コマンドを使用して、ブラウザーのコンソールにデータを送信します。

ステップ7 *-app.component.tsファイルに次のコードを配置します。

import { Component } from '@angular/core';
import { IProduct } from './product';
import { ProductService } from './products.service';
import { appService } from './app.service';
import { Http , Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Component ({
   selector: 'my-app',
   template: '<div>Hello</div>',
   providers: [ProductService]
})

export   class   AppComponent  {
   iproducts: IProduct[];
   constructor(private _product: ProductService) {
   }

   ngOnInit() : void {
      this._product.getproducts()
      .subscribe(iproducts => this.iproducts = iproducts);
   }
}

ここで、コードの主なものは、データソースからのデータをリッスンするためにObservable getproducts（）関数をリッスンするために使用されるサブスクライブオプションです。

すべてのコードを保存し、 npm を使用してアプリケーションを実行します。ブラウザに移動すると、次の出力が表示されます。

Using npm

コンソールには、products.jsonファイルから取得されたデータが表示されます。

Angular2-crud-operations-using-http

Angular 2-HTTPを使用したCRUD操作

例