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 相关文章推荐
firefox下frameset取不到值的解决方法
Sep 06 Javascript
JavaScript闭包函数访问外部变量的方法
Aug 27 Javascript
js字符串完全替换函数分享
Dec 03 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
Nov 16 Javascript
小程序云开发部署攻略(图文教程)
Oct 30 Javascript
6行代码实现微信小程序页面返回顶部效果
Dec 28 Javascript
如何在JavaScript中谨慎使用代码注释
Jun 21 Javascript
highcharts.js数据绑定方式代码实例
Nov 13 Javascript
vue 使用 canvas 实现手写电子签名
Mar 06 Javascript
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
解决vue+router路由跳转不起作用的一项原因
Jul 19 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
PHP 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
php 日期和时间的处理-郑阿奇(续)
2011/07/04 PHP
php模拟socket一次连接,多次发送数据的实现代码
2011/07/26 PHP
php强制运行广告的方法
2014/12/01 PHP
PHP中使用file_get_contents抓取网页中文乱码问题解决方法
2014/12/17 PHP
php+curl 发送图片处理代码分享
2015/07/09 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
discuz论坛更换域名,详细文件修改步骤
2020/12/09 PHP
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
基于Marquee.js插件实现的跑马灯效果示例
2017/01/25 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
2017/04/04 jQuery
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
2017/06/01 Javascript
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
简单的三步vuex入门
2018/05/20 Javascript
javascript实现扫雷简易版
2020/08/18 Javascript
Python简单实现两个任意字符串乘积的方法示例
2018/04/12 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
利用python计算windows全盘文件md5值的脚本
2019/07/27 Python
python使用 __init__初始化操作简单示例
2019/09/26 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
Python实现将元组中的元素作为参数传入函数的操作
2020/06/05 Python
Django 构建模板form表单的两种方法
2020/06/14 Python
在keras中实现查看其训练loss值
2020/06/16 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
CSS3的transition和animation的用法实例介绍
2014/08/20 HTML / CSS
美国眼镜在线零售商:Dualens
2019/12/07 全球购物
优秀毕业生推荐信
2013/11/02 职场文书
工作时间上网检讨书
2014/02/03 职场文书
反四风对照检查材料
2014/09/22 职场文书
党的群众路线教育实践活动对照检查材料思想汇报(党员篇)
2014/09/25 职场文书
收银员岗位职责范本
2015/04/07 职场文书
无保留意见审计报告
2015/06/05 职场文书
缅怀先烈主题班会
2015/08/14 职场文书
让人感觉高大上的讲话稿怎么写?
2019/07/08 职场文书