Angular2入门系列教程2-项目初体验-编写自己的第一个组件

　　上一篇使用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的组件样式只会应用到相应的组件上面，不会对其他的组件样式产生影响

　　下面看看效果图