先回顾一下我们遇到的问题:

通过一个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建模的更多相关文章

  1. AngularJS:Service

    ylbtech-AngularJS:Service 1.返回顶部 1. AngularJS 服务(Service) AngularJS 中你可以创建自己的服务,或使用内建服务. 什么是服务? 在 An ...

  2. AngularJS 1.x系列:AngularJS服务-Service

    1. AngularJS服务 AngularJS可注入类型包括:Service.Factory.Provider.Value及Constant. 2. Service AngularJS Servic ...

  3. AngularJS之Service(四)

    前言 前面我们讲了控制器.过滤器以及指令,这一节我们来讲讲重大内容之一服务和其中涉及到的工厂. 话题 AngularJS中服务可以说是和DI紧密联系在一起,在应用程序中我们可以通过使用服务来共享代码, ...

  4. AngularJS 服务(Service)

    AngularJS 中你可以创建自己的服务,或使用内建服务. 什么是服务? 在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用. AngularJS 内建了30 ...

  5. Make AngularJS $http service behave like jQuery.ajax()(转)

    There is much confusion among newcomers to AngularJS as to why the $http service shorthand functions ...

  6. angularjs factory,service,provider 自定义服务的不同

    angularjs框架学了有一段时间了,感觉很好用.可以把angularjs的app理解成php的class,controller是控制器,而内置服务和自定义服务就可以理解成models了.angul ...

  7. AngularJS 1.x系列:AngularJS服务-Service、Factory、Provider、Value及Constant(5)

    1. AngularJS服务 AngularJS可注入类型包括:Service.Factory.Provider.Value及Constant. 2. Service AngularJS Servic ...

  8. Angularjs演示Service功能

    在angularjs中,我们可以自定义自己的service.可以说得是自定义的方法,函数. 下面我们一步一步来演示吧:首先为angularjs定义一个app: var demoApp = angula ...

  9. 【angularJS】Service服务

    AngularJS 中的服务是一个函数或对象.可以创建自己的服务,或使用内建服务. 内置服务 AngularJS 内建了30 多个服务. 1.  $location 服务,它可以返回当前页面的 URL ...

随机推荐

  1. Python 之Ajax

    1.使用Ajax在后台传递参数的示例 要使用Ajax传递参数,需要使用jquery,使用jquery需要注意以下几点. 1.建立static的目录,将jquery导入 2.在项目s13day18_dj ...

  2. List 泛型 集合中 Find 的用法

    以前在开发中为了对List,String[].Array进行元素的查找一般都是这样做:List lists = new List();list.add("111");.....fo ...

  3. input[file]标签的accept=”image/*”属性响应很慢的解决办法

    转自:http://blog.csdn.net/lx583274568/article/details/52983693 input[file]标签的accept属性可用于指定上传文件的 MIME类型 ...

  4. 虚拟机virtualBox设置共享文件后,linux配置

    1.在/mnt下创建共享目录 mkdir /mnt/share 2.关联外部目录 mount -t vboxsf 共享文件夹名 /mnt/share/ 如:mount -t vboxsf BaiduS ...

  5. layer弹出层不居中解决方案

    layer弹出层不居中解决方案 代码头中加入以下代码即可 <!doctype html>

  6. Linux下如何查看系统启动时间和运行时间

    1.uptime命令输出:16:11:40 up 59 days, 4:21, 2 users, load average: 0.00, 0.01, 0.002.查看/proc/uptime文件计算系 ...

  7. js中的原形链问题

    ---恢复内容开始--- 一.在js中大家讨论的原形链都是围绕在prototype和__proto__. 1.__proto__是内部原型 2.prototype是构造器原型(构造器就是构造函数) 3 ...

  8. julia的优化?

    julia> function fib1(n) if n==1 return n else return n+fib1(n-1) end end fib1 (generic function w ...

  9. 关于ajax载入窗口使用RedirectToAction在窗口显示的问题

    在过滤器中过滤用户是否登录,没有登录就RedirectToAction("Login", "Auth", new { Area = "Account& ...

  10. Spring Framework------>version4.3.5.RELAESE----->Reference Documentation学习心得----->Spring Framework中web相关的知识(概述)

    Spring Framework中web相关的知识 1.概述: 参考资料:官网documentation中第22小节内容 关于spring web mvc:  spring framework中拥有自 ...