Skip to content

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

License

Notifications You must be signed in to change notification settings

AndrewJBateman/angular-tour-of-heroes

Repository files navigation

⚡ 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

GitHub repo size GitHub pull requests GitHub Repo stars GitHub last commit

📄 Table of contents

📚 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

Example screenshot.

📶 Technologies

💾 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

📁 License

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

✉️ Contact

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published