AngularJs  Creating Services详解及示例代码


Posted in Javascript onSeptember 02, 2016

虽然angular提供许多有用的service,在一些特别的应用中,我们会发现编写自定义service是很有用的。如果我们想做这件事,我们首先要在module中注册一个service工厂方法,可以通过Module.factory api(http://docs.angularjs.org/api/angular.module)或者在module配置方法中直接通过$provide api(http://docs.angularjs.org/api/AUTO.$provide)。

所有angular service都参与到DI(https://3water.com/article/91775.htm)中,既可以通过angular DI系统(injector)中使用名称(id)注册自己,也可以通过在其他工厂方法中声明对已存在的service的依赖。

一、Registering Services

为了注册一个service,我们必须拥有一个module,并且使这个server成为这个module的一部分。然后,我们可以通过Module api或者在module配置函数中注册service。下面的伪代码将展示这两种注册方式。

使用angular.module api:

var myModule = angular.module(‘myModule',[]);
myModule.factory(‘serviceId',function() {
  var someService;
  //工厂方法体,构建someService
  return someService;

});

使用$provide service:

angular.module(‘myModule',[],function($provide) {
  $provide.factory(‘serviceId',function() {
    var someService;
    //工厂方法体,构建someService
    return someService;
  });
});

注意,我们无须注册一个服务实例,相反地,工厂方法会在它被调用的时候被实例化。

二、Dependencies

service不仅仅可以被依赖,更可以拥有自己的依赖。可以在工厂方法的参数中指定依赖。阅读(https://3water.com/article/91775.htm)更多关于angular中的DI、数组标记的用途和$inject属性,让DI声明更加简洁。(Read more about the DI in Angular and the use of array notation and $inject property to make DI annotation minification-proof……)

下面是一个非常简单的service例子。这个服务依赖$window service(通过工厂方法参数传递),而且只有一个方法。这个service简单地储存所有通知,在第三个之后,这个service会通过window.alert显示所有通知。

<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="MainApp">
<head>
 <meta charset="UTF-8">
 <title>services</title>
</head>
<body>
<div ng-controller="MyController">
 <input type="text" ng-model="msg"/>
 <button ng-click="saveMsg()">save msg</button>
 <ul>
  <li ng-repeat="msg in msgs">{{msg}}</li>
 </ul>
</div>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
 var app = angular.module("MainApp",[],function($provide) {
  $provide.factory("notify",["$window","$timeout",function(win,timeout) {
   var msgs = [];
   return function(msg) {
    msgs.push(msg);
    if(msgs.length==3) {
     timeout(function() {
      win.alert(msgs.join("\n"));
      msgs = [];
     },10);
    }
   }
  }])
 });
 app.controller("MyController",function($scope,notify) {
  $scope.msgs = [];
  $scope.saveMsg = function() {
   this.msgs.push(this.msg);
   notify(this.msg);
   this.msg = "";
  };
 });
</script>
</body>
</html>

三、Instantiating Angular Services

所有在angular中的service都是延迟实例化的(lazily)。这意味着service仅仅在其他依赖它的已实例化的service或者应用组件中被依赖时,才会创建。换句话说,angular直到服务被直接或者间接请求时候,才会实例化service。

四、Services as singletons

最后,我们必须意识到所有angular service都是一个单例应用。这意味着每一个injector中有且只有一个给定service的实例。由于angular是极其讨厌破坏global state的,所以创建多个injector,使每一个都有指定service的实例是可行的,除了在测试中有强烈的需求外,一般很少有这样的需要。

 以上就是关于Angular Services 的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
Javascript模板技术
Apr 27 Javascript
JS获取url链接字符串 location.href
Dec 23 Javascript
利用js制作html table分页示例(js实现分页)
Apr 25 Javascript
jQuery实现的网页左侧在线客服效果代码
Oct 23 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
Feb 22 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
Feb 23 Javascript
JavaScript判断用户名和密码不能为空的实现代码
May 16 Javascript
vue插件tab选项卡使用小结
Oct 27 Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
JS实现的简单拖拽购物车功能示例【附源码下载】
Jan 03 Javascript
vue.js中实现登录控制的方法示例
Apr 23 Javascript
解决layui动态添加的元素click等事件触发不了的问题
Sep 20 Javascript
利用jQuery实现打字机字幕效果实例代码
Sep 02 #Javascript
AngularJs  Using $location详解及示例代码
Sep 02 #Javascript
基于JS实现类似支付宝支付密码输入框
Sep 02 #Javascript
JavaScript中Number对象的toFixed() 方法详解
Sep 02 #Javascript
Node.js实现兼容IE789的文件上传进度条
Sep 02 #Javascript
AngularJs  Understanding Angular Templates
Sep 02 #Javascript
jquery 中toggle的2种用法详解(推荐)
Sep 02 #Javascript
You might like
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
在Zeus Web Server中安装PHP语言支持
2006/10/09 PHP
令PHP初学者头疼十四条问题大总结
2008/11/12 PHP
php使用递归函数实现数字累加的方法
2015/03/16 PHP
php判断linux下程序问题实例
2015/07/09 PHP
php实现的中秋博饼游戏之掷骰子并输出结果功能详解
2017/11/06 PHP
JavaScript中的私有/静态属性介绍
2012/07/26 Javascript
jQuery.clean使用方法及思路分析
2013/01/07 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
js自动查找select下拉的菜单并选择(示例代码)
2014/02/26 Javascript
yepnope.js使用详解及示例分享
2014/06/23 Javascript
js操作数组函数实例小结
2015/12/10 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
2016/08/30 Javascript
AngularJS递归指令实现Tree View效果示例
2016/11/07 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
2017/10/24 jQuery
p5.js入门教程之图片加载
2018/03/20 Javascript
vue.js实现的经典计算器/科学计算器功能示例
2018/07/11 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
2018/08/12 Javascript
详解基于 Node.js 的轻量级云函数功能实现
2019/07/08 Javascript
JS JQuery获取data-*属性值方法解析
2020/09/01 jQuery
[01:04:01]2014 DOTA2华西杯精英邀请赛5 24 DK VS VG
2014/05/25 DOTA
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
tensorflow 固定部分参数训练,只训练部分参数的实例
2020/01/20 Python
详解Python IO编程
2020/07/24 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
Django日志及中间件模块应用案例
2020/09/10 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
新西兰第一的行李箱网站:luggage.co.nz
2019/07/22 全球购物
乐高西班牙官方商店:LEGO Shop ES
2019/12/01 全球购物
乌克兰排名第一的在线旅游超市:Farvater.Travel
2020/01/02 全球购物
优质服务演讲稿
2014/05/14 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书
2019年XX公司的晨会制度及流程!
2019/07/23 职场文书