ANGULARJS2 Building a simple hero editor

Refer to the previous article steps to re-prepare the relevant environment, directory structure to go through.

This time we're going to start creating a real Angularjs project.

Show Us The Heroes

We want to show the hero data in the app

Let's add two attributes: The attribute represents the name of the app, and the attribute represents a hero named "Windstorm". AppComponent title hero

class AppComponent {  'tour ofheroes';   ' windstorm ' ;}

View Code

We now establish data binding for these new properties to update @Component the template specified in the adorner

Template: '

Hero Object

At this moment, our hero has only one name. Obviously, it/she should have more properties. Let's hero change from a string literal to a class.

Creates a Hero class that has id and name attributes. Now put the following code at app.component.ts the top, after the import statement.

Add code in App.component.ts to create the hero class.

class Hero {  id:number;   string ;}

View Code

Now, with a Hero class, we're going to hero replace the type of the component property Hero . 1It is then initialized with the name "Windstorm" as the ID.

In the Appcomponent class, add:

Hero:hero = {  1,  'windstorm'};

View Code

We hero replaced the object from a string, so we also have to update the binding expression in the template to refer to hero the name property.

'  '

View CodeAdd more HTML

It's nice to show names, but we want to see all the attributes of this hero. We'll add one <div> to show the hero's id attributes, and another <div> to show the hero's name attributes.

' ' 

View CodeMulti-line Template string

We can make more readable templates with string addition, but it's still too ugly--hard to read and easy to misspell. No way! We'll use the template strings provided by ES2015 and TypeScript to keep it fresh.

Change the double quotation mark of the template to an inverted quotation mark, and let , and <div> label each row.

Template: ' '

Edit Our Heroes

We want to edit the hero's name in a text box.

The name of the hero from the simple weight of the composition <label> <label> and <input> The combination of elements, like this:

Template: '   " {{Hero.name}} " placeholder="name">  </div>   "

View Code

In the browser, we see the hero's name displayed as a <input> text box. But it still seems a bit out of the way. When we modify the name, our changes are not reflected in the. With one-way data binding, we cannot achieve the desired behavior.

Two-way binding

Our expectation is to show the <input> hero's name in, modify it, and see the changes in all the places that are bound to the hero's name. In short, we need two-way data binding.

Before we let the form input support bidirectional data binding, we had to import the FormsModule module first. Just add it to the NgModule adorner imports array, which is the list of external modules used in the application. This allows us to introduce the form package, which contains the ngModel .

Our module app.module.ts is a

Import {Ngmodule} from '@angular/core'; import {browsermodule} from '@angular/platform-browser'; import {formsmodule} from '@angular/forms'; import {AppComponent} from './app.component'; @NgModule ({imports: [Browsermodule, Formsmodule], declarations: [AppComponent], bootstrap: [AppC Omponent]}) exportclassAppmodule {}

View Code

Next, update the template to include the built-in ngModel directives for bidirectional binding.

Replace with the <input> following HTML

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

Browser refresh. To see our heroes again. We can edit the name of the hero, and we can see that this change is immediately reflected in the .

All right, enter NPM start in the terminal to enjoy the tour.

Look back at the operation we just made;

We start by creating the object and then displaying the properties of the object in the template. As well as double break bindings, Keywords (ngmodel), note to write complete [(Ngmodel)].

ANGULARJS2 Building a simple hero editor