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 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...