上一篇 使用Angular-cli搭建Angular2开发环境
Angular2采用组件的编写模式，或者说，Angular2必须使用组件编写，没有组件，你甚至不能将Angular2项目启动起来
紧接着上一篇 环境搭建 的文章，我们这一篇来讨论Angualr2的项目结构和几本组件的编写模式
Angular-cli.json里面配置了项目的几本信息，包括版本名字之类的
package.json 是npm包配置
tslint你可以自行百度下，是一种标准化代码检查的东西
其他的不用特别去关心，我们项目的核心在于src文件夹，里面包括了我们初始化的东西，下面我们简单介绍下
index.html 我想不用过多解释，首页
polyfills.ts 这里面放项目所必须的第三方js,angular-cli监理的项目里面包括了一些东西，不用关系，之后要用到的其他js库可以直接在这里面添加
main.ts 项目的启动，这里面的代码也不用特别关心
在app文件夹下有一系列代码，其中就有app.module.ts;angular-cli建立的项目是由这里指定启动的组件的
这里我们就可以开始接触Angular2的组件了
我们打开app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
}
@Component是一个Angualr2的装饰器，它告诉Angular下面的类是一个Angular2的组件，
selector选择器表示你之后再html代码里将以什么名字使用这个组件
templateUrl表示组件的html代码，这里也可以使用template：`<div>123</div>`来使用内联模板
styleUrls是样式地址数组，也可以使用 styles:['h1{font-size:28px;}']
而下面的类就是就是组件的类，可以定义组件的行为等
我们来编写一个简单的组件
重新编写app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = '论楼主';
words:Array<string>=[
'哦，听说楼主很帅？',
'是吗，没见过啊',
'真的真的，那天去软件园看到的'
];
}
重新定义了一个words的属性，类型为Array<string>(这列建议先去了解一下TypeScript,不了解也没太大关系，有一点儿基础就能看懂吧)
app.componnet.html
<h1>
{{title}}
</h1>
<div class="container">
<ul>
<li *ngFor="let word of words">
<p>{{word}}</p>
</li>
</ul>
</div>
这里用到了angular指令*ngFor 效果是遍历属性，然后下面{{}}为插值表达式，将属性值显示出来 *ngFor的效果就是 ES6的for of 语法效果，
这里强烈建议大家连接一下Angular2模板语法
app.component.css
ul{
list-style-type: none;
}
p{
padding:10px;
}
.container{
margin:0px auto;
max-width: 1280px;
text-align: center;
}
h1{
text-align: center;
}
Angualr2的组件样式只会应用到相应的组件上面，不会对其他的组件样式产生影响
下面看看效果图
结束语：这一篇我们只是简单介绍了下Angular2的一些东西，简单编写了一个组件而已，在后面的学习过程中会用到很多其他的概念，模板语法，依赖注入等，遇到的时候会解释一下
下一篇应该讲 多个组件了吧
更新ing。。。