AngularJS服务service用法总结

本文实例总结了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;    }  });})