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 相关文章推荐
javascript实现的鼠标链接提示效果生成器代码
Jun 28 Javascript
javascript+css 网页每次加载不同样式的实现方法
Dec 27 Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
jQuery中$(function() {});问题详解
Aug 10 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
Jul 25 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
Dec 09 Javascript
js微信分享接口调用详解
Jul 23 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
Jul 28 Javascript
vue mvvm数据响应实现
Nov 11 Javascript
react 路由Link配置详解
Nov 11 Javascript
JavaScript中10个Reduce常用场景技巧
Jun 21 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/02/22 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
php合并数组并保留键值的实现方法
2018/03/12 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
jQuery进行组件开发完整实例
2015/12/15 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
JavaScript循环_动力节点Java学院整理
2017/06/28 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
2018/05/30 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
Python爬虫实现爬取京东手机页面的图片(实例代码)
2017/11/30 Python
Python打印“菱形”星号代码方法
2018/02/05 Python
python使用tensorflow深度学习识别验证码
2018/04/03 Python
对python 命令的-u参数详解
2018/12/03 Python
pytorch的batch normalize使用详解
2020/01/15 Python
python3利用Axes3D库画3D模型图
2020/03/25 Python
python 解决函数返回return的问题
2020/12/05 Python
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
Ralph Lauren拉夫·劳伦美国官网:带有浓郁美国气息的高品味时装品牌
2017/11/01 全球购物
英国IT硬件供应商,定制游戏PC:Mesh Computers
2019/03/28 全球购物
金鑫耀Java笔试题
2014/09/06 面试题
最新大学毕业求职简历的自我评价
2013/10/18 职场文书
信用社竞聘演讲稿
2014/05/16 职场文书
郭明义观后感
2015/06/08 职场文书
三十年同学聚会致辞
2015/07/28 职场文书
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/04/22 无线电
一起来看看Vue的核心原理剖析
2022/03/24 Vue.js
vue实现列表垂直无缝滚动
2022/04/08 Vue.js