We add the Angular Component Router and learn to navigate among the views Routing Around the App We received new requirements for our Tour of Heroes application: Add a Dashboard view. Navigate between the Heroes and Dashboard views. Clicking on a hero in either view navigates to a detail view of the selected hero. Clicking a deep link in an email opens the detail view for a particular hero. When we’re done, users will be able to navigate the app like this: We'll add Angular’s Component Rout

We convert our service and components to use Angular's HTTP service Getting and Saving Data Our stakeholders appreciate our progress. Now they want to get the hero data from a server, let users add, edit, and delete heroes, and save these changes back to the server. In this chapter we teach our application to make the corresponding HTTP calls to a remote server's web API. Run the live example for this part. Where We Left Off In the previous chapter, we learned to navigate between the dashboard

Angular's dependency injection system creates and delivers dependent services "just-in-time". Dependency injection is an important application design pattern. Angular has its own dependency injection framework, and we really can't build an Angular application without it. It's used so widely that almost everyone just calls it DI. In this chapter we'll learn what DI is and why we want it. Then we'll learn how to use it in an Angular app. Why dependency injection? Angular dependency injection Inje

We create a reusable service to manage our hero data calls Services The Tour of Heroes is evolving and we anticipate adding more components in the near future. Multiple components will need access to hero data and we don't want to copy and paste the same code over and over. Instead, we'll create a single reusable data service and learn to inject it in the components that need it. Refactoring data access to a separate service keeps the component lean and focused on supporting the view. It also m

User input triggers DOM events. We listen to those events with event bindings that funnel updated values back into our components and models. When the user clicks a link, pushes a button, or enters text we want to know about it. These user actions all raise DOM events. In this chapter we learn to bind to those events using the Angular event binding syntax. Run the live example. Binding to user input events We can use Angular event bindings to respond to any DOM event. The syntax is simple. We s

We refactor the master/detail view into separate components Our app is growing. Use cases are flowing in for reusing components, passing data to components, and creating more reusable assets. Let's separate the heroes list from the hero details and make the details component reusable. Run the live example for this part. Where We Left Off Before we continue with our Tour of Heroes, let’s verify we have the following structure. If not, we’ll need to go back and follow the previous chapters. angu

A form creates a cohesive, effective, and compelling data entry experience. An Angular form coordinates a set of data-bound user controls, tracks changes, validates input, and presents errors. We’ve all used a form to log in, submit a help request, place an order, book a flight, schedule a meeting and perform countless other data entry tasks. Forms are the mainstay of business applications. Any seasoned web developer can slap together an HTML form with all the right tags. It's more challenging

We build a master/detail page with a list of heroes It Takes Many Heroes Our story needs more heroes. We’ll expand our Tour of Heroes app to display a list of heroes, allow the user to select a hero, and display the hero’s details. Run the live example for this part. Let’s take stock of what we’ll need to display a list of heroes. First, we need a list of heroes. We want to display those heroes in the view’s template, so we’ll need a way to do that. Where We Left Off Before we continue with Par

We build a simple hero editor Once Upon a Time Every story starts somewhere. Our story starts where the QuickStart ends. Run the live example for this part. Create a folder called angular2-tour-of-heroes and follow the QuickStart steps which provide the prerequisites, the folder structure, and the core files for our Tour of Heroes. Alternatively, begin with a download of the QuickStart source. We should have the following structure: angular2-tour-of-heroes app app.component.ts app.module.t

Interpolation and other forms of property binding help us show app data in the UI. We typically display data in Angular by binding controls in an HTML template to properties of an Angular component. In this chapter, we'll create a component with a list of heroes. Each hero has a name. We'll display the list of hero names and conditionally show a message below the list. The final UI looks like this: Table Of Contents Showing component properties with interpolation Showing an array property wit