AngularJS服務service用法總結

更新時間：2016年12月13日 10:06:52 作者：鄭浩-

這篇文章主要介紹了AngularJS服務service用法,結合實例形式總結分析了服務Service的概念、功能及自定義服務的相關操作技巧,需要的朋友可以參考下

本文實例總結了AngularJS服務service用法。分享給大家供大家參考，具體如下：

引言

最近在項目中用到了關于AngularJS中的服務相關的知識，在起初學習這個東西的時候就了解到這個東西在項目中是經(jīng)常被用到的，在angular中也是比較重要的一塊，所以今天小編就總結一些關于service的知識。

認識Service

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

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

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

2、它與我們自己定義一個function然后在其他地方調用不同，因為服務被定義在一個模塊中，所以它的作用范圍是可以被我們來管理的，ng避免全局變量污染意識是非常強的。

自定義服務

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

1）$provide的使用

Providers 是唯一一種你可以傳進 .config() 函數(shù)的 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;
    }
  });
})

上面這兩種實現(xiàn)方式達到的效果是一樣的，所以我們在使用的時候可以任意選擇一種來實現(xiàn)。

2）factory的使用

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

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

factory的使用比$provide的使用簡單一些，可以在factory直接返回已給對象，不在使用$get來實現(xiàn)對象的返回。并且$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既可以返回對象也可以返回任意的字符串。

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

服務之間的依賴關系

我們在實現(xiàn)某個功能的時候也許需要多個服務相互依賴才可以完成，那么對于服務之間的關系我們就需要來管理，例如我們在完成一個數(shù)據(jù)驗證的功能，這是在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是來驗證數(shù)據(jù)是否合法的功能，但是它需要依賴另外一個服務remoteData來獲得數(shù)據(jù)，但是在factory的參數(shù)中，我們可以直接傳入服務remoteData，ng的依賴注入機制便幫我們做好了其他工作。不過一定要保證這個參數(shù)的名稱與服務名稱一致，ng是根據(jù)名稱來識別的。若參數(shù)的名次與服務名稱不一致，你就必須顯示的聲明一下，方式如下：

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

小結

以上是小編在學習angularJS服務的一些總結，這些都是入門的知識，在這和大家分享一下，如果想要對服務有更深層的理解還需要我們在項目中好好的研究。

更多關于AngularJS相關內容感興趣的讀者可查看本站專題：《AngularJS入門與進階教程》及《AngularJS MVC架構總結》

希望本文所述對大家AngularJS程序設計有所幫助。

您可能感興趣的文章: