ANGULAR COMPONENT组件介绍

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【 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.参考文献

参考1：学习AngularJs:Directive指令用法

参考2：《AgularJS入门与进阶》

8.更多讨论

鸣谢

感谢大家观看

BY : 郭婷婷

PPT链接：https://ptteng.github.io/PPT/...

视频链接 : https://pan.baidu.com/s/1dF8Ko9b 密码: i559