AngularJS服务service用法总结


Posted in Javascript onDecember 13, 2016

本文实例总结了AngularJS服务service用法。分享给大家供大家参考,具体如下:

引言

最近在项目中用到了关于AngularJS中的服务相关的知识,在起初学习这个东西的时候就了解到这个东西在项目中是经常被用到的,在angular中也是比较重要的一块,所以今天小编就总结一些关于service的知识。

认识Service

关于service我们一点都不陌生,不论实在c#中还是Java中我们经常会遇到service的概念,其实service的作用就是对外提供某种特定的功能,也就是我们经常说的“为了实现某个功能而调用哪个服务”是一样的道理,他们一般是一个独立的模块,ng服务是这样的定义的:

Angular services are singletons objects or functions that carry out specific tasks common to web apps.

1、它是一个单利对象或函数,对外提供特定的功能。

2、它与我们自己定义一个function然后在其他地方调用不同,因为服务被定义在一个模块中,所以它的作用范围是可以被我们来管理的,ng避免全局变量污染意识是非常强的。

自定义服务

在angular中为我们提供了三种不同的方式来实现自定义服务,他们分别是系统内置的$provider、module中的service和module中的factory,下面来看看如何使用这三种方式;

1)$provide的使用

Providers 是唯一一种你可以传进 .config() 函数的 service。当你想要在 service 对象启用之前,先进行模块范围的配置,那就应该用 provider

var m1 = angular.module('myApp', [], function ($provide) {
    $provide.provider('providerService01', function () {
      this.$get = function () {
        return {
          message: 'this is providerService01'
        }
      }
    })
    $provide.provider('providerService02', function () {
      this.$get = function () {
        var _name = '';
        var service = {};
        service.setName = function (name) {
          _name = name;
        }
        service.getName = function () {
          return _name
        }
        return service;
      }
    })
})
m1.controller('firstController', ['$scope', 'providerService01', 'providerService02', function ($scope, providerService01, providerService02) {
    console.log(providerService01);
    providerService02.setName("李四");
    $scope.name = providerService02.getName();
}])

我们在使用$provide的使用可以像上面这样直接在module中直接注入$provide,然后再module中依次定义多个服务,当然我们也可以利用config来完成服务的定义。

var m1=angular.module('myApp',[]);
m1.config(function($provide){
  $provide.provider('providerService01', function () {
    this.$get = function () {
      return {
        message: 'this is providerService011'
      }
    }
  });
  $provide.provider('providerService02', function () {
    this.$get = function () {
      var _name='';
      var service={};
      service.setName=function(name){
        _name=name;
      }
      service.getName=function(){
        return _name
      }
      return service;
    }
  });
})

上面这两种实现方式达到的效果是一样的,所以我们在使用的时候可以任意选择一种来实现。

2)factory的使用

Factory方法直接把一个函数当成一个对象的$get 方法可以直接返回字符串,用 Factory 就是创建一个对象,为它添加属性,然后把这个对象返回出来。你把 service 传进 controller 之后,在 controller 里这个对象里的属性就可以通过 factory 使用了。

var m1 = angular.module('myApp', [], function ($provide) {
  $provide.factory('factoryService01',function(){
    return{
      message:'this is providerServices01'
    }
  })
});

factory的使用比$provide的使用简单一些,可以在factory直接返回已给对象,不在使用$get来实现对象的返回。并且$factory和$provide不仅仅可以返回一个对象还可以返回一个任意的字符串。

3)service的使用

Service 是用"new"关键字实例化的。因此,你应该给"this"添加属性,然后 service 返回"this"。你把service 传进 controller 之后,在 controller 里 "this" 上的属性 就可以通过 service 来使用了

$provide.service('service01',function(){
    return{
      message:'this is providerServices01'
    }
})

service和factory的使用是非常相似的,但是service是不能返回字符串的,而factory既可以返回对象也可以返回任意的字符串。

三者的区别:provider需要借助$get来实现,而其余的两者都不需要。series不能返回字符串,而其他的两个都可以返回。

服务之间的依赖关系

我们在实现某个功能的时候也许需要多个服务相互依赖才可以完成,那么对于服务之间的关系我们就需要来管理,例如我们在完成一个数据验证的功能,这是在jsFiddle中找的一个非常简单的小例子

var app = angular.module('MyApp', []);
app.controller('testC3',function($scope,validate){
  $scope.validateData = validate;
});
app.factory('remoteData',function(){
  var data = {name:'n',value:'v'};
  return data;
});
app.factory('validate',function(remoteData){
  return function(){
    if(remoteData.name=='n'){
      alert('验证通过');
    }
  };
});

服务validate是来验证数据是否合法的功能,但是它需要依赖另外一个服务remoteData来获得数据,但是在factory的参数中,我们可以直接传入服务remoteData,ng的依赖注入机制便帮我们做好了其他工作。不过一定要保证这个参数的名称与服务名称一致,ng是根据名称来识别的。若参数的名次与服务名称不一致,你就必须显示的声明一下,方式如下:

app.factory('validate',['remoteData',function(remoteDataService){
  return function(){
    if(remoteDataService.name=='n'){
      alert('验证通过');
    }
  };
}]);

小结

以上是小编在学习angularJS服务的一些总结,这些都是入门的知识,在这和大家分享一下,如果想要对服务有更深层的理解还需要我们在项目中好好的研究。

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
Javascript学习笔记4 Eval函数
Jan 11 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
Feb 11 Javascript
JQuery获取表格数据示例代码
May 26 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
Jun 23 Javascript
js实现鼠标触发图片抖动效果的方法
Feb 27 Javascript
JavaScript设计模式经典之命令模式
Feb 24 Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 Javascript
jQuery ajax MD5实现用户注册即时验证功能
Oct 11 Javascript
js控制按钮,防止频繁点击响应的实例
Feb 15 Javascript
js实现一个简单的MVVM框架示例
Jan 15 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
Mar 01 Javascript
react 移动端实现列表左滑删除的示例代码
Jul 04 Javascript
Vue.js中用v-bind绑定class的注意事项
Dec 13 #Javascript
AngularJS中的Promise详细介绍及实例代码
Dec 13 #Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 #Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 #Javascript
解决Window10系统下Node安装报错的问题分析
Dec 13 #Javascript
浅析Jquery操作select
Dec 13 #Javascript
Vue.js使用v-show和v-if的注意事项
Dec 13 #Javascript
You might like
fleaphp常用方法分页之Pager使用方法
2011/04/23 PHP
PHP使用内置函数file_put_contents写入文件及追加内容的方法
2015/12/07 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
php使用PDO从数据库表中读取数据的实现方法(必看)
2017/06/02 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
QQ登录简单实现代码
2021/03/09 Javascript
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
javascript限制用户只能输汉字中文的方法
2014/11/20 Javascript
浅谈javascript 函数内部属性
2015/01/21 Javascript
jQuery制作简洁的图片轮播效果
2015/04/03 Javascript
浏览器中url存储的JavaScript实现
2015/07/07 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
2015/12/11 Javascript
chrome浏览器如何断点调试异步加载的JS
2016/09/05 Javascript
js判断PC端与移动端跳转
2020/12/24 Javascript
vue组件 $children,$refs,$parent的使用详解
2017/07/31 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
2017/10/27 Javascript
vue-quill-editor富文本编辑器简单使用方法
2018/09/21 Javascript
vue 解决路由只变化参数页面组件不更新问题
2019/11/05 Javascript
[01:16:28]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第二场 2月23日
2021/03/11 DOTA
Django中使用 Closure Table 储存无限分级数据
2019/06/06 Python
Python列表原理与用法详解【创建、元素增加、删除、访问、计数、切片、遍历等】
2019/10/30 Python
Python列表操作方法详解
2020/02/09 Python
日本运动品牌美津浓官方购物网站:MIZUNO SHOP
2016/08/21 全球购物
中国医药集团国药在线:国药网
2017/02/06 全球购物
时尚设计师手表:The Watch Cabin
2018/10/06 全球购物
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
绘儿乐产品官方在线商店:Crayola.com
2019/09/07 全球购物
如何判断计算机可能已经中马
2013/03/22 面试题
《邮票齿孔的故事》教学反思
2014/02/22 职场文书
学习优秀党员杨宗兴先进事迹材料思想汇报
2014/09/14 职场文书
经典导游欢迎词
2015/01/26 职场文书
试用期自我评价范文
2015/03/10 职场文书
运动会加油稿50字
2015/07/21 职场文书
求职自我评价参考范文
2019/05/16 职场文书
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL