Angular2 基础实践( 二 )- 创建一个简单的组件(含视频)

前端之家收集整理的这篇文章主要介绍了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非常方便,推荐使用。

猜你在找的Angularjs相关文章