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 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
JS中动态添加事件(绑定事件)的代码
Jan 09 Javascript
js移除事件 js绑定事件实例应用
Nov 28 Javascript
jquery模拟LCD 时钟的html文件源代码
Jun 16 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
Oct 17 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 Javascript
ES6数组的扩展详解
Apr 25 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
基于js中this和event 的区别(详解)
Oct 24 Javascript
vue ssr 实现方式(学习笔记)
Jan 18 Javascript
javascript中this的用法实践分析
Jul 29 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 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图片加水印原理(超简单的实例代码)
2013/01/18 PHP
Thinkphp中数据按分类嵌套循环实现方法
2014/10/30 PHP
PHP提示Warning:phpinfo() has been disabled函数禁用的解决方法
2014/12/17 PHP
php实现mysql事务处理的方法
2014/12/25 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
XmlUtils JS操作XML工具类
2009/10/01 Javascript
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
2013/12/04 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
2016/12/12 Javascript
jquery uploadify如何取消已上传成功文件
2017/02/08 Javascript
老生常谈jquery中detach()和remove()的区别
2017/03/02 Javascript
关于vue-resource报错450的解决方案
2017/07/24 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
2017/09/10 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
2019/06/06 Javascript
移动端吸顶fixbar的解决方案详解
2019/07/17 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
vue+iview分页组件的封装
2020/11/17 Vue.js
详解Python中的type和object
2018/08/15 Python
python爬虫之urllib库常用方法用法总结大全
2018/11/14 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
python 标准差计算的实现(std)
2019/07/29 Python
python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py
2019/10/06 Python
Python多进程multiprocessing、进程池用法实例分析
2020/03/24 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
银行职业规划书范文
2013/12/28 职场文书
材料化学专业求职信
2014/07/15 职场文书
工会工作个人总结
2015/03/03 职场文书
经理岗位职责范本
2015/04/15 职场文书
2015年社区综治工作总结
2015/04/21 职场文书
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL
Java 中的 Lambda List 转 Map 的多种方法详解
2022/07/07 Java/Android