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 相关文章推荐
16个最流行的JavaScript框架[推荐]
May 29 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
js获取ajax返回值代码
Apr 30 Javascript
JavaScript常用验证函数实例汇总
Nov 25 Javascript
jquery插入兄弟节点的操作方法
Dec 07 Javascript
基于Axios 常用的请求方法别名(详解)
Mar 13 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 Javascript
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
vue elementUI table 自定义表头和行合并的实例代码
May 22 Javascript
js实现QQ邮箱邮件拖拽删除功能
Aug 27 Javascript
uniapp 微信小程序 自定义tabBar 导航
Apr 22 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
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
PHP面向对象详解(三)
2015/12/07 PHP
JavaScript之HTMLCollection接口代码
2011/04/27 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
2011/09/27 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
2013/05/06 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
JS定时器实例详细分析
2013/10/11 Javascript
js获取当前页面的url网址信息
2014/06/12 Javascript
jquery实现上下左右滑动的方法
2015/02/09 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
IntersectionObserver API 详解篇
2016/12/11 Javascript
jsonp跨域请求实现示例
2017/03/13 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
详解JavaScript中操作符和表达式
2018/09/12 Javascript
TypeScript基础入门教程之三重斜线指令详解
2018/10/22 Javascript
Vue使用NProgress的操作过程解析
2019/10/10 Javascript
JavaScript利用键盘码控制div移动
2020/03/19 Javascript
vue中destroyed方法的使用说明
2020/07/21 Javascript
python利用rsa库做公钥解密的方法教程
2017/12/10 Python
Python Numpy 数组的初始化和基本操作
2018/03/13 Python
pip安装时ReadTimeoutError的解决方法
2018/06/12 Python
numpy给array增加维度np.newaxis的实例
2018/11/01 Python
基于sklearn实现Bagging算法(python)
2019/07/11 Python
深入研究HTML5实现图片压缩上传功能
2016/03/25 HTML / CSS
联想韩国官网:Lenovo Korea
2018/05/10 全球购物
荷兰网上药店:Drogisterij.net
2019/09/03 全球购物
Booking.com亚太地区:Booking.com APAC
2020/02/07 全球购物
几个Linux面试题笔试题
2016/08/01 面试题
毕业生找工作的自我评价
2013/10/18 职场文书
岗位职责的定义
2013/11/10 职场文书
护理毕业生自荐信范文
2013/12/22 职场文书
总账会计岗位职责
2014/03/13 职场文书
化工专业自荐书
2014/06/16 职场文书
2014企业领导班子四风对照检查材料思想汇报
2014/09/17 职场文书
初中生300字旷课检讨书
2014/11/19 职场文书
Golang MatrixOne使用介绍和汇编语法
2022/04/19 Golang