3.4　組件與模板

組件是一個模板的控制類用于處理應用和邏輯頁面的視圖部分。組件是構成Angular應用的基礎和核心，可用于整個應用程序中。組件知道如何渲染自己及配置依賴注入。組件通過一些由屬性和方法組成的API與視圖交互。模板則是使用我們熟悉的HTML語言。

3.4.1　Angular中的組件

組件是一個裝飾器，他能接受一個配置對象，Angular會基于這些信息創建和展示組件及其視圖。看這段代碼：

     @Component({
     selector:    'some-list',
     templateUrl: './some-list.component.html',
     providers:  [ SomeService ]
     })
     export class SomeListComponent implements OnInit {
     /* . . . */
     }

?　selector：CSS選擇器，它告訴Angular在父級HTML中查找<some-list>標簽，創建并插入該組件。

?　templateUrl：組件HTML模板的模塊相對地址，如果使用template來寫的話是用“`”這個符號來直接編寫HTML代碼。

?　providers：組件所需服務的依賴注入。

3.4.2　Angular中的模板和元數據

模板就是那段HTML代碼，可以用templateUrl引入外面的，也可以用template``直接寫在.ts文件中。我們可以通過使用模板來定義組件的視圖來告訴Angular如何顯示組件。以下是一個簡單是實例：

     <div>
     姓名 : {{name}}
     </div>

在Angular中，默認使用的是雙大括號作為插值語法，大括號中間的值通常是一個組件屬性的變量名。元數據裝飾器用類似的方式來指導Angular的行為。例如@Input、@Output、@Injectable等是一些最常用的裝飾器。