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/PPT/js-05-directvie.html

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

--------------------------------------------------------------------------------------------------------------------

技能树.IT修真院

“我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,掌控自己学习的节奏,学习的路上不再迷茫”。

这里是技能树.IT修真院,成千上万的师兄在这里找到了自己的学习路线,学习透明化,成长可见化,师兄1对1免费指导。快来与我一起学习吧 !

猛戳这里

你可能感兴趣的:(ANGULAR COMPONENT组件介绍)