Angular 2 Beta, training course "Tour of Heroes" part 1

Part 1 Part 2 Part 3 Part 4

Introduction

This article is based on the Angular 2 documentation and is a translation of two articles - the Intro and the Hero Editor .

Used Angular 2 release is beta.12.

Heroes Tour: Review

Our great plan is to build an application for a recruitment agency for heroes. Even heroes need work!

Of course, this tutorial will cover only the basic concepts. What we create will have many functions that we expect to find in full-scale, data-oriented applications: getting and displaying a list of heroes, editing information about a selected hero, navigating between different representations of data about heroes.

A tour of heroes covers the basics of Angular2. We will use built-in directives to show / hide elements and display lists of these heroes. We will create a component to display the data of the hero and another component to display the set of heroes. We will use one-way data binding for read-only data. We will add editable fields to update the model using two-way data binding. We will associate component methods with custom events, such as keystrokes and mouse clicks. We will learn how to choose a hero from the main list and edit this hero in the details view. We will format the data using feeds. We will create a common service to collect our heroes. And we will use routing to navigate between different views and their components.

We learn Angular2 enough to get started and get the confidence that Angular2 can do everything we need. Much we will consider superficially, but there will be links for in-depth study.

Run sample application.

End of the game

Here is a visual idea of ​​what we will come to on this tour. Let's start with the "Dashboard" view and our most heroic heroes:

Above the panel are two links: Dashboard and Heroes. We could move between the views of the characters by clicking on these links. But we will click on the hero with the name "Magenta", and the router will display us the "Hero Details" view, where we can change the name of the hero.

Pressing the "Back" button will return us to the "Dashboard" view. The links above can lead us to one of the main types. Click on "Heroes" and the application will go to the list of heroes.

If we click on another hero and a mini-detailed will appear at the bottom reflect our choice. Clicking on the "View Details" button will display the familiar look, where we can edit the details of our selected hero. The following diagram shows all possible navigation options.

Here is our application in action:

Further

We will create this tour of heroes together, step by step. We will justify each step on the basis of the requirements that we met in countless applications. There is a reason for everything. And we will meet many of the fundamentals of Angular2 along the way.

Let's start!

Part 1 - Hero Editor

A long time ago

Every story starts somewhere. Our story begins where QuickStart ends.

Create a folder named angular2-tour-of-heroes and follow the steps from QuickStart , which provide the necessary conditions, folder structure and files for our tour of heroes.

But instead, you can download ready-made QuickStart source files .

We should have the following structure:

 angular2-tour-of-heroes app app.component.ts main.ts node_modules ... typings ... index.html package.json styles.css tsconfig.json typings.json 

Support code conversion and application execution

We want to run a TypeScript compiler so that it also tracks changes in the files and compiles at once, and run our web server. We will do this by typing:

 npm start 

This command will launch the compiler in monitoring mode, start the server, launch the application in the browser and track changes as we make a tour of the heroes.

Let's show our hero

We want to display the data of the hero in our application.
Let's add two properties to our AppComponent , the title property for the application name and the hero property for a hero named "Windstorm".

app.component.ts (AppComponent class)

 export class AppComponent { public title = 'Tour of Heroes'; public hero = 'Windstorm'; } 

Now we update the template in the @Component annotation, adding data binding for these new properties.

 template: '<h1>{{title}}</h1><h2>{{hero}} details!</h2>' 

The browser should refresh the page and display our title and hero.

Double braces tell our application to read the name and properties of the hero from the component and display them. This is the "interpolation" form of one-way data binding.

Learn more about interpolation in the Data Display chapter

Hero object

At the moment, our hero is just a name. Our hero needs more properties. Let's transform the hero from line to class.

Create a hero class with id and name properties. Now we will place it at the top of the app.component.ts file, just below the import statement.
app.component.ts (Hero class)

 export class Hero { id: number; name: string; } 

Now that we have a hero class, let's refactor the hero property of your component so that it has a Hero type. Then we initialize it with id 1 and the name "Windstorm".
app.component.ts (Hero property)

 public hero: Hero = { id: 1, name: 'Windstorm' }; 

Since we changed the hero from line to object, we update the linking in the template to refer to the name property of the hero.

 template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>' 

The browser is updated and continues to display the name of our hero.

Add more HTML

The display of the name is good, but we want to see all the properties of our hero. We will add one <div> for our id property and another <div> for the hero's name property.

 template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2><div><label>id: </label>{{hero.id}}</div><div><label>name: </label>{{hero.name}}</div>' 

Oh, our pattern string is getting long. Care must be taken to avoid the risk of making a typo in the template.
app.component.ts (AppComponent's template)

 template:` <h1>{{title}}</h1> <h2>{{hero.name}} details!</h2> <div><label>id: </label>{{hero.id}}</div> <div><label>name: </label>{{hero.name}}</div> ` 

Editing our hero

We want to be able to edit the name of the hero in the text field.
Change the name of the hero - from <label> to <label> and <input> , as shown below:
app.component.ts (input element)

 template:` <h1>{{title}}</h1> <h2>{{hero.name}} details!</h2> <div><label>id: </label>{{hero.id}}</div> <div> <label>name: </label> <input value="{{hero.name}}" placeholder="name"> </div> ` 

We see in the browser that the name of the hero appears in the <input> text box. But something is wrong here. When we change the name, we notice that our change is not reflected in <h2> . We will not get the desired behavior using one-way binding to <input> .

Duplex binding

We intend to display the name of the hero in <input> , change it and see these changes wherever they are associated with the name of the hero. In short, we want data binding to be two-way.
Let's update the template to use the ngModel built-in directive for two-way binding.

You can learn more about ngModel in the chapters on Forms and Syntax of patterns .

Replace <input> with the next HTML

 <input [(ngModel)]="hero.name" placeholder="name"> 

The browser is updated. We see our hero again. We can change the name of the hero and see that the changes are immediately reflected in <h2> .

The way we walked

Let's summarize what we have done.

• Our Heroes Tour uses double interpolation braces (one-way data binding form) to display the application name and properties of the Hero object.
• We wrote a multi-line template using the ES2015 template lines to make our template more readable.
• We can simultaneously display and change the name of the hero by adding two-way data binding to the <input> element, using the directive embedded in ngModel .
• The ngModel directive also passes changes to any other hero.name bundle.

Here is the full content of app.component.ts , for the time being:
app.component.ts

  import {Component} from 'angular2/core'; export class Hero { id: number; name: string; } @Component({ selector: 'my-app', template:` <h1>{{title}}</h1> <h2>{{hero.name}} details!</h2> <div><label>id: </label>{{hero.id}}</div> <div> <label>name: </label> <input [(ngModel)]="hero.name" placeholder="name"> </div> ` }) export class AppComponent { public title = 'Tour of Heroes'; public hero: Hero = { id: 1, name: 'Windstorm' }; } 

The way ahead

Our Heroes Tour displays only one hero, while we want to display a list of heroes. We also want to allow the user to select a hero and display his data. We will learn more about how to get lists, link them to a template, and allow the user to make selections in it in the next chapter .

Result of the first part:

Run the application, part 1