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的IE和Firefox兼容性汇编
Jul 01 Javascript
JavaScript toFixed() 方法
Apr 15 Javascript
用Javascript实现Windows任务管理器的代码
Mar 27 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
JavaScript 数组中最大最小值
Jun 05 Javascript
原生JS:Date对象全面解析
Sep 06 Javascript
javascript中获取元素标签中间的内容的实现方法
Oct 08 Javascript
jquery与ajax获取特殊字符实例详解
Jan 08 Javascript
node中使用es5/6以及支持性与性能对比
Aug 11 Javascript
解决vue打包后vendor.js文件过大问题
Jul 03 Javascript
Vue将props值实时传递 并可修改的操作
Aug 09 Javascript
ant-design表单处理和常用方法及自定义验证操作
Oct 27 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 MYSQL 数据备份类
2009/06/19 PHP
PHP 彩色文字实现代码
2009/06/29 PHP
PHP简单实现解析xml为数组的方法
2018/05/02 PHP
PHP批斗大会之缺失的异常详解
2019/07/09 PHP
javascript 在网页中的运用(asp.net)
2009/11/23 Javascript
JSON 数据格式介绍
2012/01/13 Javascript
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
JavaScript中Math对象方法使用概述
2014/01/02 Javascript
javascript教程:关于if简写语句优化的方法
2014/05/17 Javascript
JS+CSS实现表格高亮的方法
2015/08/05 Javascript
省市区三级联动下拉框菜单javascript版
2015/08/11 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
2015/08/25 Javascript
ES5 ES6中Array对象去除重复项的方法总结
2017/04/27 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
layui 对弹窗 form表单赋值的实现方法
2019/09/04 Javascript
JavaScript This指向问题详解
2019/11/25 Javascript
JavaScript 中的无穷数(Infinity)详解
2020/02/13 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
[01:27:30]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python中DJANGO简单测试实例
2015/05/11 Python
Python基于xlrd模块操作Excel的方法示例
2018/06/21 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
详解使用python绘制混淆矩阵(confusion_matrix)
2019/07/14 Python
对python中不同模块(函数、类、变量)的调用详解
2019/07/16 Python
numpy求平均值的维度设定的例子
2019/08/24 Python
Django实现随机图形验证码的示例
2020/10/15 Python
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
毕业生幼师求职自荐信
2013/10/01 职场文书
文明宿舍获奖感言
2014/02/07 职场文书
无偿献血倡议书
2014/04/14 职场文书
买卖协议书范本
2014/04/21 职场文书
2014企业领导班子四风对照检查材料思想汇报
2014/09/17 职场文书
《山中访友》教学反思
2016/02/24 职场文书
Javascript中的解构赋值语法详解
2021/04/02 Javascript