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 相关文章推荐
js关闭子窗体刷新父窗体实现方法
Dec 04 Javascript
JS修改css样式style浅谈
May 06 Javascript
ExtJS4中的requires使用方法示例介绍
Dec 03 Javascript
jquery制作多功能轮播图插件
Apr 02 Javascript
Ionic如何创建APP项目
Jun 03 Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 Javascript
用Vue.js实现监听属性的变化
Nov 17 Javascript
jQuery实现ajax无刷新分页页码控件
Feb 28 Javascript
用JavaScript和jQuery实现瀑布流
Mar 19 Javascript
angular4 共享服务在多个组件中数据通信的示例
Mar 30 Javascript
JS常见构造模式实例对比分析
Aug 27 Javascript
微信小程序支付前端源码
Aug 29 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
PHP脚本数据库功能详解(下)
2006/10/09 PHP
php 方便水印和缩略图的图形类
2009/05/21 PHP
php实现的发送带附件邮件类实例
2014/09/22 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
php常用正则函数实例小结
2016/12/29 PHP
thinkPHP框架实现图像裁剪、缩放、加水印的方法
2017/03/14 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
用js实现的自定义的对话框的实现代码
2010/03/21 Javascript
JavaScript计算两个日期时间段内日期的方法
2015/03/16 Javascript
jQuery实现拖拽效果插件的方法
2015/03/23 Javascript
JavaScript中实现map功能代码分享
2015/06/11 Javascript
Javascript实现的简单右键菜单类
2015/09/23 Javascript
微信小程序 图片宽度自适应的实现
2017/04/06 Javascript
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
详解动画插件wow.js的使用方法
2017/09/13 Javascript
MVVM框架下实现分页功能示例
2018/06/14 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
webpack+express实现文件精确缓存的示例代码
2020/06/11 Javascript
常用python编程模板汇总
2016/02/12 Python
Python中操作mysql的pymysql模块详解
2016/09/13 Python
使用Python实现微信提醒备忘录功能
2018/12/04 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
Python异常处理机制结构实例解析
2020/07/23 Python
请写出char *p与"零值"比较的if语句
2014/09/24 面试题
退休感言
2014/01/28 职场文书
跟单业务员岗位职责
2014/03/08 职场文书
庆六一开幕词
2015/01/29 职场文书
同步小康驻村工作简报
2015/07/20 职场文书
python实现简单倒计时功能
2021/04/21 Python
python使用XPath解析数据爬取起点小说网数据
2021/04/22 Python
python使用pymysql模块操作MySQL
2021/06/16 Python
python运算符之与用户交互
2022/04/13 Python
MySQL新手入门进阶语句汇总
2022/09/23 MySQL