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 相关文章推荐
解析John Resig Simple JavaScript Inheritance代码
Dec 03 Javascript
jquery乱码与contentType属性设置问题解决方案
Jan 07 Javascript
用javascript为页面添加天气显示实现思路及代码
Dec 02 Javascript
理解javascript中的原型和原型链
Jul 30 Javascript
一个php+js实时显示时间问题
Oct 12 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 Javascript
原生js实现选项卡功能
Mar 08 Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 Javascript
vue 中 命名视图的用法实例详解
Aug 14 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
Sep 21 Javascript
vue实现文字加密功能
Sep 27 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
取键盘键位ASCII码的网页
2007/07/30 Javascript
自动完成JS类(纯JS, Ajax模式)
2009/03/12 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
jquery实现多级下拉菜单的实例代码
2013/10/02 Javascript
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
javascript异步编程代码书写规范Promise学习笔记
2015/02/11 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
jquery实现浮动的侧栏实例
2015/06/25 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
2017/03/27 Javascript
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
JavaScript中的高级函数
2018/01/04 Javascript
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
JS实现移动端点击按钮复制文本内容
2019/07/28 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
2019/09/04 Javascript
微信小程序和H5页面间相互跳转代码实例
2019/09/19 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
python中使用sys模板和logging模块获取行号和函数名的方法
2014/04/15 Python
python列表操作实例
2015/01/14 Python
Python加pyGame实现的简单拼图游戏实例
2015/05/15 Python
Python实现读取文件最后n行的方法
2017/02/23 Python
pygame实现弹力球及其变速效果
2017/07/03 Python
Python探索之自定义实现线程池
2017/10/27 Python
python实现年会抽奖程序
2019/01/22 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
Tensorflow中批量读取数据的案列分析及TFRecord文件的打包与读取
2020/06/30 Python
分享PyCharm最新激活码(真永久激活方法)不用每月找安装参数或最新激活码了
2020/12/27 Python
美国网上花店:JustFlowers
2017/02/12 全球购物
微软新西兰官方网站:Microsoft New Zealand
2018/08/17 全球购物
小学生新学期寄语
2014/01/19 职场文书
优秀士兵先进事迹
2014/02/06 职场文书
什么是就业协议书
2014/04/17 职场文书
2016党校学习心得体会范文
2016/01/07 职场文书
Go中的条件语句Switch示例详解
2021/08/23 Golang
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL
Python序列化模块JSON与Pickle
2022/06/05 Python