这一文开始，正式开始编写一个简单的angular小demo并演示

第一步，创建一个新的组件
命令：ng g component heroes --spec=false
命令不懂的可以参考我的“angular命令”一文
这条指令执行之后会在src/app下创建一个heroes的文件夹，并且在里面自动生成这个heroes组件的基本文件，并且为你自动生成代码，看吧，指令还是很好用的。

这里先做一下拓展，进一步了解ts文件。多学点总没坏处：
先上刚刚生成的ts文件的代码：

import {Component,OnInit} from '@angular/core';@Component({selector:'app-heroes',templateUrl:'./heroes.component.html',styleUrls:['./heroes.component.css']
})
export class HeroesComponent implements OnInit{constructor(){}ngOnInit(){}
}

解释代码：
首先第一行的导入，比以前多了一个OnInit，所以我们可以总结一下，导入的语法就是：

import {导入的模块名，多个模块用逗号分隔} from '从哪里导入的';

这样的话，我们可以知道@Component为什么是Component，我们甚至可以去@angualr/core里面找到Component
OnInit同上。

然后再看下面@Componnet元数据那一块和之前没啥大改变，我们直接看代码。

类的代码中多了两个代码：constructor和ngOnInit这两个方法
那么这俩方法是什么呢？为什么要自动生成这两个方法呢？
contructor：这个是构造方法，自然要生成
ngOnInit：这个是生命周期的狗子，在angular创建完UI，然后就会调用ngOnInit()，这里是放数据初始化的好地方，所以也会自动生成。

Ok，拓展完了，待会用到ts文件，也不至于临时拓展，打乱思路了。
回到实战：
现在heroes.component.ts文件中创建个变量：

hero = ‘Windstrom’;

然后再heroes.component.html文件中引用一下这个变量：

{{hero}}

至于为什么这样引用，先不着急知道，着急的可以看一下我的“angualr语法”一文。先知道这能让html中使用ts定义的变量，是这样用就行。

现在我们的heroes模块已经构建完了，并且“个性化”的用了一下我们自定义的一个变量hero
但是现在启动项目（ng serve），并没有显示，这是为什么呢？
细心的朋友已经还行啦了，我们只是创建了模块，并没有引用这个模块呀。
怎么引用呢？
这就要用到我们之前讲过的“选择器（@Component中的selector）”了
因为我们的模块已经定义了这个模块的别名（就是选择器上定义的）叫做“app-heroes"，并且我们这个模块对应的ts文件，也是export的，也就是共有的。
好的，前置条件都满足了，那么我们希望启动项目就看到我们的模块，于是我们需要想到app是项目的根目录，所以也是最先开始的目录，所以我们需要找一下，app这个模块的html，然后引用我们的app-heroes这个模块
代码如下：
src/app /app.component.html文件：

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

这里应该理解selector的作用了吧，你相当于定义了一个html的标签，就先<a>标签<div>>标签一样。

这里再做一下拓展思考，会用也要会举一反三：
app这个模块，也有一个选择器，可以自己去找一下。
我们想：为什么启动项目，上来就显示app的html，是不是也有什么地方调用了个选择器的标签呢？
答案是肯定的，我们看到项目最外层目录（和app目录同级）中，有一个叫做index.html的文件，有过前端开发经验的都明白，这个是主页
我们打开这个文件，里面确实有一句<app-root></app-root>
至此，我们应该明白了，将组件不断的拼接，不断的显示，依靠的就是”选择器”。

Ok，拓展到此结束，我们更加熟悉了一下angualr中的ts文件以及一部分显示的原理。我们也确实的发现了angular的优点，最起码，很规范，各文件各司其职，对于复杂项目，确实很适合。

不讲多了，慢慢消化，本系列下一节，面向对象在angular中的应用篇，教你做个实体类，动态显示一些数据。