1、元件概念

        如何理解元件，可以幫助你如何理解前端工程化，就是把頁面上顯示的內容，劃分成一個個的元件，組合到一起就變成了我們熟悉的網頁。

看一下下面這個百度頁面，怎麼劃分，可以從head、body、footer分三部分，在大的元件上還有小的元件，然後經過一層層元件巢狀。

這就是一個頁面的主要組成部分。

2、開發準備工作：

先引入包：

cnpminstall bootstrap --save

cnpm installjquery --save

在angular-cli.json

引入第三方，到專案中

使typescript能夠識別bootstrap和jquery

cnpminstall @types/bootstrap --save-dev

cnpm install @types/jquery--save-dev

生成元件

ng g component navbar 生成元件navbar

生成模板  app.component.html

run中npm run start

或者cmd中npm serve

Ng serve

執行效果：

如果樣式不對，請檢查angular-cli。json，是不是配置正確

【bootstrap樣式，下同】開發navbar、footer

選擇器：selector：'app-navbar',這是元件名稱。在app總的ts中，使用的是這個名稱

鉤子函式：例如ngOnInit（），是生命週期鉤子。在執行的時候觸發

樣式url：css，

templateUrl:模板html

元件資料，裝配到模板↑

裝飾器：把元資料賦值到普通類上，成為元件↑

全生命週期支援

元件的完整生命週期變化，每個元件都支援，如下圖，

根據生命週期，可以知道主要的業務網邏輯處理都是在Oninit元件初始化開始，在建構函式階段不會處理。

參考：

慕課網有個一小時入門視訊，可以對angular2有一個大概的瞭解。