Angular2 基础实践（ 二 ）- 建立一个简单的组件（含视频）

组件介绍

Angular1 并无使用组件，受react影响，Angular2引入了组件。

Angular2的组件是这样的：你能够自定义html标签，好比simple-form组件(形如<simple-form></simple-form>)。

Angular2组件基础三部分组成：tmplate模板(对应html)，组件的class部分(js，逻辑)，style样式(css)。

Angular2的定义组件的步骤：从'@angular /core'模块引入Component，而后@Component()函数传入一个Object，而且紧跟一个class就能够定义一个组件了，形如：

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

@Component({
  selector: 'simple-form',// 这边是组件的标签名，对应<simple-form></simple-form>
  templateUrl: './simple-form.component.html',// 这边定义了模板文件的位置
  styleUrls: ['./simple-form.component.css']// 这边定义了的样式
})
export class SimpleFormComponent {
  // 这边要紧跟一个class组件才算完整，class里面写逻辑
}

angular2组件中定义的样式只对该组件有效，父子组件都无效(多是没有父子组件这种概念，注意别被我误导)。web前端开发如今有组件化的趋势，react甚至想把组件化带到iOS，android(react-native)。本人使用组件化的体验: 没了以前写mvc的纠结(建立class要先想一想这是model，仍是view，仍是controller，并且这种纠结并没让我感到提高了代码质量)。

下面是一个建立组件的视频，跟着这个视频咱们会建立第一个本身的component(组件)，视频中使用了angular-cli(angular命令行工具 )建立组件，注意到命令后面加了inline style和inline template，默认的命令会把css，html分出去成为单独的文件，加了这俩会整合成在一个ts文件内，这一点跟上面的代码不一样，视频中的template和style会和class在一个ts文件中。

视频连接-腾讯精品课

plnkr连接，能够在这里测试一下代码

视频中的名词注释

angular-cli.json: 这个文件是angular-cli的配置文件，使用angular-cli开发angular2很是方便，推荐使用。