angular 动态组件类型详解(四种组件类型)


Posted in Javascript onFebruary 22, 2017

组件类型1:纯函数功能,而没有视图部分,即Factory(类似于$http)

promise.component.html

常见的有内置的$http,$q之类的。一般使用promise与作用域进行交互

组件类型2:不是常驻于视图,而是动态插入的、有UI的一类组件,有输入交互、不常被调用(类似于Model对话框)

factory.component.html

并发性。这里收到es6的启发。在factory内使用了构造函数,来区分不同的实例。当然,factory接口返回的类型要根据需求来定:仅仅是一个promise?还是返回一整个组件的实例

数据驱动。factory内部我使用了this.scope = $rootScope.$new()。并把每个实例的模板和作用域进行绑定$compile(html())(scope)。感谢毛总,这招真是方便。我们能够真正使用到angular的精髓:用数据来驱动我们的视图了

交互。该demo因为需要与用户进行交互,因此返回了一个promise给调用者。当然实际要看情况。

作用域。由于该组件并不常常需要被调用,因此一旦组件'close'(从视图上消失),就scope.$destroy()、instance.remove()

组件类型3:不常驻于视图,但会被经常调用,而且是动态插入的、无输入交互、有UI的一类组件(类似于popover)

factory.component2.html

对比。与上类型组件对比,该类组件更容易被调用(类似于微信右上角的popover)
并发性。要求更高,稍复杂。因此返回组件的实例,让开发者可用调用组件内部的方法(open/close/...)。同时,鉴于需求特殊性,在open()方法处我传入了$event作为UI参数

作用域。由于是隐藏地常驻与视图,因此只当路由切换时才注销实例。scope.$watch('$stateChangeSuccess', function(){scope.destroy()})

组件实例。赋值给作用域的变量 $scope.instance = Mypop.init()

组件类型4:实例之间存在某种关系、不常驻于视图,动态插入、只有视觉交互、有UI的一类组件(类似于ant design的Notification)

factory.component.3.html

对比。与上类组件对比,组件的每个实例之间需要存在某种队列关系,具体操作方法请参考上面的例子。

实例关系。如何维护实例之间的关系?笔者比较笨的方法是开启另一个factory实例,存放一个实例数据,来维护实例之间的关系var _sl = scope.list = []。然后该factory具备操作实例队列的一些方法 _sl.push(token)或者 _sl.shift()。同时每个实例都会监听这个实例队列 _s.$watchCollection('instanceList', function(){...})

Javascript 相关文章推荐
Lazy Load 延迟加载图片的jQuery插件中文使用文档
Oct 18 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
Sep 03 Javascript
jquery和ajax的关系详细介绍
Nov 29 Javascript
node.js中的socket.io入门实例
Apr 26 Javascript
jQuery中element选择器用法实例
Dec 29 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 Javascript
不同js异步函数同步的实现方法
May 28 Javascript
vue2实现数据请求显示loading图
Nov 28 Javascript
npm 更改默认全局路径以及国内镜像的方法
May 16 Javascript
浅谈React碰到v-if
Nov 04 Javascript
vue实现购物车的监听
Apr 20 Javascript
全网小程序接口请求封装实例代码
Nov 06 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
Feb 22 #Javascript
JavaScript实现256色转灰度图
Feb 22 #Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
Feb 22 #Javascript
微信小程序 扎金花简单实例
Feb 21 #Javascript
angular中的http拦截器Interceptors的实现
Feb 21 #Javascript
微信小程序 PHP生成带参数二维码
Feb 21 #Javascript
vue-resource 拦截器使用详解
Feb 21 #Javascript
You might like
PHP入门教程之表单与验证实例详解
2016/09/11 PHP
PHP中Cookie的使用详解(简单易懂)
2017/04/28 PHP
php5.6.x到php7.0.x特性小结
2019/08/17 PHP
laravel 修改记住我功能的cookie保存时间的方法
2019/10/14 PHP
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
利用JS轻松实现获取表单数据
2016/12/06 Javascript
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
es6 字符串String的扩展(实例讲解)
2017/08/03 Javascript
详解node child_process模块学习笔记
2018/01/24 Javascript
javascript高仿热血传奇游戏实现代码
2018/02/22 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
Vue通过ref父子组件拿值方法
2018/09/12 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
2020/03/31 Javascript
js+canvas实现转盘效果(两个版本)
2020/09/13 Javascript
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
python下MySQLdb用法实例分析
2015/06/08 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
Python flask框架端口失效解决方案
2020/06/04 Python
python3处理word文档实例分析
2020/12/01 Python
HTML5的结构和语义(4):语义性的内联元素
2008/10/17 HTML / CSS
GNC健安喜美国官网:美国第一营养品牌
2016/07/22 全球购物
飞利浦比利时官方网站:Philips比利时
2016/08/24 全球购物
一加手机美国官方网站:OnePlus美国
2019/09/19 全球购物
单位刻章介绍信范文
2014/01/11 职场文书
教师求职自荐信
2014/03/09 职场文书
个人贷款担保书
2014/04/01 职场文书
单位单身证明样本
2014/10/11 职场文书
工商局个人工作总结
2015/03/03 职场文书
呼啸山庄读书笔记
2015/06/29 职场文书
Pytorch 如何加速Dataloader提升数据读取速度
2021/05/28 Python
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS