从零详细搭建一个简单的angular项目（4）面向对象在angular中的应用篇

有过java开发经验的朋友再学angular可能会很轻松，因为angular也是用了面向对象的思维去开发的。

面向对象的话，我们先创建一个对象吧。按照下述步骤：
1、在你喜欢的文件夹目录下创建一个叫做hero.ts的文件，这个就是你的对象实体，建议单独创建一个文件夹放置全部的实体文件，方便维护嘛。
2、hero.ts文件：

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

代码比较简单，就是个export（公共）的“接口（不是java中的接口，这里你理解成angular的实体就行）”类，类名叫做Hero
里面有两个属性：number类型的id以及string类型的name
至于那个冒号，你就当成语法吧。
3、在用到的地方，导入这个类，代码为：

import {Hero} from '../hero';

至于后面的../就是路径，看你具体把hero放在哪里了。
导入的名字就是Hero，在你代码中使用这个实体时，就用这个名字代替。

Ok，了解完创建对象，再上一个使用的代码：
heroes.componnent.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:'哈哈'
	}
constructor(){}

ngOnInit(){}
}

导入的那两行代码就不需要解释了，@Component也不用解释了。
我们重点看一下类里面的代码：

hero:Hero = {
		id:1,
		name:'哈哈'
	}

这其实也是初始化，就是定义了一个叫做hero的对象，类型就是Hero，顺便初始化一下，让其id为1，name为“哈哈”。

这个时候要想html显示你初始化的数据，就不能直接{{id}}或者{{name}}了，现在应该是{{hero.id}}或者{{hero.name}}
其实就是将原来的值引用变成了“对象.属性值”的引用。

下一篇，双向绑定以及管道篇