https://github.com/ogm710811/tutorial-tour-of-heroes

The Tour of Heroes tutorial covers the fundamentals of Angular 6
https://github.com/ogm710811/tutorial-tour-of-heroes

angular-dependency-injection angular-directives angular6 css3 html5 one-way-data-binding routing shared-service

Last synced: 11 days ago
JSON representation

The Tour of Heroes tutorial covers the fundamentals of Angular 6

• Host: GitHub
• URL: https://github.com/ogm710811/tutorial-tour-of-heroes
• Owner: ogm710811
• License: mit
• Created: 2018-08-28T21:14:19.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-08-31T00:13:44.000Z (over 6 years ago)
• Last Synced: 2024-11-15T02:33:30.697Z (2 months ago)
• Topics: angular-dependency-injection, angular-directives, angular6, css3, html5, one-way-data-binding, routing, shared-service
• Language: TypeScript
• Size: 168 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Tutorial-Tour-of-Heroes

In [this tutorial](https://angular.io/tutorial) I build an app that helps a staffing agency manage its stable of heroes.

This basic app has many of the features you'd expect to find in a data-driven application. It acquires and displays a list of heroes, edits a selected hero's detail, and navigates among different views of heroic data.

## In this tutorial I practiced the following:

1. Use built-in Angular directives to show and hide elements and display lists of hero data.

2. Create Angular components to display hero details and show an array of heroes.

3. Use one-way data binding for read-only data.

4. Add editable fields to update a model with two-way data binding.

5. Bind component methods to user events, like keystrokes and clicks.

6. Enable users to select a hero from a master list and edit that hero in the details view.

7. Format data with pipes.

8. Create a shared service to assemble the heroes.

9. Use routing to navigate among different views and their components.

## The following diagram captures all of the navigation options.

![alt tag](https://github.com/ogm710811/Tutorial-Tour-of-Heroes/blob/master/src/assets/img/nav-diagram.png "diagram of the navigation options")