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中的服务也有异曲同工之妙，在某种程度上可以使用服务进行状态管理。