angular学习笔记第一天

import {Component} from '@angular/core'

class Hero{
constructor(public id:number,public name:string){
}
}

@Component({
   selector:'app-root',
   template:`
  
展示数据
  
{{title}}
  
My Favourite hero is :{{myHero}}
  
使用ngFor显示数组属性
  

    
    

    {{hero}}
    
  
  

    
    

    id:{{nextHero.id}} name:{{nextHero.name}}
    
  
  
  
ngIf
  

    nextHeroes长度大于3
  
       `
})
export class ShowdataComponent implements OnInit {
  title = "Tour of Hero"
  heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
  myHero = this.heroes[0]
  nextHeroes = [new Hero(1,'Windstorm'),new Hero(2,'Dombasto')]
  constructor() {
  }
  ngOnInit() {
  }
}

1.创建一个Hero类,使用了类的简写语法

• 创建了一个构造函数参数及其类型
• 声明了一个同名的公共属性
• 当创建安该类的实例时，把该属性初始化为相应的参数值
  2.通过Component装饰器制定元数据创建了一个组件
• template 内类模板
• templateUrl 外部模板
• selector css选择器 通过该选择器在index.html寻找合适的加载位置
  3.模板语法
• ngFor、ngIf、数据插值 {{ }}