Angular2入门系列（三）————组件

1. 概述

组件（component）是组成Angular运用的基本和中心，它是用来包装特定的功用，运用程序的有序运转依赖于组件之间的协同事情。

2. 模块化引见

在node.js中，模块就是一个文件，引入一个文件就是简朴地经由过程requir('filePath')引入，个中filePath是文件名称或途径。在Angular2项目中我们没有采纳这类范例，我们运用es6供应的引入模块的体式格局，这和node.js比较类似，经由过程import {someClassName} from 'filePath'这类体式格局来引入一个模块。
在初期的模块化东西中，多半只是针对javascript文件 部份做了处置惩罚，比方requirJs，而缺乏对css，html等文件举行治理的东西。厥后逐渐构成按模块分别的观点，对照传统的按资本目次分别，从逻辑的意义上来讲好像越发合理，让模块更加自力，轻易保护。
按资本分别
|———————project
|  |————————css
|  |————————js
|  |————————images
|  |————————template
|  |————————index.html

按模块分别
|————————project
|  |————————shop
|  |  |————————shop.component.js
|  |  |————————shop.html
|  |  |————————shop.css
|  |————————user
|  |  |————————user.component.js
|  |  |————————user.html
|  |  |————————user.css
|  |————————index.html

经由过程将.js .css .html 文件按逻辑模块分别后，使得逻辑构造越发清楚，如许逐渐便构成了组件的观点。我们能够如许明白，前端中的组件就是一堆为了完成统一营业逻辑的代码文件的组合。

3. Angular组件

进修Angular的组件，起首要知道怎样竖立它。竖立组件很简朴，Angular供应了最轻易的方法。竖立Angular组件能够经由过程以下三个步骤：
1.从@angular/core中引入component装潢器。
2.竖立一个一般的类，并用@Component装潢它。
3.在@Component中，设置selector自定义标签和template模版。

import { Component } from ‘@angular/core’;

@Component({
  selector: 'contact-item',
  template: `
      <div>
          <p>张三</p>
          <p>13800000000</p>
      </div>
  `
})
export class ContactItemComponent {}
    
    以上代母竖立了一个最简朴的Angular组件，只需要在html中增加<contact-item>自定义标签，Angular便会在此标签中插进去组件中指定的模版。
    
    组件的细致引见请见下一章节。。。