angular的hero例子（代码讲解）

作为 官网的例子，以这个例子入门angular

新建一个项目：

然后

ng generate component heroes

代码：

heroes.component.ts

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };

  constructor() { }

  ngOnInit() {
  }

}

heroes.component.html

<h2>{{ hero.name | uppercase }} Details</h2>
<p><span>id: </span>{{hero.id}}</p>
<p>
  <label>name:
    <input [(ngModel)]="hero.name" placeholder="name">
  </label>
</p>

app.component.html

<h1>{{title}}</h1>
<app-heroes></app-heroes>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Tour of Heroes';
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here

import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';

@NgModule({
  declarations: [
    AppComponent,
    HeroesComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

hero.ts

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