angular2的思想非常先进,摒弃了angular1那种复杂的构建模式,采用了组件化开方的方,那我们一起来看一看,一个基础的组件是什么样子的呢。angular2-demo
一、简介
1. 目录结构
.ts
组件代码.scss
样式.png
效果图.html
模板文件
2. 效果图
二、代码实例
https://github.com/qq83387856/angular2-demo/tree/master/src/ts/component/basic
三、 详细解读
1. Basic.ts
一个基本的组件就长个样子,并没有那么神秘
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
import { uuid } from './../util/uuid';
export class UserModel{
id :string;
constructor(public name:string){
this.id = uuid();
}
}
3. Basic.html
使用ngFor 循环,index可以取到索引值(从0开始)
<div>
<ul *ngFor="let item of users; let i = index">
<li>{{i+1}} Hello {{item.name}}</li>
</ul>
</div>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。