Angular2 基礎實踐（ 二 ）- 建立一個簡單的組件（含視頻）

組件介紹

Angular1 並無使用組件，受react影響，Angular2引入了組件。

Angular2的組件是這樣的：你能夠自定義html標籤，好比simple-form組件(形如<simple-form></simple-form>)。

Angular2組件基礎三部分組成：tmplate模板(對應html)，組件的class部分(js，邏輯)，style樣式(css)。

Angular2的定義組件的步驟：從'@angular /core'模塊引入Component，而後@Component()函數傳入一個Object，而且緊跟一個class就能夠定義一個組件了，形如：

import { Component} from '@angular/core';

@Component({
  selector: 'simple-form',// 這邊是組件的標籤名，對應<simple-form></simple-form>
  templateUrl: './simple-form.component.html',// 這邊定義了模板文件的位置
  styleUrls: ['./simple-form.component.css']// 這邊定義了的樣式
})
export class SimpleFormComponent {
  // 這邊要緊跟一個class組件纔算完整，class裏面寫邏輯
}

angular2組件中定義的樣式只對該組件有效，父子組件都無效(多是沒有父子組件這種概念，注意別被我誤導)。web前端開發如今有組件化的趨勢，react甚至想把組件化帶到iOS，android(react-native)。本人使用組件化的體驗: 沒了以前寫mvc的糾結(建立class要先想一想這是model，仍是view，仍是controller，並且這種糾結並沒讓我感到提高了代碼質量)。

下面是一個建立組件的視頻，跟着這個視頻咱們會建立第一個本身的component(組件)，視頻中使用了angular-cli(angular命令行工具 )建立組件，注意到命令後面加了inline style和inline template，默認的命令會把css，html分出去成爲單獨的文件，加了這倆會整合成在一個ts文件內，這一點跟上面的代碼不一樣，視頻中的template和style會和class在一個ts文件中。

視頻連接-騰訊精品課

plnkr連接，能夠在這裏測試一下代碼

視頻中的名詞註釋

angular-cli.json: 這個文件是angular-cli的配置文件，使用angular-cli開發angular2很是方便，推薦使用。