AndrewJBateman / angular-tour-of-heroes

:clipboard: 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.

⚡ Angular Tour of Heroes

• 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

📄 Table of contents

• ⚡ Angular Tour of Heroes
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• This app does the following:

1. Uses built-in Angular directives to show and hide elements and display lists of hero data.
2. Creates Angular components to display hero details and show an array of heroes.
3. Uses one-way data binding for read-only data.
4. Adds editable fields to update a model with two-way data binding.
5. Binds component methods to user events, like keystrokes and clicks.
6. Enables users to select a hero from a master list and edit that hero in the details view.
7. Formats data with pipes.
8. Creates a shared service to assemble the heroes.
9. Uses routing to navigate among different views and their components.

📷 Screenshots

.

📶 Technologies

• 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.

💾 Setup

• Run ng serve for a dev server.
• Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

💻 Code Examples - from Angular Tour of Heroes code

• 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() { }
}

🆒 Features

• 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 & To-Do List

• Status: Working app with in-memory database storage of heroes.
• To-Do: add theme colors and functionality.

👏 Inspiration

• Angular Tutorial: Tour of Heroes.
• Techie Diaries´s Angular In-Memory Web API Tutorial

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: [e-mail]