angular之坑

中文文档

1.设置开发环境

npm install -g @angular/cli

1. 创建新项目

ng new my-app

3.启动开发服务器

cd my-app
ng serve --open

4.创建英雄列表组件

ng generate component heroes

管道

<h2>{{selectedHero.name | uppercase}} Details</h2>

双向绑定

<p><input type="text" [(ngModel)]="hero.name" placeholder="name"></p>

指令：*ngFor

<li *ngFor="let hero of heroes">

指令： *ngIf

<div *ngIf="selectedHero">

添加 click 事件绑定

<li *ngFor="let hero of heroes" (click)="onSelect(hero)">

class绑定

<li *ngFor="let hero of heroes"
  [class.selected]="hero === selectedHero"
  (click)="onSelect(hero)">
  <span class="badge">{{hero.id}}</span> {{hero.name}}
</li>

组件传参@input

<app-hero-detail [hero]='hero'></app-hero-detail>

export class HeroDetailComponent implements OnInit {
  @Input() hero: Hero;
  constructor() { }

  ngOnInit() {
  }
}