angular2学习笔记之基本组件和ngFor

angular2的思想非常先进,摒弃了angular1那种复杂的构建模式,采用了组件化开方的方,那我们一起来看一看,一个基础的组件是什么样子的呢。angular2-demo

一、简介

1. 目录结构

  • .ts 组件代码
  • .scss 样式
  • .png 效果图
  • .html 模板文件

2. 效果图

二、代码实例

https://github.com/houko/angular2-demo/tree/master/src/ts/component/basic

三、 详细解读

1. Basic.ts

一个基本的组件就长个样子,并没有那么神秘

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
import {Component} from '@angular/core';
import {UserModel} from './../../model/UserModel';

// 创建模拟数据
let xiaomo:UserModel = new UserModel( 'xiaomo');
let xiaoming:UserModel = new UserModel('xiaoming');

@Component({
	selector: 'basic',
	styles:[require('./Basic.scss')], //内联样式,注意使用row-loader
	template: require('./Basic.html')
})

export class BasicComponent {

	users:Object;
	// 在构造函数中赋值
	constructor() {
			this.users= [ xiaomo,xiaoming];
	};
}

2. UserModel.ts

这里使用了uuid来创建一个随机的id作为唯一标识符 使用 public 可以不用再 this.name = name

1
2
3
4
5
6
7
8
import { uuid } from './../util/uuid';

export class UserModel{
	id :string;
	constructor(public name:string){
			this.id = uuid();
	}
}

3. Basic.html

使用ngFor 循环,index可以取到索引值(从0开始)

1
2
3
4
5
<div>
    <ul *ngFor="let item of users; let i = index">
        <li>{{i+1}} Hello {{item.name}}</li>
    </ul>
</div>
署名 - 非商业性使用 - 禁止演绎 4.0