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 定义新对象方法
Feb 20 Javascript
formValidator3.3的ajaxValidator一些异常分析
Jul 12 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
Nov 17 Javascript
JS组件Bootstrap Table使用方法详解
Feb 02 Javascript
BootStrap按钮标签及基本样式
Nov 23 Javascript
vue动态生成dom并且自动绑定事件
Apr 19 Javascript
详解webpack自动生成html页面
Jun 29 Javascript
微信小程序获取循环元素id以及wx.login登录操作
Aug 17 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
Sep 12 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
Nov 21 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
如何基于javascript实现贪吃蛇游戏
Feb 09 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二分法在IP地址查询中的应用
2008/08/12 PHP
PHP常用技术文之文件操作和目录操作总结
2014/09/27 PHP
PHP用mb_string函数库处理与windows相关中文字符及Win环境下开启PHP Mb_String方法
2015/11/11 PHP
php操作access数据库的方法详解
2017/02/22 PHP
Google Maps API地图应用示例分享
2014/10/23 Javascript
浅谈Javascript中的Function与Object
2015/01/26 Javascript
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
js实现人民币大写金额形式转换
2016/04/27 Javascript
jquery html动态添加的元素绑定事件详解
2016/05/24 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
2016/06/02 Javascript
深入理解jQuery layui分页控件的使用
2016/08/17 Javascript
详解vue渲染从后台获取的json数据
2017/07/06 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
JavaScript实现微信红包算法及问题解决方法
2018/04/26 Javascript
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
vue实现的仿淘宝购物车功能详解
2019/01/27 Javascript
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
[42:52]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
python网络编程学习笔记(一)
2014/06/09 Python
django批量导入xml数据
2016/10/16 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
pytorch获取vgg16-feature层输出的例子
2019/08/20 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
python 实现将list转成字符串,中间用空格隔开
2019/12/25 Python
pycharm全局搜索的具体步骤
2020/07/28 Python
python exit出错原因整理
2020/08/31 Python
基于第一个PhoneGap(cordova)的应用详解
2013/05/03 HTML / CSS
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
建筑结构施工专业推荐信
2014/02/21 职场文书
一年级小学生评语
2014/04/22 职场文书
法英专业大学生职业生涯规划书范文
2014/09/22 职场文书
委托培训协议书
2014/11/17 职场文书
师德标兵事迹材料
2014/12/19 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书
原生JS实现飞机大战小游戏
2021/06/09 Javascript