Tour of Heroes


Welcome to the world of front-end frameworks! You should be excited, you’re about to take your first step in learning one of most required technologies of our time. Most job applications require knowledge of a Javascript front-end solutions, tried and tested tools for building scalable, interactive web applications.

The good news is that if you’ve been through the MVC area, learning the basics of Angular will be a breeze. It does most of the heavy lifting that Javascript does in MVC, so you’ll be building sooner than you imagine.

Make no mistake, Angular and React are massive. There’s a fair amount of complexity and the learning curve is definitely steep. So be patient, you won’t become an expert overnight. However, these frameworks are very welcoming to beginners. Building simple apps with them is somewhat straightforward, so be careful not to get caught into unnecessary complexities early on. Let’s build a few simple apps first. And what better way to start than building a Coffee app? ☕🤩


From Angular’s documentation page: '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.'

  • This project has only one requirement: You should complete the "Tour of Heroes" app in Angular's documentation page.


All you need for this project is the beginners tutorial provided by the Angular team:

Since this is your first Angular project, we will keep it very simple. There won’t be any .NET or C# this time, you’ll focus on Angular only. And the documentation will provide everything you need for your first app.


  • Don't rush, everything here will be new, so take your time to understand each line of code.
  • Make notes. Here are three types of notes you can take: 1. Lists of steps to build things; 2. Concepts you're first learning about; 3. Things you find interesting and likely to use in the future. Keep your notes short.
  • If you feel you didn't retain much, you could redo the app and/or modify it and/or create a different app based on the gained knowledge. Tweaking projects goes a long way for content retention.
Log in to mark this article as read and save your progress.
An unhandled error has occurred. Reload 🗙