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)));
   }
}

上述程序需要注意以下几点。

• 使用 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 文件中检索的数据。