Angular2入門系列（三）————組件

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便會在此標籤中插入組件中指定的模版。
    
    組件的詳細介紹請見下一章節。。。