给angularJs的service建模
先回顾一下我们遇到的问题:
通过一个dialogService创建对话框,并将该service的参数数据通过resolve的方式传递给对话框的controller。
controller解析数据后放置在$scope上,供内部的directive使用。
现在希望在dialog打开后,如果对话框页面内的部分再次调用到这个service时,可以复用原来的对话框,仅仅将数据更新。controller内部的directive已经可以通过$digest自动更新view,只需要让dialogService把新的数据传递给controller。
先想到一个简单的方案:
既然service要区分第一次打开和复用的情况,就让service暴露一个接口,controller把自己注册进去,随后service就可以通过controller上提供的方法去更新数据。
然而,这种方法对于单例的service而言,保存一个controller的实例存在内存泄露的风险。而且service的职责不清晰,来回调用传递数据也过于复杂。
于是我们换了一个思路:
1. 对于dialogService本身建模,令用户代码持有service实例对象,每次打开新对话框时创建一个新的service实例。service实例与对话框相对应。
2. 既然要求一次打开dialog后可以复用,就意味着dialog是一个单例,可以采用单例模式。用户代码访问service的工厂获取service创建或者获取service实体。
3. 进一步的,将数据的holder放置在service定义的部分,service可以通过闭包来更新数据,service再将数据的应用resolve给controller,controller就可以直接看到更新过的数据,而不需要来回赋值。
下面给出一个大致的实现
module.factory('dialogService', function(){
function DialogService(){
this.dialogParam = {};
}
DialogService.prototype.createDialog = function(data){
this.dialogParam.data = data;
// call functions to open the dialog
// resolve the this.dialogParam to the controller
};
DialogService.prototype.onDialogClose = function(){
// 清除工作,需要将serviceInstance和dialogParam清空。
};
var serviceInstance;
return {
getService: function(){
if (!serviceInstance){
serviceInstance = new DialogService();
}
return serviceInstance;
}
};
});
可以看到在以上代码中,基本只是一个单例模式的实现。这个和在java里面差不多,而且还要简单,因为javascript没有多线程的问题。
调用关系和职责划分也更清晰。
给angularJs的service建模的更多相关文章
- AngularJS:Service
ylbtech-AngularJS:Service 1.返回顶部 1. AngularJS 服务(Service) AngularJS 中你可以创建自己的服务,或使用内建服务. 什么是服务? 在 An ...
- AngularJS 1.x系列:AngularJS服务-Service
1. AngularJS服务 AngularJS可注入类型包括:Service.Factory.Provider.Value及Constant. 2. Service AngularJS Servic ...
- AngularJS之Service(四)
前言 前面我们讲了控制器.过滤器以及指令,这一节我们来讲讲重大内容之一服务和其中涉及到的工厂. 话题 AngularJS中服务可以说是和DI紧密联系在一起,在应用程序中我们可以通过使用服务来共享代码, ...
- AngularJS 服务(Service)
AngularJS 中你可以创建自己的服务,或使用内建服务. 什么是服务? 在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用. AngularJS 内建了30 ...
- Make AngularJS $http service behave like jQuery.ajax()(转)
There is much confusion among newcomers to AngularJS as to why the $http service shorthand functions ...
- angularjs factory,service,provider 自定义服务的不同
angularjs框架学了有一段时间了,感觉很好用.可以把angularjs的app理解成php的class,controller是控制器,而内置服务和自定义服务就可以理解成models了.angul ...
- AngularJS 1.x系列:AngularJS服务-Service、Factory、Provider、Value及Constant(5)
1. AngularJS服务 AngularJS可注入类型包括:Service.Factory.Provider.Value及Constant. 2. Service AngularJS Servic ...
- Angularjs演示Service功能
在angularjs中,我们可以自定义自己的service.可以说得是自定义的方法,函数. 下面我们一步一步来演示吧:首先为angularjs定义一个app: var demoApp = angula ...
- 【angularJS】Service服务
AngularJS 中的服务是一个函数或对象.可以创建自己的服务,或使用内建服务. 内置服务 AngularJS 内建了30 多个服务. 1. $location 服务,它可以返回当前页面的 URL ...
随机推荐
- Python: 列表的基本用法
列表是可变的,可以改变的序列,它能够保存任何数据类型. >>> list = [] #定义一个空列表>>> list.append(1) ...
- 转载:Scalers:要持续行动,不要自我感动
转载自微信公众号:http://mp.weixin.qq.com/s?__biz=MzA4MjIyNDYzMQ==&mid=2650846277&idx=1&sn=5d832a ...
- 如何理解JS回调函数
1.回调函数英文解释: A callback is a function that is passed as an argument to another function and is execut ...
- winform版弹框操作
公共弹框帮助类操作手册 1.说明 封装了对于winform操作的一些提示框,包括数据加载耗时的时候,提示数据正在加载,请稍后的提示窗体,动态提示给用户一些有用的信息.例如网吧里面续费提醒等. 2.操作 ...
- DelphiXE2 DataSnap开发技巧收集
DelphiXE2 DataSnap开发技巧收集 作者: 2012-08-07 09:12:52 分类:Delphi 标签: 作为DelphiXE2 DataSnap开发的私家锦囊, ...
- 在win8.1中安装apache+php+mysql
因为x项目需求,需要学习使用php,咱也没啥经验,win8.1的系统在搭建php的运营环境中,费了一些周折,但是最后还是解决了. 详情请看 原文:http://jingyan.baidu.com/ar ...
- VC++ 实现文件与应用程序关联
日常工作中,doc文件直接双击后,就能启动word软件,并读取该文档的内容在软件中显示,这都得益于注册表的配置,我们的软件也需要实现这样的功能,该如何写注册表以及写入哪些内容呢?下面的两个函数就能实现 ...
- VC++ CArchive及简单的文件操作方法
CArchive 方法用于存取文件 我向你推荐的是使用CArchive,它的使用方法简单且功能十分强大.首先还是用CFile声明一个对象,然后用这个对象的指针做参数声明一个CArchive对象,你就可 ...
- m.jd.com首页中的js效果
m.jd.com中的部分js效果 昨天把m.jd.com的首页布局写好了,今天写一下首页中部分js效果.头部背景色透明度的改变,焦点图轮播,京东快报的小轮播,以及秒杀倒计时.这里html,css样式就 ...
- ngix代理-- 摘抄
有两个网站,http://192.168.1.3:80和http://192.168.1.3:81, 通过nginx的配置实现只用本机作为唯一的代理服务器,只用一个端口, 实现这样的效果:请求http ...