asi tea ole Tow of eos eoteston a aa Skip to main content This is the archived documentation for Angular v17. Please visit angulardev to see this page for the current version of Angular. Tour of Heroes application and tutorial In this tutorial you build your own Angular application from the start. This is a good way to experience a typical development process as you learn Angular appication-design cancepts, tools, and terminology. IW youre now to Angular ry the Try it now quik-start application fist. Try itnow is based on a ready-made partially completed project. You can edt the application in StackBlitz and see the results in realtime. “Try Itmow covers the same major topics —components template syntax, routing, services, and accessing data using HTTP in a condensed format, following best practices.asi tea ole Tow of eos eoteston a aa ‘torial provides an introduction to the fundamentals of Angular and shows you how Skip to main content ‘+ Sot up your local Angular development environment. ‘+ Use the Angular CL to develop an application, ‘The Tour of Heroes application that you build helps a staffing agency manage its stable of heroes. The application has many of the features that you'd expect to find in any data-driven application, The finished application: + Gets alist of heroes + Displays the heroes in a list + Edits a selected heros details + Navigates between different views of heroic data ‘This tutorial helps you gain confidence that Angular can do whatever you need it to do by showing you how to: hip:ivi7 arguaionseranauterosseve show adh lavent an ply st of ae data Skip to main content srponents to display hero details and show an aray 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, ke keystrokes and clicks. + Enable users to select a hero from alist and edt that hero in the detals view. + Fornat data with pipes. + Greate a shared service to assemble the heroes. + Use routing to navigate among different views and their components, [After you complete all tutorial steps, the final application looks like ths example. live example / download example. Design your new application Here's an image of where this tutorial leads, showing the Dashboard view and the most heroic heroes:asi tea ole Tow of eos eosin a toa Skip to main content Tour of Heroes Dashboard = Heroes, Top Heroes You can click the Dashboard and Heroes links in the dashboard to navigate between the views. I you click the dashboard hero "Magneta,'the router opens a “Hero Details’ view where you can change the hera's name,asi tea ole Tow of eos eosin a toa — Tour of Heroes Dashboard Heroes MAGNETA Details la 15 Hero name:/ Magneta Back Clicking the "Back" button returns you to the Dashboard. Links at the top take you to either of the main views. If you click "Heroes; the application displays the "Heroes! list view. hip:ivi7 arguaionseranauterosasi tea ole Tow of eos eosin a toa — Tour of Heroes Dashboard Heroes. My Heroes Eh ove a EE vow Gees ED opera ee oe a When you click a different hero name, the read-only mini detail beneath the list reflects the new choice. hip:ivi7 arguaionseranauterosole Tow of eos eoteston a aa w Details" button to dil into the editable details of the selected hero. Skip to main content Ine ronowing alagram illustrates the navigation options. Tour of Heroes Ft aehowd [ tat Toto MAGHETA Sete Here's the application in action: hip:ivi7 arguaionseranauteros ey Heroesasi tea ole Tow of eos eosin a toa Skip to main content Tour of Heroes Dashbqerd Heroes Top Heroes nid ianasi tea Doge Tow of ets eoteston a oa Next steps + Croce new project Lastreviewed on Mon May 162022