指令

在AngularJS 1.x版本很重要的一個部分 - 指令，用過AngularJS的同學(xué)都不陌生（這是廢話）。也寫過很多自定義指令。如果你學(xué)習(xí)了Angular2或者以上版本（后文我們就特指Angular4），可能會覺得Component就是之前的指令，那么問題來了，Angular4中的component和directive有什么區(qū)別？本文將詳細(xì)的對比二者區(qū)別；

AngularJS1.x中指令用法

AngularJS1.x版本中的指令具有2個用法

（1）在已經(jīng)存在的dom元素上添加一些行為

（2）創(chuàng)建一個組件，附上一些行為

明確劃分

在Angular4（在Angular2中就有，再次說明下，后面為了不再繁瑣的說Angular2或者Angular4，統(tǒng)一稱為Angular4） 中將二者明確的劃分出來，component的用途是創(chuàng)建一個組件并附上一些行為，而directive則是在已經(jīng)存在的dom元素上附加一些行為；二期詳細(xì)區(qū)別如下：

（1）component使用的注解@Component修飾，directive使用注解@Directive來修飾

（2）component是通過組件化思想，基于組件來創(chuàng)建應(yīng)用，把應(yīng)用劃分成細(xì)小的各個可重復(fù)使用的組件，遵循DRY原則（Don't repeat youself?。?，directive是用來在已經(jīng)存在的dom元素上實(shí)現(xiàn)一些行為

（3）component是可重復(fù)使用的組件，directive是可重復(fù)使用的行為

（4）component有創(chuàng)建一個視圖view，即有template或者templateUrl，directive則沒有。

舉例說明：

下圖是一個指令，用以實(shí)現(xiàn)元素的“有無”，通過指令*showAuthed=“true/false”來實(shí)現(xiàn)不同權(quán)限狀態(tài)下改dom元素的有無；可重復(fù)使用，這指令可以放在應(yīng)用中的任何一個已存在的dom元素上，來根據(jù)權(quán)限狀態(tài)來控制元素的有無，非常方便