1.Angular1

2.Angular 2特性

3.核心概念

元件是核心，其他都是元件的延伸

1.元件及元件樹

A.元件都有完整的生命週期鉤子，使我們清楚知道元件之間狀態變化

Constructor 建構函式
做一些組建類的初始化工作，例如變數的初始賦值等等，接著會觸發OnChanges鉤子
不推薦處理和業務邏輯相關的工作
OnChanges
第一次觸發，主要用來接收父元件傳入的資料，為接下來的元件初始化提供資料支援，然後到了OnInit鉤子
OnInit
這才是實際的元件初始化階段，處理和業務邏輯相關的工作，接下來元件進入穩定期，OnChanges再次觸發，只要從輸入屬性上獲得的資料發生變化OnChanges鉤子就會觸發一次
元件銷燬前會觸發OnDestory鉤子
OnDestory

元件由兩個大部分組成：上面的@Compoent和下面的 calss類

• 下面的class類就是元件類，元件的業務邏輯都在這個類裡面編寫
• 上面的@Compoent部分稱為裝飾器，裝飾器裡面有一些引數，它們就是angular八大核心裡面的元資料，是TS提供的語法特性，用來修飾一個類相當於c++裡的標頭檔案
  這裡的template~~是一個內聯模版，外聯模版用templateUrl屬性書，如：

templateUrl:"path/to/hello.html"

注意：一個元件只能選取一種方式指定模版


C.資料繫結

• 插值｛｛｝｝
  
  可以直接使用元件類裡面的成員變數 例如上面圖片例子裡的｛｛greeting｝｝
• 屬性繫結[value]
  把元件類的屬性傳遞到元件模版中
  例如：<input [value]="myDate"/>
• 事件繫結(keyup)
  把模版裡產生的資料通過函式呼叫的方式傳遞到組建類，也負責元件間的資料通訊
  例如<input (keyup)="handle($event)"/>
• 雙向繫結[(ngModel)]
  實現了資料的雙向流動
  例如<input [(ngModel)="myDate"] />
  
  
  

D.元件渲染

元資料裡的selector 屬性定義了一個hello，這是一個css3選擇器，程式執行的時候他能匹配到html裡的hello標籤，當元件邏輯執行完以後，輸出到檢視，內容就會填充到<hello></hello>

E.元件樹

這樣Contact就成了ContactList的子元件，父元件要能使用子元件定義的一些元素標籤，還需要一個匯入的過程，這個匯入的過程需要藉助模組來實現，關於模組後面介紹
注意：子元件還定義了一個data變數，並且使用@Input()裝飾器來修飾，這就是子元件的輸入介面，用來接收來自父元件的資料

總結