TUTORIAL : Routing

https://angular.io/tutorial/toh-pt5

There are new requirements for the Tour of Heroes app:

• Add a Dashboard view.
• Add the ability to navigate between the Heroes and Dashboard views.
• When users click a hero name in either view, navigate to a detail view of the selected hero.
• When users click a deep link in an email, open the detail view for a particular hero.

Summary

1. You added the Angular router to navigate among different components.
2. You turned the AppComponent into a navigation shell with links and a .
3. You configured the router in an AppRoutingModule
4. You defined simple routes, a redirect route, and a parameterized route.
5. You used the routerLink directive in anchor elements.
6. You refactored a tightly-coupled master/detail view into a routed detail view.
7. You used router link parameters to navigate to the detail view of a user-selected hero.
8. You shared the HeroService among multiple components.

Tutorial: Tour of Heroes

The Tour of Heroes tutorial covers the fundamentals of Angular.
In this tutorial you will 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.

By the end of the tutorial you will be able to do the following:

• Use built-in Angular directives to show and hide elements and display lists of hero data.
• Create Angular components to display hero details and show an array of heroes.
• Use one-way data binding for read-only data.
• Add editable fields to update a model with two-way data binding.
• Bind component methods to user events, like keystrokes and clicks.
• Enable users to select a hero from a master list and edit that hero in the details view.
• Format data with pipes.
• Create a shared service to assemble the heroes.
• Use routing to navigate among different views and their components.

config package.json
repository, bugs url.

https://angular.io/tutorial/toh-pt3

https://angular.io/tutorial/toh-pt4

Summary

1. You refactored data access to the HeroService class.
2. You provided the HeroService in the root AppModule so that it can be injected anywhere.
3. You used Angular Dependency Injection to inject it into a component.
4. You gave the HeroService get data method an asynchronous signature.
5. You discovered Observable and the RxJS Observable library.
6. You used RxJS of() to return an Observable of mock heroes (Observable<Hero[]>).
7. The component's ngOnInit lifecycle hook calls the HeroService method, not the constructor.
8. You created a MessageService for loosely-coupled communication between classes.
9. The HeroService injected into a component is created with another injected service, MessageService.

HTTP

https://angular.io/tutorial/toh-pt6

In this tutorial, you'll add the following data persistence features with help from Angular's HttpClient.

• The HeroService gets hero data with HTTP requests.
• Users can add, edit, and delete heroes and save these changes over HTTP.
• Users can search for heroes by name.

When you're done with this page, the app should look like this live example / download example.

Summary

You're at the end of your journey, and you've accomplished a lot.

1. You added the necessary dependencies to use HTTP in the app.
2. You refactored HeroService to load heroes from a web API.
3. You extended HeroService to support post(), put(), and delete() methods.
4. You updated the components to allow adding, editing, and deleting of heroes.
5. You configured an in-memory web API.
6. You learned how to use Observables.

This concludes the "Tour of Heroes" tutorial. You're ready to learn more about Angular development in the fundamentals section, starting with the Architecture guide.

create heroes editor component using Angular CLI.

ng generate component heroes

Architecture Overview

Angular is a framework for building client applications in HTML and either JavaScript or a language like TypeScript that compiles to JavaScript.

The framework consists of several libraries, some of them core and some optional.

changes application title to "Tour of Heroes Angular app".

That shows how to view-data bindings.

displaying a list
https://angular.io/tutorial/toh-pt2

Config Build, Test and Deploy with Travis CI