scrimba
Build Your First Angular app
Angular Services and Http - Injecting a Service into a Component
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Angular Services and Http - Injecting a Service into a Component
AboutCommentsNotes
Angular Services and Http - Injecting a Service into a Component
Expand for more info
src
app
core
data.service.ts
run
preview
console
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Observable } from 'rxjs/Observable';
import { map, catchError } from 'rxjs/operators';

import { ICustomer, IOrder } from '../../app/shared/interfaces';

@Injectable()
export class DataService {

baseUrl: string = 'assets/';

constructor(private http: HttpClient) { }

getCustomers() : Observable<ICustomer[]> {
return this.http.get<ICustomer[]>(this.baseUrl + 'customers.json')
.pipe(
catchError(this.handleError)
);
}

getCustomer(id: number) : Observable<ICustomer> {
return this.http.get<ICustomer[]>(this.baseUrl + 'customers.json')
.pipe(
map(customers => {
let customer = customers.filter((cust: ICustomer) => cust.id === id);
return (customer && customer.length) ? customer[0] : null;
}),
catchError(this.handleError)
)
}

getOrders(id: number) : Observable<IOrder[]> {
return this.http.get<IOrder[]>(this.baseUrl + 'orders.json')
.pipe(
map(orders => {
let custOrders = orders.filter((order: IOrder) => order.customerId === id);
return custOrders;
}),
catchError(this.handleError)
);
}


private handleError(error: any) {
console.error('server error:', error);
if (error.error instanceof Error) {
const errMessage = error.error.message;
return Observable.throw(errMessage);
// Use the following instead if using lite-server
// return Observable.throw(err.text() || 'backend server error');
}
return Observable.throw(error || 'Node.js server error');
}

}
Console
"Angular is running in the development mode. Call enableProdMode() to enable the production mode."
,
customers
-4:52