AngularJS服務service用法總結_AngularJS

本文執行個體總結了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相關內容感興趣的讀者可查看本站專題：《AngularJS入門與進階教程》及《AngularJS MVC架構總結》

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