angularJS自定義服務的幾種方式

在angularJS中定義服務共有四種常見的方式：factory，service，provider，constant，value

使用形式的不同：

1）factory以返回對象的形式定義服務：

  myapp.factory('factorySer',[function() {
    return {
      getName: function () {
        return 'your name is tomHason-factory';
      }
    }
  }]）

2）service是使用new關鍵字實例化，所以直接使用this定義

 myapp.service('serviceSer',[function() {
    this.getName = function () {
      return 'your name is tomHason-service';
    }
  }])

3）provider比較特殊，在定義服務的時候必須使用$get函數返回一個對象

能注入到config的service，這樣定義的service在你開始注入之前就已經實例化，開發共享的模塊的時候常常使用它，能夠在使用之前進行配置，比如你可能需要配置你的服務端的url

  // 能注入到config的service，這樣定義的service在你開始注入之前就已經實例化，開發共享的模塊的時候常常使用它，能夠在使用之前進行配置，比如你可能需要配置你的服務端的url
  myapp.provider('providerSer', [function () {
      this.$get = function() {  
        return {
          name: 'your name is tomHason-provider',
          getName: function () {
            return  this.name;
          },
          setName: function (name) {
            return this.name = name;
          }
        }
    }  
  }])

4）constant一般用於常量定義

能注入到config的服務

myapp.constant('constantSer', {name: 'Greasy Giant', age: 32});

5）value與constant一樣是用於定義常量的

 myapp.value('valueSer', {name:'tomHsm-valuse'})

　

關於provider，以及constant在angularModule.config函數中的使用方式簡單例子

AngularJS模塊可以在被加載和執行之前對其自身進行配置。我們可以在應用的加載階段應用不同的邏輯組對其修改，在模塊加載階段，AngularJS會在提供者(provide)注冊和配置的過程中對模塊進行配置。

在整個AngularJS的工作流中，這個階段是唯一能夠在應用啟動前對其進行修改的部分。

關於angularJS的config函數使用較多的地方就是配置路由的ui-router

下面是一個簡單provider服務使用在congfig函數中的例子：

app.js

define(['angular'],function(angular) {
    var myapp = angular.module('myapp',['ui.router']);
    myapp.provider('MyProvider', function() {  
        var defaultName = 'anonymous';  
        var name = defaultName;  
        this.setName = function(newName) {  
            name = newName;  
        }
        this.getName = function () {
            return name;
        } 
        this.$get = function() {  
            var result = {}; 
            result.name = name;  
            result.defaultName = defaultName;  
            result.getName = function () {
                return this.name;
            }
            result.setName = function (name) {
                this.name = name
            }
            return result;  
        }  
    })  
    myapp.constant('apiKey', '123123123')
    myapp.config(['$translateProvider','apiKey','MyProviderProvider',function($translateProvider,apiKey,MyProviderProvider) {
        MyProviderProvider.setName('Angularjs');  

可以看到的是我們在模塊定義的時候定義了一個provider形式的服務MyProvider，在config函數中使用了其setName()方法進行name的初始化【在config使用的時候是`服務名+‘Provider’`的形式】

在控制器中使用這個服務的時候和其他服務形式是一樣的

define(['app','service/service.methods'],function(myapp){
  myapp.controller("servicesMethodsCtrl",["$scope",'$state',"$timeout","factorySer", "serviceSer", "constantSer",'valueSer','providerSer','MyProvider',
    function($scope,$state,$timeout,factorySer, serviceSer, constantSer,valueSer,providerSer,MyProvider){
      console.log("this is servicesMethodsCtrl");
　　　 $timeout(function () {
　　　　　　MyProvider.setName("vueJS");
　　　　　　$scope.MyProviderName = MyProvider.getName();
　　　　　　$scope.$apply();
　　　　},2000)

　　

借題發揮：

現如今項目十分復雜，涉及狀態難以管理，於是就有了vuex,redux等等比較優秀的狀態管理工具,本質上是全局定義一個對象，給幾個api進行對象的屬性維護。

那么在angularJS中的服務也有異曲同工之妙，在某種程度上可以使用服務進行狀態管理。