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 相关文章推荐
复制本贴标题和地址的js代码
Jul 01 Javascript
神奇的代码 通杀各种网站-可随意修改复制页面内容
Jul 17 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
Oct 24 Javascript
JS操作数据库的实例代码
Oct 17 Javascript
HTML Table 空白单元格补全的简单实现
Oct 13 Javascript
前端构建工具之gulp的语法教程
Jun 12 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
Sep 13 Javascript
AngularJS自定义过滤器用法经典实例总结
May 17 Javascript
详解Node.js异步处理的各种写法
Jun 09 Javascript
js实现无缝轮播图效果
Mar 09 Javascript
使用vue实现HTML页面生成图片的方法
Mar 12 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
Jul 24 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
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
微信小程序 条件渲染详解
2016/10/09 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
前端防止用户重复提交js实现代码示例
2018/09/07 Javascript
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
vue 函数调用加括号与不加括号的区别
2020/10/29 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
关于element的表单组件整理笔记
2021/02/05 Javascript
python使用win32com在百度空间插入html元素示例
2014/02/20 Python
Python标准库之循环器(itertools)介绍
2014/11/25 Python
PyQt5使用QTimer实现电子时钟
2019/07/29 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
Python自动化测试笔试面试题精选
2020/03/12 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
德国孕妇装和婴童服装网上商店:bellybutton
2018/04/12 全球购物
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
上海方立数码笔试题
2013/10/18 面试题
高三自我评价
2014/02/01 职场文书
工艺员岗位职责
2014/02/11 职场文书
励志广播稿300字(5篇)
2014/09/15 职场文书
面试复试通知单
2015/04/24 职场文书
今日说法观后感
2015/06/08 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书
如何在Python中创建二叉树
2021/03/30 Python
pandas取dataframe特定行列的实现方法
2021/05/24 Python
JAVA API 实用类 String详解
2021/10/05 Java/Android