我一直在试图开始使用Angular2,但看起来它已经改变了很多,所以我不是很肯定,如果即时通讯做的方式是一个很好的方式来做到这一点。
我创建了一个服务从一个JSON中获取数据,我的目标是模拟Web API响应或类似的东西,所以在我服务,我创建了一个方法,就这样
loadJsonData() {
return this.http.get('./assets/MyData.json').map(res => res.json());
}
我把这种方法,因为我的主要成分的OnInit,
ngOnInit() {
var games = new Array(data.games.length);
for (var index = 0; index < data.games.length; index++) {
games[index] = data.games[index].title;
}
this.games = games;
});
}
它的工作原理相当不错,但我想知道的最佳实践做这种过程的,如果你有最近的指南采用了棱角分明创建一个CRUD这将是真棒,谢谢大家对你的时间来回答!
下面是一个例子服务提供基本的CRUD操作。此代码是作为这里Pluralsight课程:https://app.pluralsight.com/library/courses/angular-2-reactive-forms/table-of-contents
你可以在这里找到完整的操作代码:https://github.com/DeborahK/Angular2-ReactiveForms
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/of';
import { IProduct } from './product';
@Injectable()
export class ProductService {
private baseUrl = 'api/products';
constructor(private http: Http) { }
getProducts(): Observable<IProduct[]> {
return this.http.get(this.baseUrl)
.map(this.extractData)
.do(data => console.log('getProducts: ' + JSON.stringify(data)))
.catch(this.handleError);
}
getProduct(id: number): Observable<IProduct> {
if (id === 0) {
return Observable.of(this.initializeProduct());
};
const url = `${this.baseUrl}/${id}`;
return this.http.get(url)
.map(this.extractData)
.do(data => console.log('getProduct: ' + JSON.stringify(data)))
.catch(this.handleError);
}
deleteProduct(id: number): Observable<Response> {
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
const url = `${this.baseUrl}/${id}`;
return this.http.delete(url, options)
.do(data => console.log('deleteProduct: ' + JSON.stringify(data)))
.catch(this.handleError);
}
saveProduct(product: IProduct): Observable<IProduct> {
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
if (product.id === 0) {
return this.createProduct(product, options);
}
return this.updateProduct(product, options);
}
private createProduct(product: IProduct, options: RequestOptions): Observable<IProduct> {
product.id = undefined;
return this.http.post(this.baseUrl, product, options)
.map(this.extractData)
.do(data => console.log('createProduct: ' + JSON.stringify(data)))
.catch(this.handleError);
}
private updateProduct(product: IProduct, options: RequestOptions): Observable<IProduct> {
const url = `${this.baseUrl}/${product.id}`;
return this.http.put(url, product, options)
.map(() => product)
.do(data => console.log('updateProduct: ' + JSON.stringify(data)))
.catch(this.handleError);
}
private extractData(response: Response) {
let body = response.json();
return body.data || {};
}
private handleError(error: Response): Observable<any> {
// in a real world app, we may send the server to some remote logging infrastructure
// instead of just logging it to the console
console.error(error);
return Observable.throw(error.json().error || 'Server error');
}
initializeProduct(): IProduct {
// Return an initialized object
return {
id: 0,
productName: null,
productCode: null,
tags: [''],
releaseDate: null,
price: null,
description: null,
starRating: null,
imageUrl: null
};
}
}
UPDATE
对于角度V6及更高版本,使用HttpClient
代替Http
和最新RxJS运营商。
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, of, throwError } from 'rxjs';
import { catchError, tap, map } from 'rxjs/operators';
import { Product } from './product';
@Injectable({
providedIn: 'root'
})
export class ProductService {
private productsUrl = 'api/products';
constructor(private http: HttpClient) { }
getProducts(): Observable<Product[]> {
return this.http.get<Product[]>(this.productsUrl)
.pipe(
tap(data => console.log(JSON.stringify(data))),
catchError(this.handleError)
);
}
getProduct(id: number): Observable<Product> {
if (id === 0) {
return of(this.initializeProduct());
}
const url = `${this.productsUrl}/${id}`;
return this.http.get<Product>(url)
.pipe(
tap(data => console.log('getProduct: ' + JSON.stringify(data))),
catchError(this.handleError)
);
}
createProduct(product: Product): Observable<Product> {
const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
product.id = null;
return this.http.post<Product>(this.productsUrl, product, { headers: headers })
.pipe(
tap(data => console.log('createProduct: ' + JSON.stringify(data))),
catchError(this.handleError)
);
}
deleteProduct(id: number): Observable<{}> {
const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
const url = `${this.productsUrl}/${id}`;
return this.http.delete<Product>(url, { headers: headers })
.pipe(
tap(data => console.log('deleteProduct: ' + id)),
catchError(this.handleError)
);
}
updateProduct(product: Product): Observable<Product> {
const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
const url = `${this.productsUrl}/${product.id}`;
return this.http.put<Product>(url, product, { headers: headers })
.pipe(
tap(() => console.log('updateProduct: ' + product.id)),
// Return the product on an update
map(() => product),
catchError(this.handleError)
);
}
private handleError(err) {
// in a real world app, we may send the server to some remote logging infrastructure
// instead of just logging it to the console
let errorMessage: string;
if (err.error instanceof ErrorEvent) {
// A client-side or network error occurred. Handle it accordingly.
errorMessage = `An error occurred: ${err.error.message}`;
} else {
// The backend returned an unsuccessful response code.
// The response body may contain clues as to what went wrong,
errorMessage = `Backend returned code ${err.status}: ${err.body.error}`;
}
console.error(err);
return throwError(errorMessage);
}
private initializeProduct(): Product {
// Return an initialized object
return {
id: 0,
productName: null,
productCode: null,
tags: [''],
releaseDate: null,
price: null,
description: null,
starRating: null,
imageUrl: null
};
}
}