- This is a data-driven app that stores and displays a list of heroes, edits their details and allows navigation of the data using different views.
- Tutorial code from Angular - see 👏 Inspiration below.
- Note: to open web links in a new window use: ctrl+click on link
- This app does the following:
- Uses built-in Angular directives to show and hide elements and display lists of hero data.
- Creates Angular components to display hero details and show an array of heroes.
- Uses one-way data binding for read-only data.
- Adds editable fields to update a model with two-way data binding.
- Binds component methods to user events, like keystrokes and clicks.
- Enables users to select a hero from a master list and edit that hero in the details view.
- Formats data with pipes.
- Creates a shared service to assemble the heroes.
- Uses routing to navigate among different views and their components.
.
- Angular v13
- Angular In-memory-web-api v0.13.0 for Angular demos and tests that emulate CRUD operations over a RESTy API. For dev only.
- Reactive Extensions for Javascript -RxJS v7 library used for reactive programming using the observable type.
- Run
ng servefor a dev server. - Navigate to
http://localhost:4200/. The app will automatically reload if you change any of the source files.
- in-memory-data-service file
// Angular in-memory web api module
// This provides the InMemoryDataService as a parameter for the .forRoot method of the InMemoryServiceiModule module.
// Overrides the createDb() method.
import { InMemoryDbService } from 'angular-in-memory-web-api';
import { Hero } from './hero';
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class InMemoryDataService implements InMemoryDbService {
createDb() {
const heroes = [
{ id: 11, name: 'Mr. 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;
}
constructor() { }
}- CRUD operations: heroes can be created, read, updated (name only) and deleted from a 'My Heroes' list.
- Clicking on a hero routes to a hero details page.
- A 'Messages' list records fetching and deleting of heroes from the My Heroes list.
- Status: Working app with in-memory database storage of heroes.
- To-Do: add theme colors and functionality.
- This project is licensed under the terms of the MIT license.
- Repo created by ABateman, email: gomezbateman@yahoo.com