Angular 2 CRUD 操作使用 HTTP
本章我们将研究的基本 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 文件中获取数据。
-
以下语句用于使用可用于创建 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);
}
}
在这里，代码中的主要内容是 subscribe 选项，用于侦听 Observable getproducts() 函数以侦听来自数据源的数据。
现在保存所有代码并使用 npm .转到浏览器，我们将看到以下输出。
在控制台中，我们将看到从 products.json 文件中检索到的数据。