指令
在AngularJS 1.x版本很重要的一个部分 - 指令，用过AngularJS的同学都不陌生（这是废话）。也写过很多自定义指令。如果你学习了Angular2或者以上版本（后文我们就特指Angular4），可能会觉得Component就是之前的指令，那么问题来了，Angular4中的component和directive有什么区别？本文将详细的对比二者区别；
AngularJS1.x中指令用法
AngularJS1.x版本中的指令具有2个用法
（1）在已经存在的dom元素上添加一些行为
（2）创建一个组件，附上一些行为
明确划分
在Angular4（在Angular2中就有，再次说明下，后面为了不再繁琐的说Angular2或者Angular4，统一称为Angular4） 中将二者明确的划分出来，component的用途是创建一个组件并附上一些行为，而directive则是在已经存在的dom元素上附加一些行为；二期详细区别如下：
（1）component使用的注解@Component修饰，directive使用注解@Directive来修饰
（2）component是通过组件化思想，基于组件来创建应用，把应用划分成细小的各个可重复使用的组件，遵循DRY原则（Don't repeat youself！），directive是用来在已经存在的dom元素上实现一些行为
（3）component是可重复使用的组件，directive是可重复使用的行为
（4）component有创建一个视图view，即有template或者templateUrl，directive则没有。
举例说明：
下图是一个指令，用以实现元素的“有无”，通过指令*showAuthed=“true/false”来实现不同权限状态下改dom元素的有无；可重复使用，这指令可以放在应用中的任何一个已存在的dom元素上，来根据权限状态来控制元素的有无，非常方便
网友评论
<div ng-app="myApp" runoob-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "我在指令构造器中创建!"
};
});
</script>