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使用prepend()方法在元素前添加内容用法实例
Mar 26 Javascript
JavaScript浮点数及运算精度调整详解
Oct 21 Javascript
JS敏感词过滤代码
Dec 23 Javascript
javascript+css3开发打气球小游戏完整代码
Nov 28 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
May 08 Javascript
angularJS实现不同视图同步刷新详解
Oct 09 Javascript
浅谈express.js框架中间件(middleware)
Apr 07 Javascript
详解js创建对象的几种方法及继承
Apr 12 Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 Javascript
Vue快速实现通用表单验证的方法
Feb 24 Javascript
微信小程序实现底部弹出模态框
Nov 18 Javascript
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
利用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
phpinfo 系统查看参数函数代码
2009/06/05 PHP
php中修改浏览器的User-Agent来伪装你的浏览器和操作系统
2011/07/29 PHP
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
基于PHP文件操作的详解
2013/06/05 PHP
php几个预定义变量$_SERVER用法小结
2014/11/07 PHP
PHP模块memcached使用指南
2014/12/08 PHP
thinkPHP简单调用函数与类库的方法
2017/03/15 PHP
ExtJS4中的requires使用方法示例介绍
2013/12/03 Javascript
JS获取网页图片name属性的方法
2015/04/01 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
2015/06/23 Javascript
jQuery div拖拽用法实例
2016/01/14 Javascript
js判断上传文件后缀名是否合法
2016/01/28 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
js中遍历Map对象的简单实例
2016/08/08 Javascript
详解angular 中的自定义指令之详解API
2017/06/20 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
微信小程序绘制图片发送朋友圈
2019/07/25 Javascript
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
Python存取XML的常见方法实例分析
2017/03/21 Python
Python内建模块struct实例详解
2018/02/02 Python
在python中实现强制关闭线程的示例
2019/01/22 Python
Python3.0中普通方法、类方法和静态方法的比较
2019/05/03 Python
Django ORM 聚合查询和分组查询实现详解
2019/08/09 Python
Pytorch中index_select() 函数的实现理解
2019/11/19 Python
Python pip配置国内源的方法
2020/02/14 Python
基于Python的OCR实现示例
2020/04/03 Python
python 常见的反爬虫策略
2020/09/27 Python
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
AOP的定义以及作用
2013/09/08 面试题
给全校老师的建议书
2014/03/13 职场文书
个人欠款担保书
2014/05/20 职场文书
扬州个园导游词
2015/02/06 职场文书
学生安全责任协议书
2016/03/22 职场文书
python spilt()分隔字符串的实现示例
2021/05/21 Python
Python爬虫实战之爬取京东商品数据并实实现数据可视化
2021/06/07 Python
Nginx 反向代理解决跨域问题多种情况分析
2022/01/18 Servers