From 681885aac6e28f9c5aa59aaa904b158001851387 Mon Sep 17 00:00:00 2001 From: Kai Moritz Date: Sat, 16 May 2020 09:17:45 +0200 Subject: [PATCH] 6: Get Data from a Server b) Simulate a data server --- package-lock.json | 5 ++++ package.json | 1 + src/app/app.module.ts | 12 +++++++++- src/app/in-memory-data.service.spec.ts | 16 +++++++++++++ src/app/in-memory-data.service.ts | 33 ++++++++++++++++++++++++++ 5 files changed, 66 insertions(+), 1 deletion(-) create mode 100644 src/app/in-memory-data.service.spec.ts create mode 100644 src/app/in-memory-data.service.ts diff --git a/package-lock.json b/package-lock.json index 96af04e..4d8f28b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2234,6 +2234,11 @@ "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=", "dev": true }, + "angular-in-memory-web-api": { + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/angular-in-memory-web-api/-/angular-in-memory-web-api-0.11.0.tgz", + "integrity": "sha512-QV1qYHm+Zd+wrvlcPLnAcqqGpOmCN1EUj4rRuYHpek8+QqFFdxBNuPZOJCKvU7I97z5QSKHsdc6PNKlpUQr3UA==" + }, "ansi-colors": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz", diff --git a/package.json b/package.json index 8df0093..3598a2c 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@angular/platform-browser": "~9.1.5", "@angular/platform-browser-dynamic": "~9.1.5", "@angular/router": "~9.1.5", + "angular-in-memory-web-api": "^0.11.0", "rxjs": "~6.5.5", "tslib": "^1.10.0", "zone.js": "~0.10.2" diff --git a/src/app/app.module.ts b/src/app/app.module.ts index b76b39d..cffb82a 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -4,6 +4,9 @@ import { AppRoutingModule } from './app-routing.module'; import { FormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; +import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api'; +import { InMemoryDataService } from './in-memory-data.service'; + import { AppComponent } from './app.component'; import { HeroesComponent } from './heroes/heroes.component'; import { HeroDetailComponent } from './hero-detail/hero-detail.component'; @@ -22,7 +25,14 @@ import { DashboardComponent } from './dashboard/dashboard.component'; BrowserModule, AppRoutingModule, FormsModule, - HttpClientModule + HttpClientModule, + + // The HttpClientInMemoryWebApiModule module intercepts HTTP requests + // and returns simulated server responses. + // Remove it when a real server is ready to receive requests. + HttpClientInMemoryWebApiModule.forRoot( + InMemoryDataService, { dataEncapsulation: false } + ) ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/in-memory-data.service.spec.ts b/src/app/in-memory-data.service.spec.ts new file mode 100644 index 0000000..eefd761 --- /dev/null +++ b/src/app/in-memory-data.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { InMemoryDataService } from './in-memory-data.service'; + +describe('InMemoryDataService', () => { + let service: InMemoryDataService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(InMemoryDataService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/in-memory-data.service.ts b/src/app/in-memory-data.service.ts new file mode 100644 index 0000000..5ba3d57 --- /dev/null +++ b/src/app/in-memory-data.service.ts @@ -0,0 +1,33 @@ +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: 11, name: 'Dr Nice' }, + { id: 12, name: 'Narco' }, + { 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; + } +} -- 2.20.1