This Tour of Heroes tutorial shows you how to set up your local development environment and develop an application using the Angular CLI tool, and provides an introduction to the fundamentals of Angular.
The Tour of Heroes application that you build helps a staffing agency manage its stable of heroes. The application has many of the features you'd expect to find in any data-driven application. The finished application acquires and displays a list of heroes, edits a selected hero's detail, and navigates among different views of heroic data.
You will find references to and expansions of this application domain in many of the examples used throughout the Angular documentation, but you don't necessarily need to work through this tutorial to understand those examples.
By the end of this 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. You'll learn enough Angular to get started and gain confidence that Angular can do whatever you need it to do.
This project was generated with Angular CLI version 13.2.6.
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.
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.