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 相关文章推荐
jquery ajax 调用失败的原因示例介绍
Sep 27 Javascript
jQuery知识点整理
Jan 30 Javascript
理解javascript模块化
Mar 28 Javascript
Javascript必知必会(四)js类型转换
Jun 08 Javascript
AngularJS 模型详细介绍及实例代码
Jul 27 Javascript
JS图片压缩(pc端和移动端都适用)
Jan 12 Javascript
详解数组Array.sort()排序的方法
May 09 Javascript
不使用 JS 匿名函数理由
Nov 17 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
Dec 07 Javascript
详解vue.js之props传递参数
Dec 12 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
Sep 27 Javascript
详解在网页上通过JS实现文本的语音朗读
Mar 28 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运行出现Call to undefined function curl_init()的解决方法
2010/11/02 PHP
PHP用GD库生成高质量的缩略图片
2011/03/09 PHP
PHPMailer邮件发送的实现代码
2013/05/04 PHP
Symfony实现行为和模板中取得request参数的方法
2016/03/17 PHP
php、java、android、ios通用的3des方法(推荐)
2016/09/09 PHP
form自动提交实例讲解
2017/07/10 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
JQuery下的Live方法和$.browser方法使用代码
2010/06/02 Javascript
克隆javascript对象的三个方法小结
2011/01/12 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
2012/12/21 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
基于豆瓣API+Angular开发的web App
2015/01/02 Javascript
Javascript动态创建div的方法
2015/02/09 Javascript
解析JavaScript的ES6版本中的解构赋值
2015/07/28 Javascript
JS实现弹性漂浮效果的广告代码
2015/09/02 Javascript
jquery树形菜单效果的简单实例
2016/06/06 Javascript
AngularJS中的表单简单入门
2016/07/28 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
python抓取网页图片示例(python爬虫)
2014/04/27 Python
python用户管理系统
2018/03/13 Python
python实现数据分析与建模
2019/07/11 Python
pandas按条件筛选数据的实现
2021/02/20 Python
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
记者岗位职责
2014/01/06 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
交通事故委托书范本
2014/09/28 职场文书
离开雷锋的日子观后感
2015/06/09 职场文书
教师远程研修感悟
2015/11/18 职场文书
python套接字socket通信
2022/04/01 Python
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技