这里是修真院前端小课堂，每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能，本篇分享的是：
【 ANGULAR COMPONENT组件介绍】
大家好，我是IT修真院北京分院第23期的学员郭婷婷，一枚正直纯洁善良的WEB前端程序员。
今天给大家分享一下，修真院官网js任务5中涉及的angular 组件。
分享人：郭婷婷
1.背景介绍
在angular1.5的版本之前，都是以directive作为组件化的形式，所以根据官网任务的设置和目前的学习进度， 今天给大家主要介绍一下directive（指令）。
Directive（指令）是AngularJS中非常强大而有用的功能之一。它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR属性，并且它不只是单单如此， 你还可以在它的基础上来操作scope、绑定事件、更改样式等。通过这个Directive，我们可以封装很多公共指令，比如分页指令、自动补全指令等等。 然后在HTML页面里只需要简单的写一行代码就可以实现很多强大的功能。一般情况下，需要用Directive有下面的情景：
1. 使你的Html更具语义化，不需要深入研究代码和逻辑即可知道页面的大致逻辑。
2. 抽象一个自定义组件，在其他地方进行重用。
2.知识剖析
DIRECTIVE的定义
angular.module("app",[ ]).directive("helloWorld",function(){return{//通过设置项来定义}; })
directive()方法接收两个参数：第一个参数为指令名称，采用驼峰式命名法； 第二个为指令定义方法，需要返回一个对象（称为指令定义对象DDO），用于描述指令的特征及指令对应的处理逻辑。 我们可以向指令定义方法中注入一些依赖，例如$http、$rootScope等。
3.常见问题
DIRECTIVE的使用方法
4.解决方案
restrict属性，（字符串）可选参数，该属性用于约束我们自定义的指令可以以什么形式出现； 取值有：E(元素),A(属性),C(类),M(注释)，其中默认值为A；这些标志可以组合一起用，比如EA.表示即可以是元素也可以是属性。
replace属性：（布尔值），默认值为false，该属性用于指定是否使用template属性定义的HTML模板内容替换指令所在的HTML元素。
template属性：该属性用于指定AngularJS指令被替换成的HTML模板
templateUrl属性：指定一个HTML文件作为指令模板，效果和template属性一致。
5.编码实战
6.扩展思考
指令定义对象的属性template属性可指定AngularJS指令被替换成的HTML模板，在HTML模板中如何使用AngularJS表达式。
7.参考文献
参考2：《AgularJS入门与进阶》
8.更多讨论
鸣谢
感谢大家观看
BY : 郭婷婷
PPT链接：https://ptteng.github.io/PPT/PPT/js-05-directvie.html
视频链接 : https://pan.baidu.com/s/1dF8Ko9b 密码: i559
--------------------------------------------------------------------------------------------------------------------
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！
更多内容，可以加入IT交流群565734203与大家一起讨论交流
这里是技能树·IT修真院：https://www.jnshu.com，初学者转行到互联网的聚集地