Angular 2 - 使用 HTTP 進行 CRUD 操作

我們將在本章中探討的基本 CRUD 操作是從 Web 服務中使用 Angular 2 讀取資料。

示例

在這個示例中，我們將定義一個數據源，它是一個簡單的json產品檔案。接下來，我們將定義一個服務，該服務將用於從json檔案中讀取資料。然後，我們將在我們的 main app.component.ts 檔案中使用此服務。

步驟 1 - 首先，讓我們在 Visual Studio Code 中定義我們的 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 Code 中定義一個 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)));
   }
}

關於以上程式，需要注意以下幾點。

import {Http, Response} from '@angular/http' 語句用於確保可以使用 http 函式從 products.json 檔案獲取資料。
以下語句用於使用 Reactive 框架，該框架可用於建立 Observable 變數。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);
   }
}

這裡，程式碼中的主要內容是 subscribe 選項，它用於偵聽 Observable getproducts() 函式以偵聽來自資料來源的資料。

現在儲存所有程式碼並使用npm執行應用程式。轉到瀏覽器，我們將看到以下輸出。

在控制檯中，我們將看到從 products.json 檔案檢索到的資料。

列印頁面