diff --git a/package-lock.json b/package-lock.json index f542efa..8263844 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "@angular/forms": "^20.0.0", "@angular/platform-browser": "^20.0.0", "@angular/router": "^20.0.0", + "angular-in-memory-web-api": "^0.20.0", "rxjs": "~7.8.0", "tslib": "^2.3.0" }, @@ -3378,6 +3379,20 @@ } } }, + "node_modules/angular-in-memory-web-api": { + "version": "0.20.0", + "resolved": "https://registry.npmjs.org/angular-in-memory-web-api/-/angular-in-memory-web-api-0.20.0.tgz", + "integrity": "sha512-piEcu1MvHOnPnESSFgzHEz9YUDxqQ1WbH8yp9f0sXr+//dTEEj/pY6YY7OthBSUP/DLTAEE4itE1SOYs0dOKMA==", + "license": "MIT", + "dependencies": { + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/common": "^20.0.0", + "@angular/core": "^20.0.0", + "rxjs": "^6.5.3 || ^7.4.0" + } + }, "node_modules/ansi-escapes": { "version": "4.3.2", "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz", diff --git a/package.json b/package.json index a438fa1..93774a8 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "@angular/forms": "^20.0.0", "@angular/platform-browser": "^20.0.0", "@angular/router": "^20.0.0", + "angular-in-memory-web-api": "^0.20.0", "rxjs": "~7.8.0", "tslib": "^2.3.0" }, diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 5ba68b4..9b9488d 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,8 +1,8 @@ import { Component } from '@angular/core'; - import { MessagesComponent } from "./messages/messages.component"; import { RouterLink, RouterOutlet } from '@angular/router'; + @Component({ selector: 'app-root', templateUrl: './app.component.html', diff --git a/src/app/app.config.ts b/src/app/app.config.ts index 2e06ce8..4f0658a 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -1,12 +1,15 @@ -import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection } from '@angular/core'; +import { ApplicationConfig, importProvidersFrom, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection } from '@angular/core'; import { provideRouter } from '@angular/router'; import { routes } from './app.routes'; +import { InMemoryWebApiModule } from 'angular-in-memory-web-api'; +import { InMemoryDataService } from './in-memory-data.service'; export const appConfig: ApplicationConfig = { providers: [ provideBrowserGlobalErrorListeners(), provideZonelessChangeDetection(), - provideRouter(routes) + provideRouter(routes), + importProvidersFrom(InMemoryWebApiModule.forRoot(InMemoryDataService, {delay:150})) ] -}; +}; \ No newline at end of file diff --git a/src/app/hero.service.ts b/src/app/hero.service.ts index 488a84e..9736bd8 100644 --- a/src/app/hero.service.ts +++ b/src/app/hero.service.ts @@ -1,8 +1,9 @@ import { Injectable } from '@angular/core'; import { Hero } from './hero'; import { HEROES } from './mock-heroes'; -import { Observable, of } from 'rxjs'; +import { catchError, Observable, of, tap } from 'rxjs'; import { MessageService } from './message.service'; +import { HttpClient, HttpHeaders } from '@angular/common/http'; @Injectable({ providedIn: 'root' @@ -10,13 +11,25 @@ import { MessageService } from './message.service'; export class HeroService { - constructor(private messageService: MessageService) { } + constructor( + private http: HttpClient, + private messageService: MessageService) { } -getHeroes(): Observable { - const heroes = of(HEROES); - this.messageService.add('HeroService: fetched heroes'); - return heroes; -} + /*getHeroes(): Observable { + const heroes = of(HEROES); + this.messageService.add('HeroService: fetched heroes'); + return heroes; + } */ + + + /** GET heroes from the server */ + getHeroes(): Observable { + return this.http.get(this.heroesUrl) + .pipe( + tap(_ => this.log('fetched heroes')), + catchError(this.handleError('getHeroes', [])) + ); + } getHero(id: number): Observable { // For now, assume that a hero with the specified `id` always exists. @@ -26,4 +39,32 @@ getHeroes(): Observable { return of(hero); } -} \ No newline at end of file + /** Log a HeroService message with the MessageService */ + private log(message: string) { + this.messageService.add(`HeroService: ${message}`); + } + private heroesUrl = 'api/heroes'; // URL to web api + + /** + * Handle Http operation that failed. + * Let the app continue. + * + * @param operation - name of the operation that failed + * @param result - optional value to return as the observable result + */ +private handleError(operation = 'operation', result?: T) { + return (error: any): Observable => { + + // TODO: send the error to remote logging infrastructure + console.error(error); // log to console instead + + // TODO: better job of transforming error for user consumption + this.log(`${operation} failed: ${error.message}`); + + // Let the app keep running by returning an empty result. + return of(result as T); + }; +} + + +} diff --git a/src/app/in-memory-data.service.ts b/src/app/in-memory-data.service.ts new file mode 100644 index 0000000..9402d9e --- /dev/null +++ b/src/app/in-memory-data.service.ts @@ -0,0 +1,32 @@ +import { Injectable } from '@angular/core'; +import { InMemoryDbService } from 'angular-in-memory-web-api'; +import { Hero } from './hero'; + +@Injectable({ + providedIn: 'root', +}) +export class InMemoryDataService implements InMemoryDbService { + createDb() { + const heroes = [ + { id: 12, name: 'Dr. Nice' }, + { id: 13, name: 'Bombasto' }, + { id: 14, name: 'Celeritas' }, + { id: 15, name: 'Magneta' }, + { id: 16, name: 'RubberMan' }, + { id: 17, name: 'Dynama' }, + { id: 18, name: 'Dr. IQ' }, + { id: 19, name: 'Magma' }, + { id: 20, name: 'Tornado' } + ]; + return {heroes}; + } + + // Overrides the genId method to ensure that a hero always has an id. + // If the heroes array is empty, + // the method below returns the initial number (11). + // if the heroes array is not empty, the method below returns the highest + // hero id + 1. + genId(heroes: Hero[]): number { + return heroes.length > 0 ? Math.max(...heroes.map(hero => hero.id)) + 1 : 11; + } +}