本文實(shí)例總結(jié)了AngularJS服務(wù)service用法。分享給大家供大家參考，具體如下：

引言

最近在項(xiàng)目中用到了關(guān)于AngularJS中的服務(wù)相關(guān)的知識(shí)，在起初學(xué)習(xí)這個(gè)東西的時(shí)候就了解到這個(gè)東西在項(xiàng)目中是經(jīng)常被用到的，在angular中也是比較重要的一塊，所以今天小編就總結(jié)一些關(guān)于service的知識(shí)。

認(rèn)識(shí)Service

關(guān)于service我們一點(diǎn)都不陌生，不論實(shí)在c#中還是Java中我們經(jīng)常會(huì)遇到service的概念，其實(shí)service的作用就是對(duì)外提供某種特定的功能，也就是我們經(jīng)常說(shuō)的“為了實(shí)現(xiàn)某個(gè)功能而調(diào)用哪個(gè)服務(wù)”是一樣的道理，他們一般是一個(gè)獨(dú)立的模塊，ng服務(wù)是這樣的定義的：

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

1、它是一個(gè)單利對(duì)象或函數(shù)，對(duì)外提供特定的功能。

2、它與我們自己定義一個(gè)function然后在其他地方調(diào)用不同，因?yàn)榉?wù)被定義在一個(gè)模塊中，所以它的作用范圍是可以被我們來(lái)管理的，ng避免全局變量污染意識(shí)是非常強(qiáng)的。

自定義服務(wù)

在angular中為我們提供了三種不同的方式來(lái)實(shí)現(xiàn)自定義服務(wù)，他們分別是系統(tǒng)內(nèi)置的$provider、module中的service和module中的factory，下面來(lái)看看如何使用這三種方式；

1）$provide的使用

Providers 是唯一一種你可以傳進(jìn) .config() 函數(shù)的 service。當(dāng)你想要在 service 對(duì)象啟用之前，先進(jìn)行模塊范圍的配置，那就應(yīng)該用 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();
}])

我們?cè)谑褂?provide的使用可以像上面這樣直接在module中直接注入$provide，然后再module中依次定義多個(gè)服務(wù)，當(dāng)然我們也可以利用config來(lái)完成服務(wù)的定義。

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;
    }
  });
})

上面這兩種實(shí)現(xiàn)方式達(dá)到的效果是一樣的，所以我們?cè)谑褂玫臅r(shí)候可以任意選擇一種來(lái)實(shí)現(xiàn)。

2）factory的使用

Factory方法直接把一個(gè)函數(shù)當(dāng)成一個(gè)對(duì)象的$get 方法可以直接返回字符串，用 Factory 就是創(chuàng)建一個(gè)對(duì)象，為它添加屬性，然后把這個(gè)對(duì)象返回出來(lái)。你把 service 傳進(jìn) controller 之后，在 controller 里這個(gè)對(duì)象里的屬性就可以通過(guò) factory 使用了。

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

factory的使用比$provide的使用簡(jiǎn)單一些，可以在factory直接返回已給對(duì)象，不在使用$get來(lái)實(shí)現(xiàn)對(duì)象的返回。并且$factory和$provide不僅僅可以返回一個(gè)對(duì)象還可以返回一個(gè)任意的字符串。

3)service的使用

Service 是用"new"關(guān)鍵字實(shí)例化的。因此，你應(yīng)該給"this"添加屬性，然后 service 返回"this"。你把service 傳進(jìn) controller 之后，在 controller 里 "this" 上的屬性 就可以通過(guò) service 來(lái)使用了

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

service和factory的使用是非常相似的，但是service是不能返回字符串的，而factory既可以返回對(duì)象也可以返回任意的字符串。

三者的區(qū)別：provider需要借助$get來(lái)實(shí)現(xiàn)，而其余的兩者都不需要。series不能返回字符串，而其他的兩個(gè)都可以返回。

服務(wù)之間的依賴關(guān)系

我們?cè)趯?shí)現(xiàn)某個(gè)功能的時(shí)候也許需要多個(gè)服務(wù)相互依賴才可以完成，那么對(duì)于服務(wù)之間的關(guān)系我們就需要來(lái)管理，例如我們?cè)谕瓿梢粋€(gè)數(shù)據(jù)驗(yàn)證的功能，這是在jsFiddle中找的一個(gè)非常簡(jiǎn)單的小例子

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('驗(yàn)證通過(guò)');
    }
  };
});

服務(wù)validate是來(lái)驗(yàn)證數(shù)據(jù)是否合法的功能，但是它需要依賴另外一個(gè)服務(wù)remoteData來(lái)獲得數(shù)據(jù)，但是在factory的參數(shù)中，我們可以直接傳入服務(wù)remoteData，ng的依賴注入機(jī)制便幫我們做好了其他工作。不過(guò)一定要保證這個(gè)參數(shù)的名稱與服務(wù)名稱一致，ng是根據(jù)名稱來(lái)識(shí)別的。若參數(shù)的名次與服務(wù)名稱不一致，你就必須顯示的聲明一下，方式如下：

app.factory('validate',['remoteData',function(remoteDataService){
  return function(){
    if(remoteDataService.name=='n'){
      alert('驗(yàn)證通過(guò)');
    }
  };
}]);

小結(jié)

以上是小編在學(xué)習(xí)angularJS服務(wù)的一些總結(jié)，這些都是入門(mén)的知識(shí)，在這和大家分享一下，如果想要對(duì)服務(wù)有更深層的理解還需要我們?cè)陧?xiàng)目中好好的研究。

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS入門(mén)與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

最新評(píng)論