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 相关文章推荐
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
Apr 01 Javascript
jquery检测input checked 控件是否被选中的方法
Mar 26 Javascript
jQuery实现弹出窗口中切换登录与注册表单
Jun 05 Javascript
判断访客终端类型集锦
Jun 05 Javascript
jQuery解决input超多的表单提交
Aug 10 Javascript
利用Angularjs和Bootstrap前端开发案例实战
Aug 27 Javascript
jQuery实现的导航下拉菜单效果示例
Sep 05 Javascript
Javascript中this绑定的3种方法与比较
Oct 13 Javascript
JavaScript中匿名函数的递归调用
Jan 22 Javascript
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
纯javascript实现选择框的全选与反选功能
Apr 08 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
Aug 25 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
图书管理程序(一)
2006/10/09 PHP
PHP4与PHP5的时间格式问题
2008/02/17 PHP
php中实现记住密码自动登录的代码
2011/03/02 PHP
php中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
PHP生成随机码的思路与方法实例探索
2019/04/11 PHP
javascript编程起步(第六课)
2007/02/27 Javascript
javascript中数组的冒泡排序使用示例
2013/12/18 Javascript
Javascript:为input设置readOnly属性(示例讲解)
2013/12/25 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
2013/12/29 Javascript
js 金额格式化来回转换示例
2014/02/23 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
2018/09/20 Javascript
使用webpack构建应用的方法步骤
2019/03/04 Javascript
js之切换全屏和退出全屏实现代码实例
2019/09/09 Javascript
关于layui toolbar和template的结合使用方法
2019/09/19 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
[49:42]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第一局
2016/03/04 DOTA
Python将xml和xsl转换为html的方法
2015/03/10 Python
Python用threading实现多线程详解
2017/02/03 Python
Python Socket编程详细介绍
2017/03/23 Python
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
大学生自荐书范文
2013/12/10 职场文书
大学生军训广播稿
2014/01/24 职场文书
初二物理教学反思
2014/01/29 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
2014年后勤工作总结范文
2014/12/16 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书
nginx+lua单机上万并发的实现
2021/05/31 Servers
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android