在 Angular 中，有個東西叫做 Directive ，中文翻譯作指令，我自己當初是理解很久，還是覺得不直觀，所以我們就還是叫他 Directive 吧。

Angular 中有三種東西都是Directive：

• Component
• Structural directives
• Attribute directives

那Directive究竟是什麼呢，你可以想成他是一個標籤，會對 DOM 做一些特別的事，比如增加 DOM 節點之類的。DOM 全名為 Document Object Model ，是瀏覽器根據 html 的樣板和標籤，所生成的物件，瀏覽器會將許多 DOM 組成一個 DOM tree。這邊只要先知道，html 和 DOM 是不同的東西就可以了。

Component 建立

我們前面在 AppComponent 上做了許多實驗，卻還沒有建立過自己的 Component。現在我們借用 Angular-CLI 來幫我們建立元件範本。打開 VSCODE 的 terminal ，輸入命令如下，<Component name> 可以隨意輸入你想要的名字：

ng generate component <Component name>

其中 generate 的 alias 是 g，component 的 alias 是 c，所以我的命令這樣下也可以，效果一樣：

ng g c <Component name>

我這邊的範例是 ng generate component homepage ，你還看到這邊我有黃色字的警告，是說我的 Angular-CLI 有新版本，並且本機的 Angular-CLI 版本比專案下的版本還新，不過這個警告我們暫時不用理會。

上面可以看到 Angular-CLI 幫我們 CREATE Component 的範本，一共四個檔案，會自動放在 src/app/ 下，並且幫我們 UPDATE app.module.ts 這個檔案。

Angular-CLI 更新了 app.module.ts的甚麼呢？我們來看：

Angular-CLI 已經幫我們把 Homepage import 進來，而且放進 AppModule 的 declarations 欄位。
那麼現在我們可以使用這個 Component了。

我們到 app.component.html，插入 <app-homepage></app-homepage> 的標籤：

可以看到我們的 HomepageComponent在頁面上顯示 homepage works! 的字樣：

接著看一下剛剛建立的 homepage.component.ts，@Component 裡的東西，我們之前都介紹過了。發現 class 裡面多了兩個 function : constructor() 和 ngOnInit()。這兩個都是初始化用的 function，執行順序是先執行 constructor() 再執行 ngOnInit()，constructor() 屬於 ECMAScript 標準，而 ngOnInit() 是 Angular 自行定義的。兩個 function 都能用來初始化變數：

其實 constructor() 和 ngOnInit() 的使用情境略有不同，主要就是 Angular 會在Component 跟 Directive binding 完後，才執行ngOnInit()，這時才能從頁面撈一些資料回來初始化變數，詳情可參考這裡 進行了解。

之前有提過，Component 的範本生成時會有四個檔案，css、html、ts、spec.ts，這個 css 呢，只會在自己的 component 下生效，我們來實驗一下：

我在 app.component.html中插入：

// app.component.html

<app-homepage></app-homepage>
<h1>AppComponent</h1>

底下的範例 code 太煩了，我把它註解掉。在 VSCODE 中可以整段選起來，按Ctrl + /，可以將選取部分全部註解起來：

然後我在 app.component.css 和 homepage.component.css，分別各定義兩個 h1 的 css ：

// homepage.component.css

h1 {
    background-color: red;
}

// app.component.css

h1 {
    color: blue;
}

background-color 是定義背景顏色，color　是定義字體顏色，我們來看一下效果：

兩個 css 互不影響。如果我們在 src 下的 styles.css，加一點料：

// styles.css

h1{
    color: blueviolet;
}

那麼 HomepageComponent 的字體顏色會被蓋過去，但對於 AppComponent 來說，app.component.css 的優先較高，所以 AppComponent 的字體顏色還是維持藍色。