Angularj: serviço vs fornecedor vs fábrica

Question

Angularj: serviço vs fornecedor vs fábrica

Quais são as diferenças entre uma Service, Provider e em AngularJS?

3346

angularjs dependency-injection angularjs-service angularjs-factory angularjs-provider

Author: Robin-Hoodie, 2013-03-27

Source

30 answers

Demonstração JS Fiddle

Exemplo de "Olá mundo" com factory / service / provider:

var myApp = angular.module('myApp', []);

//service style, probably the simplest one
myApp.service('helloWorldFromService', function() {
    this.sayHello = function() {
        return "Hello, World!";
    };
});

//factory style, more involved but more sophisticated
myApp.factory('helloWorldFromFactory', function() {
    return {
        sayHello: function() {
            return "Hello, World!";
        }
    };
});
    
//provider style, full blown, configurable version     
myApp.provider('helloWorld', function() {

    this.name = 'Default';

    this.$get = function() {
        var name = this.name;
        return {
            sayHello: function() {
                return "Hello, " + name + "!";
            }
        }
    };

    this.setName = function(name) {
        this.name = name;
    };
});

//hey, we can configure a provider!            
myApp.config(function(helloWorldProvider){
    helloWorldProvider.setName('World');
});
        

function MyCtrl($scope, helloWorld, helloWorldFromFactory, helloWorldFromService) {
    
    $scope.hellos = [
        helloWorld.sayHello(),
        helloWorldFromFactory.sayHello(),
        helloWorldFromService.sayHello()];
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
    {{hellos}}
</div>
</body>

817

Author: EpokK, 2016-03-09 05:55:15

TL; DR

1) quando você está usando uma fábrica Você cria um objeto, adiciona propriedades a ele, em seguida, retornar esse mesmo objeto. Quando você passar esta fábrica em seu controlador, essas propriedades no objeto agora estarão disponíveis naquele controlador através de sua fábrica.

app.controller(‘myFactoryCtrl’, function($scope, myFactory){
  $scope.artist = myFactory.getArtist();
});

app.factory(‘myFactory’, function(){
  var _artist = ‘Shakira’;
  var service = {};

  service.getArtist = function(){
    return _artist;
  }

  return service;
});

2) Quando você está usando serviço , AngularJS instancia-o nos bastidores com a palavra-chave' nova'. Por causa disso, você vai adicionar propriedades para ' isto 'e o serviço irá devolver'isto'. Quando você passar o serviço para o seu controlador, essas propriedades em 'isto' estarão agora disponíveis no controlador através do seu serviço.

app.controller(‘myServiceCtrl’, function($scope, myService){
  $scope.artist = myService.getArtist();
});

app.service(‘myService’, function(){
  var _artist = ‘Nelly’;
  this.getArtist = function(){
    return _artist;
  }
});

3) Os fornecedores são o único serviço que pode passar para o seu .função config (). Use um provedor quando você quiser fornecer configuração em todo o módulo para o seu objeto de serviço antes de torná-lo disponível.

app.controller(‘myProvider’, function($scope, myProvider){
  $scope.artist = myProvider.getArtist();
  $scope.data.thingFromConfig = myProvider.thingOnConfig;
});

app.provider(‘myProvider’, function(){
 //Only the next two lines are available in the app.config()
 this._artist = ‘’;
 this.thingFromConfig = ‘’;
  this.$get = function(){
    var that = this;
    return {
      getArtist: function(){
        return that._artist;
      },
      thingOnConfig: that.thingFromConfig
    }
  }
});

app.config(function(myProviderProvider){
  myProviderProvider.thingFromConfig = ‘This was set in config’;
});

Não TL; DR

1) fábrica
As fábricas são a forma mais popular de criar e configurar um serviço. Não há muito mais do que o Dr. disse. Você apenas cria um objeto, adiciona propriedades a ele, em seguida, retornar o mesmo objeto. Então, quando você passar a fábrica em seu controlador, essas propriedades no objeto agora estarão disponíveis naquele controlador através de sua fábrica. Um exemplo mais extenso está abaixo.

app.factory(‘myFactory’, function(){
  var service = {};
  return service;
});

Sejam quais forem as propriedades a que nos ligamos "serviço" estará disponível para nós quando passarmos "myFactory" em nosso controlador. Agora vamos adicionar algumas variáveis 'privadas' à nossa função de callback. Estes não serão diretamente acessíveis a partir do controlador, mas eventualmente iremos configurar alguns métodos getter/setter em 'serviço' para ser capaz de alterar estas variáveis 'privadas' quando necessário.

app.factory(‘myFactory’, function($http, $q){
  var service = {};
  var baseUrl = ‘https://itunes.apple.com/search?term=’;
  var _artist = ‘’;
  var _finalUrl = ‘’;

  var makeUrl = function(){
   _artist = _artist.split(‘ ‘).join(‘+’);
    _finalUrl = baseUrl + _artist + ‘&callback=JSON_CALLBACK’;
    return _finalUrl
  }

  return service;
});

Aqui você vai notar que não estamos anexando essas variáveis / função ao 'serviço'. Estamos simplesmente a criá-los para usar ou modifique-os mais tarde.

o baseUrl é o URL de base que a API do iTunes necessita
_finalUrl é a URL final e totalmente construída para a qual vamos fazer a chamada para o iTunes
makeUrl é uma função que irá criar e devolver a nossa URL amigável iTunes.

Agora que as nossas variáveis e funções auxiliares/privadas estão no lugar, vamos adicionar algumas propriedades ao objecto' serviço'. Tudo o que pusermos em 'serviço' pode ser usado directamente dentro de qualquer controlador em que passemos o 'myFactory'.

Vamos criar métodos setartistas e getartistas que simplesmente retornam ou configuram o artista. Nós também vamos criar um método que vai chamar a API do iTunes com a nossa URL criada. Este método vai devolver uma promessa que vai cumprir uma vez que os dados voltou da API do iTunes. Se você não teve muita experiência usando promessas em AngularJS, eu recomendo fazer um mergulho profundo em o.

Abaixo o setartista aceita um artista e permite-lhe definir o artista. O getArtist devolve o artista. callItunes As primeiras chamadas makeUrl (), a fim de construir o URL que vamos usar com o nosso pedido $http. Em seguida, ele configura um objeto de promessa, faz um pedido de $http com o nosso url final, então porque o $http retorna uma promessa, Nós somos capazes de chamar .ou sucesso .erro após o nosso pedido. Resolvemos então a nossa promessa com os dados do iTunes, ou rejeitamo - la com um mensagem dizendo "houve um erro".

app.factory('myFactory', function($http, $q){
  var service = {};
  var baseUrl = 'https://itunes.apple.com/search?term=';
  var _artist = '';
  var _finalUrl = '';

  var makeUrl = function(){
    _artist = _artist.split(' ').join('+');
    _finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
    return _finalUrl;
  }

  service.setArtist = function(artist){
    _artist = artist;
  }

  service.getArtist = function(){
    return _artist;
  }

  service.callItunes = function(){
    makeUrl();
    var deferred = $q.defer();
    $http({
      method: 'JSONP',
      url: _finalUrl
    }).success(function(data){
      deferred.resolve(data);
    }).error(function(){
      deferred.reject('There was an error')
    })
    return deferred.promise;
  }

  return service;
});

Agora a nossa fábrica está completa. Agora somos capazes de injetar 'myFactory' em qualquer controlador e então seremos capazes de chamar os nossos métodos que anexamos ao nosso objeto de serviço (setArtist, getArtist, e callItunes).

app.controller('myFactoryCtrl', function($scope, myFactory){
  $scope.data = {};
  $scope.updateArtist = function(){
    myFactory.setArtist($scope.data.artist);
  };

  $scope.submitArtist = function(){
    myFactory.callItunes()
      .then(function(data){
        $scope.data.artistData = data;
      }, function(data){
        alert(data);
      })
  }
});

No controlador acima, estamos a injectar no serviço "myFactory". Em seguida, definimos propriedades em nosso objeto $ scope com dados de 'myFactory'. O único código complicado acima é se você nunca lidou com promessas antes. Como o callItunes está retornando uma promessa, Podemos usar o .then () method and only set $scope.dado.artistData uma vez que a nossa promessa seja cumprida com os dados do iTunes. Você vai notar que nosso controlador é muito 'fino' (esta é uma boa prática de codificação). Toda a nossa lógica e dados persistentes estão localizados em nosso serviço, não em nosso controlador.

2) Serviço
Talvez a maior coisa a saber ao lidar com a criação de um serviço é que ele é instanciado com o palavra-chave 'nova'. Para você gurus JavaScript isso deve lhe dar uma grande dica sobre a natureza do Código. Para aqueles de vocês com um fundo limitado em JavaScript ou para aqueles que não estão muito familiarizados com o que a palavra-chave 'nova' realmente faz, vamos rever alguns fundamentos JavaScript que eventualmente nos ajudarão a entender a natureza de um serviço.

Para realmente ver as alterações que ocorrem quando invoca uma função com a palavra-chave 'nova', vamos criar uma função e invocá-la com a palavra-chave 'nova', então vamos mostrar o que o intérprete faz quando vê a palavra-chave' nova'. Os resultados finais serão os mesmos.

Primeiro, vamos criar o nosso Construtor.

var Person = function(name, age){
  this.name = name;
  this.age = age;
}

Esta é uma função típica de construtor de JavaScript. Agora, sempre que invocarmos a função de pessoa usando a palavra-chave 'nova', 'isto' estará ligado ao objeto recém-criado.

Agora vamos adicionar um método ao protótipo da nossa pessoa para que esteja disponível em todas as instâncias da nossa pessoa. ‘classe’.

Person.prototype.sayName = function(){
  alert(‘My name is ‘ + this.name);
}

Agora, porque colocamos a função sayName no protótipo, cada instância de pessoa será capaz de chamar a função sayName, a fim de alertar o nome dessa instância.

Agora que temos a nossa função de construtor pessoal e a nossa função de sayName no seu protótipo, vamos criar uma instância de pessoa e depois chamar a função de sayName.

var tyler = new Person(‘Tyler’, 23);
tyler.sayName(); //alerts ‘My name is Tyler’

Então, todos juntos o código para criar um construtor de pessoas, adicionando uma função ao seu protótipo, criando uma instância de pessoa, e então chamar a função em seu protótipo se parece com isso.

var Person = function(name, age){
  this.name = name;
  this.age = age;
}
Person.prototype.sayName = function(){
  alert(‘My name is ‘ + this.name);
}
var tyler = new Person(‘Tyler’, 23);
tyler.sayName(); //alerts ‘My name is Tyler’

Agora vamos ver o que realmente está acontecendo quando você usa a palavra-chave 'nova' em JavaScript. A primeira coisa que você deve notar é que depois de usar 'novo' em nosso exemplo, somos capazes de chamar um método (sayName) em 'tyler' como se fosse um objeto - isso é porque é. Então, primeiro, sabemos que nosso Construtor pessoal está retornando um objeto, se podemos ver isso no código ou não. Segundo, nós ... saiba que como a nossa função sayName está localizada no protótipo e não diretamente na instância da pessoa, o objeto que a função da pessoa está retornando deve estar delegando para o seu protótipo em pesquisas falhadas. Em termos mais simples, quando ligarmos ao tyler.sayName () o interpretador diz: "OK, eu vou olhar para o objeto 'tyler' que acabamos de criar, localizar a função sayName, em seguida, chamá-lo. Espera um minuto, não o vejo aqui - tudo o que vejo é nome e idade, deixa-me ver o protótipo. Sim, parece que está no protótipo, deixa-me dizer.".

Abaixo está o código para como você pode pensar sobre o que a palavra-chave' nova ' está realmente fazendo em JavaScript. É basicamente um exemplo de código do parágrafo acima. Coloquei a 'vista interpretativa' ou a forma como o intérprete vê o código dentro das notas.

var Person = function(name, age){
  //The below line creates an object(obj) that will delegate to the person’s prototype on failed lookups.
  //var obj = Object.create(Person.prototype);

  //The line directly below this sets ‘this’ to the newly created object
  //this = obj;

  this.name = name;
  this.age = age;

  //return this;
}

Agora tendo este conhecimento do que a palavra-chave' nova ' realmente faz em JavaScript, criar um serviço em AngularJS deve ser mais fácil de entender.

A maior coisa a fazer compreender ao criar um serviço é saber que os Serviços estão instanciados com a palavra-chave "nova". Combinando esse conhecimento com os nossos exemplos acima, você deve agora reconhecer que você vai anexar suas propriedades e métodos diretamente a 'isto', que depois será devolvido do próprio serviço. Vamos dar uma olhada nisso em ação. Ao contrário do que fizemos com o exemplo da fábrica, não precisamos de criar um objecto e depois devolver esse objecto porque, como mencionamos muitos vezes antes, usamos a palavra-chave 'nova' para que o intérprete crie esse objeto, Faça com que ele delege no seu protótipo, em seguida, devolvê-lo para nós sem que tenhamos que fazer o trabalho. Primeiro, vamos criar a nossa função privada e auxiliar. Isto deve parecer-me familiar, já que fizemos exactamente o mesmo com a nossa fábrica. Eu não vou explicar o que cada linha faz aqui porque eu fiz isso no exemplo da fábrica, se você está confuso, re-leia o exemplo da fábrica.

app.service('myService', function($http, $q){
  var baseUrl = 'https://itunes.apple.com/search?term=';
  var _artist = '';
  var _finalUrl = '';

  var makeUrl = function(){
    _artist = _artist.split(' ').join('+');
    _finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
    return _finalUrl;
  }
});

Agora, vamos anexar todos os nossos métodos que estarão disponíveis no nosso controlador a 'isto'.

app.service('myService', function($http, $q){
  var baseUrl = 'https://itunes.apple.com/search?term=';
  var _artist = '';
  var _finalUrl = '';

  var makeUrl = function(){
    _artist = _artist.split(' ').join('+');
    _finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
    return _finalUrl;
  }

  this.setArtist = function(artist){
    _artist = artist;
  }

  this.getArtist = function(){
    return _artist;
  }

  this.callItunes = function(){
    makeUrl();
    var deferred = $q.defer();
    $http({
      method: 'JSONP',
      url: _finalUrl
    }).success(function(data){
      deferred.resolve(data);
    }).error(function(){
      deferred.reject('There was an error')
    })
    return deferred.promise;
  }

});

Assim como em nossa fábrica, setArtist, getArtist e callItunes estarão disponíveis em qualquer controlador em que passemos myService. Aqui está o controlador myService (que é quase exatamente o mesmo que nosso controlador de fábrica).

app.controller('myServiceCtrl', function($scope, myService){
  $scope.data = {};
  $scope.updateArtist = function(){
    myService.setArtist($scope.data.artist);
  };

  $scope.submitArtist = function(){
    myService.callItunes()
      .then(function(data){
        $scope.data.artistData = data;
      }, function(data){
        alert(data);
      })
  }
});

Como mencionei antes, uma vez que você realmente entende o que "novo" faz, os Serviços são quase idênticos às fábricas em AngularJS.

3) Fornecedor A coisa mais importante a lembrar sobre fornecedores é que eles são o único serviço que você pode passar para o aplicativo.parte de configuração da sua aplicação. Isto é de enorme importância se você está precisando alterar alguma parte do seu objeto de serviço antes que ele esteja disponível em todos os outros lugares em sua aplicação. Embora muito semelhante aos Serviços / fábricas, há algumas diferenças que vamos discutir. Primeiro montamos o nosso fornecedor num da mesma forma que fizemos com o nosso serviço e fábrica. As variáveis abaixo são a nossa função' privada ' e auxiliar.

app.provider('myProvider', function(){
   var baseUrl = 'https://itunes.apple.com/search?term=';
  var _artist = '';
  var _finalUrl = '';

  //Going to set this property on the config function below.
  this.thingFromConfig = ‘’;

  var makeUrl = function(){
    _artist = _artist.split(' ').join('+');
    _finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
    return _finalUrl;
  }
}

* novamente se qualquer parte do código acima é confuso, confira a seção da fábrica onde eu explico o que tudo isso faz maiores detalhes.

Você pode pensar em provedores como tendo três seções. A primeira secção é as variáveis/funções "privadas" que serão alteradas/ajustadas posteriormente (mostradas acima). A segunda seção é as variáveis / funções que serão disponível na sua aplicação.função de configuração e, portanto, estão disponíveis para alterar antes que eles estejam disponíveis em qualquer outro lugar (também mostrado acima). É importante notar que essas variáveis precisam ser anexadas à palavra-chave 'esta'. No nosso exemplo, só o' thingFromConfig ' estará disponível para alterar no aplicativo.configuracao. A terceira secção (mostrada abaixo) é todas as variáveis / funções que estarão disponíveis no seu controlador quando passar no serviço 'myProvider' para esse serviço específico controlador.

Ao criar um serviço com o fornecedor, As únicas propriedades/métodos que estarão disponíveis no seu controlador são as propriedades/métodos que são devolvidos da função $get (). O código abaixo coloca $get em ' this '(que sabemos que eventualmente será devolvido dessa função). Agora, essa função $ get retorna todos os métodos / propriedades que queremos estar disponíveis no controlador. Aqui está um exemplo de código.

this.$get = function($http, $q){
    return {
      callItunes: function(){
        makeUrl();
        var deferred = $q.defer();
        $http({
          method: 'JSONP',
          url: _finalUrl
        }).success(function(data){
          deferred.resolve(data);
        }).error(function(){
          deferred.reject('There was an error')
        })
        return deferred.promise;
      },
      setArtist: function(artist){
        _artist = artist;
      },
      getArtist: function(){
        return _artist;
      },
      thingOnConfig: this.thingFromConfig
    }
  }

Agora o código completo do Fornecedor parece este

app.provider('myProvider', function(){
  var baseUrl = 'https://itunes.apple.com/search?term=';
  var _artist = '';
  var _finalUrl = '';

  //Going to set this property on the config function below
  this.thingFromConfig = '';

  var makeUrl = function(){
    _artist = _artist.split(' ').join('+');
    _finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
    return _finalUrl;
  }

  this.$get = function($http, $q){
    return {
      callItunes: function(){
        makeUrl();
        var deferred = $q.defer();
        $http({
          method: 'JSONP',
          url: _finalUrl
        }).success(function(data){
          deferred.resolve(data);
        }).error(function(){
          deferred.reject('There was an error')
        })
        return deferred.promise;
      },
      setArtist: function(artist){
        _artist = artist;
      },
      getArtist: function(){
        return _artist;
      },
      thingOnConfig: this.thingFromConfig
    }
  }
});

Agora, como em nossa fábrica e serviço, setArtist, getArtist e callItunes estarão disponíveis em qualquer controlador para o qual passemos myProvider. Aqui está o controlador myProvider (que é quase exatamente o mesmo que nosso controlador de fábrica/serviço).

app.controller('myProviderCtrl', function($scope, myProvider){
  $scope.data = {};
  $scope.updateArtist = function(){
    myProvider.setArtist($scope.data.artist);
  };

  $scope.submitArtist = function(){
    myProvider.callItunes()
      .then(function(data){
        $scope.data.artistData = data;
      }, function(data){
        alert(data);
      })
  }

  $scope.data.thingFromConfig = myProvider.thingOnConfig;
});

Como mencionado anteriormente, o objectivo de criar um serviço com o fornecedor é ser capaz de alterar algumas variáveis através do aplicativo.função de configuração antes do objeto final ser passado para o resto do aplicacao. Vejamos um exemplo disso.

app.config(function(myProviderProvider){
  //Providers are the only service you can pass into app.config
  myProviderProvider.thingFromConfig = 'This sentence was set in app.config. Providers are the only service that can be passed into config. Check out the code to see how it works';
});

Agora você pode ver como 'thingFromConfig' é como uma corda vazia em nosso provedor, mas quando isso aparecer no DOM, será 'esta frase foi definida...'.

653

Author: Tyler McGinnis, 2017-01-05 15:23:07

Todos os Serviços são singletons; Eles são instanciados uma vez por aplicação. Eles podem ser de qualquer tipo, quer seja uma função primitiva, literal de objeto, ou mesmo uma instância de um tipo personalizado.

A value, factory, service, constant, e os métodos provider são todos fornecedores. Eles ensinam o injetor a instanciar os Serviços.

O mais verboso, mas também o mais abrangente é um provedor receita. Os quatro tipos restantes de receitas - Valor, Fábrica, Serviço e Constant - são apenas açúcar sintático em cima de uma receita do Fornecedor .

a receita do valor é o caso mais simples, onde você mesmo instancia o serviço e fornece o valor para o injector.
a receita da fábrica dá ao Injector uma função de fábrica que ele chama quando precisa de instanciar o serviço. Quando chamado, a função de fábrica cria e devolve a instância de serviço. As dependências do serviço são injetadas como argumentos das funções. Então, usando esta receita adiciona as seguintes habilidades:

capacidade de utilizar outros serviços (ter dependências)

inicialização do serviço

inicialização atrasada/preguiçosa
a receita de Serviço é quase a mesma que a receita de fábrica, mas aqui o Injector invoca um construtor com o novo operador em vez de uma fábrica funcao.
a receitado Fornecedor é normalmente exagero . Ele adiciona mais uma camada de indireção, permitindo que você configure a criação da fábrica.

Só deverá usar a receita do Fornecedor quando quiser expor uma API para a configuração em toda a aplicação que deve ser feita antes da a candidatura começa. Isto geralmente é interessante apenas para reutilizável serviços cujo comportamento poderá ter de variar ligeiramente entre aplicacao.
a receita constante é igual à receita do valor, excepto que lhe permite definir os serviços que estão disponíveis na fase de configuração. Mais cedo do que os Serviços criados usando a receita de valor. Ao contrário dos valores, eles não podem ser decorados usando decorator.

Ver A documentação do Fornecedor .

513

Author: flup, 2014-12-13 17:01:30

Compreender a fábrica, o serviço e o fornecedor de AngularJS

Todos estes são usados para partilhar objectos reutilizáveis de singleton. Ele ajuda a compartilhar código reutilizável através de seu app/vários componentes/módulos.

De Documentos Serviço / Fábrica:

preguiçosamente instantiated - Angular only instantiates a service / factory when a application component depends on it.

Singletons – Cada Um componente dependent on a service gets a reference to the single instance gerado pela fábrica de serviços.

Fábrica

Uma fábrica é uma função onde você pode manipular/adicionar lógica antes de criar um objeto, então o objeto recém-criado é devolvido.

app.factory('MyFactory', function() {
    var serviceObj = {};
    //creating an object with methods/functions or variables
    serviceObj.myFunction = function() {
        //TO DO:
    };
    //return that object
    return serviceObj;
});

Utilização

Pode ser apenas uma colecção de funções como uma classe. Assim, pode ser instanciado em diferentes controladores quando estiver a injectá-lo dentro do seu funções de controlador/fábrica / diretiva. É instantiated somente uma vez por app.

Serviço

Basta olhar para os Serviços pensar no protótipo do array. Um serviço é uma função que instancia um novo objeto usando a palavra-chave 'nova'. Você pode adicionar propriedades e funções a um objeto de serviço usando a palavra-chave this. Ao contrário de uma fábrica, não devolve nada (devolve um objecto que contém métodos / propriedades).

app.service('MyService', function() {
    //directly binding events to this context
    this.myServiceFunction = function() {
        //TO DO:
    };
});

Utilização

Utilize - o quando precisar de partilhar um único objecto ao longo da aplicação. Por exemplo, detalhes autenticados do Usuário, métodos/dados compartilhados, funções de utilidade, etc.

Fornecedor

Um fornecedor é usado para criar um objecto de serviço configurável. Você pode configurar a configuração do serviço a partir da função de configuração. Devolve um valor usando a função $get(). A função $get é executada na fase de execução em angular.

app.provider('configurableService', function() {
    var name = '';
    //this method can be be available at configuration time inside app.config.
    this.setName = function(newName) {
        name = newName;
    };
    this.$get = function() {
        var getName = function() {
             return name;
        };
        return {
            getName: getName //exposed object to where it gets injected.
        };
    };
});

Utilização

Quando você precisa fornecer configuração modular para o seu objeto de serviço antes de torná-lo disponível, por exemplo. suponha que você quer definir o seu URL de API com base no seu ambiente como dev, stage ou prod

NOTA

Só o fornecedor estará disponível na fase de configuração do angular, enquanto service & factory não são.

Espero que isto tenha esclarecido o seu entendimento sobre Fábrica, Serviço e ... Fornecedor

223

Author: Pankaj Parkar, 2020-06-20 09:12:55

Para mim, a revelação veio quando eu percebi que todas elas funcionam da mesma forma: ao executar algo depois, armazenando o valor que eles recebem, e, em seguida, tossir que mesmo valor armazenado quando referenciados através injeção de dependência.

Digamos que temos:

app.factory('a', fn);
app.service('b', fn);
app.provider('c', fn);

A diferença entre os três é que:

O valor armazenado do a vem da execução fn.
O valor armazenado de b vem de new ing fn.
O valor armazenado de c vem primeiro de obter uma instância por new ing fn, e depois executar um método $get da instância.

O que significa que há algo como um objecto de 'cache' dentro de AngularJS, cujo valor de cada injecção só é atribuído uma vez, quando foi injectado da primeira vez, e onde:

cache.a = fn()
cache.b = new fn()
cache.c = (new fn()).$get()

É por isso que usamos this em serviços, e definimos um this.$get em fornecedores.

190

Author: Lucia, 2014-12-13 18:14:28

Serviço vs fornecedor vs fábrica:

Estou a tentar manter as coisas simples. É tudo sobre conceito básico de JavaScript. Em primeiro lugar, falemos dos serviços em AngularJS!

O Que é o serviço: In AngularJS, Service is nothing but a singleton JavaScript object which can store some useful methods or properties. Este objecto singleton é criado por ngApp (aplicação Angular) e é partilhado entre todos os controladores dentro da aplicação actual. Quando Angularjs instantiar um objeto de serviço, ele registra este objeto de serviço com um nome de serviço único. Então cada vez que precisamos de instância de serviço, Angular procurar o registro para este nome de serviço, e ele retorna a referência ao objeto de serviço. De tal forma que podemos invocar o método, propriedades de acesso etc no objeto de serviço. Você pode ter dúvidas se você também pode colocar propriedades, métodos no objeto escopo dos controladores! Então porque precisas de um objecto de serviço? As respostas são: serviços são compartilhados entre vários escopo do controlador. Se você colocar algumas propriedades / métodos no objeto de escopo de um controlador, ele estará disponível apenas para escopo atual. Mas quando você define métodos, Propriedades no objeto de serviço, ele estará disponível globalmente e pode ser acessado no escopo de qualquer controlador, injetando esse serviço.

Então se houver três escopo de controle, que seja controllerA, controllerB e controllerC, todos compartilharão a mesma instância de serviço.

<div ng-controller='controllerA'>
    <!-- controllerA scope -->
</div>
<div ng-controller='controllerB'>
    <!-- controllerB scope -->
</div>
<div ng-controller='controllerC'>
    <!-- controllerC scope -->
</div>

Como criar um serviço?

Os AngularJS fornecem métodos diferentes para registar um serviço. Aqui vamos concentrar-nos em três fábricas de métodos(..),servico(..),fornecedor(..);

Utilizar esta ligação para referência de código

Função de fábrica:

Podemos definir uma função de fábrica como abaixo.

factory('serviceName',function fnFactory(){ return serviceInstance;})

AngularJS provides ' factory ('serviceName', fnFactory) ' method which takes two parameter, serviceName and a JavaScript function. Angular cria instância de serviço invocando a função fnFactory () tal como abaixo.

var serviceInstace = fnFactory();

A função passada pode definir um objecto e devolver esse objecto. AngularJS simplesmente armazena este objeto de referência a uma variável que é passada como primeiro argumento. Qualquer coisa que seja devolvida de fnFactory será vinculada ao serviço deprimeirainstância . Em vez de Retornar Objeto, nós também podemos retornar função, valores etc, o que quer que retornemos, estará disponível para o serviço instancia.

Exemplo:

var app= angular.module('myApp', []);
//creating service using factory method
app.factory('factoryPattern',function(){
  var data={
    'firstName':'Tom',
    'lastName':' Cruise',
    greet: function(){
      console.log('hello!' + this.firstName + this.lastName);
    }
  };

  //Now all the properties and methods of data object will be available in our service object
  return data;
});

Função De Serviço:

service('serviceName',function fnServiceConstructor(){})

É a outra maneira, podemos registar um serviço. A única diferença é a maneira como AngularJS tenta instanciar o objeto de serviço. Desta vez angular usa a palavra-chave 'nova' e chama a função construtor algo como abaixo.

var serviceInstance = new fnServiceConstructor();

Na função do Construtor podemos usar esta palavra-chave para adicionar propriedades / métodos ao objecto de serviço. exemplo:

//Creating a service using the service method
var app= angular.module('myApp', []);
app.service('servicePattern',function(){
  this.firstName ='James';
  this.lastName =' Bond';
  this.greet = function(){
    console.log('My Name is '+ this.firstName + this.lastName);
  };
});

Fornecedor função:

A função Provedor() é a outra forma de criar serviços. Que estejamos interessados em criar um serviço que apenas exiba alguma mensagem de saudação para o usuário. Mas também queremos fornecer uma funcionalidade para que o usuário possa definir sua própria mensagem de saudação. Em termos técnicos, queremos criar serviços configuráveis. Como podemos fazer isto ? Deve haver uma maneira, de modo que app poderia passar suas mensagens personalizadas de saudação e Angularjs torná-lo disponível para fábrica/construtor função que cria a nossa instância de serviços. Nesse caso, a função de Provedor() faz o trabalho. usando a função provedor() podemos criar serviços configuráveis.

Podemos criar serviços configuráveis usando a sintaxe do provedor como indicado abaixo.

/*step1:define a service */
app.provider('service',function serviceProviderConstructor(){});

/*step2:configure the service */
app.config(function configureService(serviceProvider){});

Como funciona internamente a sintaxe do provedor?

1.O objeto provedor é criado usando a função de construtor que definimos em nossa função de provedor.

var serviceProvider = new serviceProviderConstructor();

2.A função que passamos na app.config (), get executed. Isto é chamado de fase de configuração, e aqui temos a chance de personalizar o nosso serviço.

configureService(serviceProvider);

3.Finalmente a instância de serviço é criada chamando o método $get de serviceProvider.

serviceInstance = serviceProvider.$get()

O código de exemplo para criar um serviço, usando a sintaxe:

var app= angular.module('myApp', []);
app.provider('providerPattern',function providerConstructor(){
  //this function works as constructor function for provider
  this.firstName = 'Arnold ';
  this.lastName = ' Schwarzenegger' ;
  this.greetMessage = ' Welcome, This is default Greeting Message' ;
  //adding some method which we can call in app.config() function
  this.setGreetMsg = function(msg){
    if(msg){
      this.greetMessage =  msg ;
    }
  };

  //We can also add a method which can change firstName and lastName
  this.$get = function(){
    var firstName = this.firstName;
    var lastName = this.lastName ;
    var greetMessage = this.greetMessage;
    var data={
       greet: function(){
         console.log('hello, ' + firstName + lastName+'! '+ greetMessage);
       }
    };
    return data ;
  };
});

app.config(
  function(providerPatternProvider){
    providerPatternProvider.setGreetMsg(' How do you do ?');
  }
);

Demonstração De Trabalho

Resumo:

Factory usa uma função de fábrica que devolve uma instância de serviço. serviceInstance = fnFactory();

Service use uma função de construtor e invoque Angular esta função de construtor usando a palavra-chave 'nova' para criar a instância de serviço. serviceInstance = new fnserviceconstrutor();

O Provider define uma função providerconstrutor, esta função providerconstrutor define uma função de fábrica $get . Chamadas angulares $get () para criar o objeto de serviço. A sintaxe do provedor tem uma vantagem adicional de configurar o objeto de serviço antes de ser instanciado. Serviço deprimeirainstância = $ get();

137

Author: Anant, 2016-04-08 14:06:00

[[[2]] Como apontado por várias pessoas aqui corretamente uma fábrica, provedor, Serviço, e até mesmo valor e constante são versões da mesma coisa. Podes dissecar o mais geral em todos eles. Assim:

Aqui está o artigo que esta imagem vem de:

Http://www.simplygoodcode.com/2015/11/the-difference-between-service-provider-and-factory-in-angularjs/

88

Author: Luis Perez, 2017-04-19 13:38:06

Fábrica

Você dá ao AngularJS uma função, O AngularJS cache e injecta o valor de retorno quando a fábrica for pedida.

Exemplo:

app.factory('factory', function() {
    var name = '';
    // Return value **is** the object that will be injected
    return {
        name: name;
    }
})

Utilização:

app.controller('ctrl', function($scope, factory) {
     $scope.name = factory.name;
});

Serviço

Se deres uma função ao AngularJS, o AngularJS chamará novo para instanciá-lo. É a instância que AngularJS cria que será cache e injetado quando o serviço é solicitado. Desde novo foi utilizado para instanciar o serviço, a palavra-chave isto é válido e refere-se à instância.

Exemplo:

app.service('service', function() {
     var name = '';
     this.setName = function(newName) {
         name = newName;
     }
     this.getName = function() {
         return name;
     }
});

Utilização:

app.controller('ctrl', function($scope, service) {
   $scope.name = service.getName();
});

Fornecedor

Você dá uma função ao AngularJS,e o AngularJS chamará a sua função $get. É o valor de retorno da função $get que será armazenado e injectado quando o serviço for solicitado.

Os fornecedores permitem-lhe configurar o fornecedor antes AngularJS chama o método $get para obter a injetável.

Exemplo:

app.provider('provider', function() {
     var name = '';
     this.setName = function(newName) {
          name = newName;
     }
     this.$get = function() {
         return {
            name: name
         }
     }
})

Utilização (como um injectável num controlador)

app.controller('ctrl', function($scope, provider) {
    $scope.name = provider.name;
});

Utilização (configurar o fornecedor antes de $get ser chamado para criar o injector)

app.config(function(providerProvider) {
    providerProvider.setName('John');
});

64

Author: pixelbits, 2014-12-13 17:19:28

Notei algo interessante quando brincava com fornecedores.

A visibilidade dos injectáveis é diferente para os fornecedores do que para os serviços e fábricas. Se você declarar uma AngularJS "constante" (por exemplo, myApp.constant('a', 'Robert');), você pode injetá-la em serviços, fábricas e provedores.

Mas se você declarar um "valor" AngularJS (por exemplo., myApp.value('b', {name: 'Jones'});, você pode injetá-lo em serviços e fábricas, mas não na função de criação de provedor. Pode, no entanto, injectá-lo na função $get que define para o seu fornecedor. Isto é mencionado na documentação AngularJS, mas é fácil de perder. Você pode encontrá-lo na página %fornecer nas seções sobre o valor e métodos constantes.

Http://jsfiddle.net/R2Frv/1/

<div ng-app="MyAppName">
    <div ng-controller="MyCtrl">
        <p>from Service: {{servGreet}}</p>
        <p>from Provider: {{provGreet}}</p>
    </div>
</div>
<script>
    var myApp = angular.module('MyAppName', []);

    myApp.constant('a', 'Robert');
    myApp.value('b', {name: 'Jones'});

    myApp.service('greetService', function(a,b) {
        this.greeter = 'Hi there, ' + a + ' ' + b.name;
    });

    myApp.provider('greetProvider', function(a) {
        this.firstName = a;
        this.$get = function(b) {
            this.lastName = b.name;
            this.fullName = this.firstName + ' ' + this.lastName;
            return this;
        };
    });

    function MyCtrl($scope, greetService, greetProvider) {
        $scope.servGreet = greetService.greeter;
        $scope.provGreet = greetProvider.fullName;
    }
</script>

57

Author: justlooking, 2015-04-21 18:55:29

Esta é uma parte muito confusa para o novato e eu tentei esclarecê-la em palavras fáceis

O serviço AngularJS: é usado para partilhar funções de utilidade com a referência do serviço no controlador. O serviço é singleton na natureza assim para um serviço somente uma instância é criada no navegador e a mesma referência é usada em toda a página.

No serviço, criamos nomes de funções como propriedade com este objecto.

Fábrica AngularJS: o propósito da Factory também é o mesmo que o serviço no entanto, neste caso, criamos um novo objeto e adicionamos funções como propriedades deste objeto e, no final, devolvemos este objeto.

AngularJS Provider: o propósito disto é novamente o mesmo no entanto provedor dá a saída da sua função $ get.

A definição e utilização do Serviço, da fábrica e do Fornecedor são explicadas em http://www.dotnetfunda.com/articles/show/3156/difference-between-angularjs-service-factory-and-provider

46

Author: Sheo Narayan, 2016-05-23 01:44:43

Para mim, a melhor e mais simples maneira de entender a diferença é:

var service, factory;
service = factory = function(injection) {}

Como a AngularJS instancia componentes particulares (simplificados):

// service
var angularService = new service(injection);

// factory
var angularFactory = factory(injection);

Assim, para o serviço, o que se torna o componente AngularJS é a instância objeto da classe que é representada pela função de declaração de serviço. Para a fábrica, é o resultado retornado da função de declaração da fábrica. A fábrica pode comportar-se da mesma forma que o serviço:

var factoryAsService = function(injection) {
  return new function(injection) {
    // Service content
  }
}

A maneira mais simples o pensamento é o seguinte:

O serviço é uma instância de objecto singleton. Use os serviços Se você quiser fornecer um objeto singleton para o seu código. A fábrica é uma classe. Use fábricas se você quiser fornecer classes personalizadas para o seu código (não pode ser feito com serviços, porque eles já estão instanciados).

O exemplo de 'classe' da fábrica é fornecido nos comentários em redor, bem como a diferença de Fornecedor.

35

Author: Lukasz Frankowski, 2014-12-13 17:03:44

O meu esclarecimento sobre este assunto:

Basicamente todos os tipos mencionados (Serviço, fábrica, fornecedor, etc.) estão apenas criando e configurando variáveis globais (que são, naturalmente, globais para toda a aplicação), assim como as variáveis globais antiquadas eram.

Embora as variáveis globais não sejam recomendadas, a utilização real destas variáveis globais é fornecer injeção de dependência, passando a variável para o controlador relevante.

Há muitos níveis de complicações na criação dos valores para as "variáveis globais":

constante
Isto define uma constante real que não deve ser modificada durante toda a aplicação, assim como constantes em outras linguagens são (algo que JavaScript não tem).
valor
Este é um valor modificável ou objeto, e serve como alguma variável global, que pode até ser injetado ao criar outros serviços ou fábricas (veja mais adiante em as). No entanto, ele deve ser um "valor literal", o que significa que um tem para escrever o valor real, e não pode usar qualquer cálculo ou lógica de programação (em outras palavras 39 ou meu ou {prop: "valor"} são OK, mas 2 +2 é não).
Fábrica
Um valor mais geral, que é possível ser calculado imediatamente. Ele funciona passando uma função para AngularJS com a lógica necessária para computar o valor e AngularJS executa-o, e guarda o valor de retorno na variável indicada.
Note que é possível retornar um objeto (nesse caso ele funcionará similar a um serviço) ou uma função (que será salva na variável como uma função de callback).
Serviço
Um serviço é uma versão mais despojada de factory que é válida apenas quando o valor é um objecto, e permite escrever qualquer lógica directamente na função (como se fosse um constructor), bem como declarar e acessar as propriedades do objeto usando a esta palavra-chave.
fornecedor
Ao contrário de um serviço que é uma versão simplificada de factory , um Provedor é uma forma mais complexa, mas mais flexível de inicializar as variáveis "globais", com a maior flexibilidade sendo a opção de definir valores a partir do aplicativo.configuracao.
Funciona como usar uma combinação de serviço e fornecedor , passando para fornecedor uma função que tem propriedades declaradas usando aesta palavra-chave , que pode ser usada a partir da app.config. Então tem de ter um separado.get função que é executada pelo AngularJS depois de definir as propriedades acima através do ficheiro app.config, e isto $.a função get comporta-se tal como a factory acima, na medida em que o seu valor de retorno é usado para inicializar as variáveis "globais".

34

Author: yoel halb, 2014-12-13 18:25:30

O meu entendimento é muito simples.

Fábrica: Você simplesmente cria um objeto dentro da fábrica e o devolve.

Serviço:

Você só tem uma função padrão que usa esta palavra-chave para definir uma função.

Fornecedor:

Existe um objecto $get que define e que pode ser usado para obter o objecto que devolve os dados.

27

Author: sajan, 2014-12-13 17:11:52

Resumo de documentos angulares:

Existem cinco tipos de receitas que definem como criar objectos: valor, Fábrica, Serviço, Fornecedor e Constante.
Factory eService são as receitas mais usadas. A única diferença entre eles é que a receita funciona melhor para objectos de um tipo personalizado, enquanto que a fábrica pode produzir primitivas e funções JavaScript.
a receita do Fornecedor é o tipo de receita principal e todos os outros são apenas açúcar sintático nele.
o fornecedor é o tipo de receita mais complexo. Você não precisa dele a menos que você esteja construindo um pedaço reutilizável de código que precisa de configuração global.

Melhores respostas de Então ... :

Https://stackoverflow.com/a/26924234/165673 (https://stackoverflow.com/a/27263882/165673
https://stackoverflow.com/a/16566144/165673

26

Author: Yarin, 2017-05-23 12:34:54

Já todas as boas respostas. Gostaria de acrescentar mais alguns pontos sobre os Serviços e Fábrica . Juntamente com a diferença entre Serviço/fábrica. E também se pode ter perguntas como:

devo usar o serviço ou a fábrica? Qual é a diferença?

fazem o mesmo ou têm o mesmo comportamento?

Vamos começar com a diferença entre Serviço e fábrica:

Ambos são Singletons : sempre que o Angular os encontra como dependência pela primeira vez, cria uma única instância de Serviço/fábrica. Uma vez que a instância é criada, a mesma instância é usada para sempre.

Pode ser usado para modelar um objeto com comportamento: ambos podem ter métodos, variáveis de estado interno, e assim por diante. Embora a forma como escreves esse código seja diferente.

Serviços:

Um serviço é uma função construtora, e Angular irá instanciá-la chamando de Nova yourServiceName(). Isto significa algumas coisas.

as funções e variáveis de instância serão propriedades de this.
Não precisas de devolver um valor. Quando chamadas angulares ([6]}), ele receberá o objeto this Com todas as propriedades que você coloca nele.

Exemplo De Amostra:

angular.service('MyService', function() { this.aServiceVariable = "Ved Prakash" this.aServiceMethod = function() { return //code }; });

Quando o Angular injecta este serviço MyService num controlador que depende disso, esse controlador vai ter um MyService que pode chamar funções ligadas, por exemplo, MyService.aServiceMethod ().

Tenha cuidado com this:
Uma vez que o serviço construído é um objeto, os métodos dentro dele podem se referir a isso quando eles são chamados:
angular.service('ScoreKeeper', function($http) { this.score = 0; this.getScore = function() { return this.score; }; this.setScore = function(newScore) { this.score = newScore; }; this.addOne = function() { this.score++; }; });

Você pode ser tentado a chamar ScoreKeeper.setScore em uma promessa de cadeia, por exemplo, se você inicializar a pontuação, agarrando-o servidor: $http.get('/score').then(ScoreKeeper.setScore). O problema com isto é que ScoreKeeper.setScore será chamado com this vinculado ao null e vais ter erros. A melhor maneira seria ... Se você optar por usar isso em seus métodos de serviço ou não, tenha cuidado como você chamá-los.

Devolver um valor de Service:

Devido à forma como os construtores JavaScript funcionam, se você devolver um valor complexo (i.e., an Object) a partir de uma função constructor, o chamador irá obter esse objeto em vez desta instância.

Isto significa que você pode basicamente copiar-colar o exemplo de fábrica a partir de baixo, Substituir factory por service, e vai funcionar.

angular.service('MyService', function($http) { var api = {}; api.aServiceMethod= function() { return $http.get('/users'); }; return api; });
Então, quando Angular constrói seu serviço com o novo MyService(), ele vai obter esse objeto api em vez da instância MyService.
Este é o comportamento para quaisquer valores complexos (objetos, funções), mas não para tipos primitivos.

Fábricas:

Uma fábrica é uma função antiga que devolve um valor. O valor de retorno é o que é injetado em coisas que dependem da fábrica. Um padrão de fábrica típico em Angular é a devolve um objecto com funções como propriedades, como esta:

angular.factory('MyFactory', function($http) { var api = {}; api.aFactoryMethod= function() { return $http.get('/users'); }; return api; });

O valor injectado para uma dependência da fábrica é o retorno da fábrica. valor, e não tem de ser um objecto. Pode ser uma função.

Respostas para as perguntas acima de 1 e 2:

Na maioria das vezes, basta usar fábricas para tudo. O comportamento deles é mais fácil de entender. Não há escolha a fazer. sobre se devolver um valor ou não, e além disso, Sem bugs a ser apresentado se fizeres a coisa errada. Ainda me refiro a eles como "serviços" quando falo em injectar mas são dependências. O comportamento de Serviço / fábrica é muito semelhante, e algumas pessoas dirão: qualquer um deles está bem. Isso é um pouco verdade, mas acho mais fácil siga o conselho do Guia de estilo de John Papa e fique com fabrica.**

23

Author: Ved, 2017-10-10 07:34:44

Uma clarificação adicional é que as fábricas podem criar funções/primitivas, enquanto os serviços não podem. Olha para isto jsFiddle baseado em Epokk's: http://jsfiddle.net/skeller88/PxdSP/1351/.

A fábrica devolve uma função que pode ser invocada:

myApp.factory('helloWorldFromFactory', function() {
  return function() {
    return "Hello, World!";
  };
});

A fábrica também pode devolver um objecto com um método que pode ser invocado:

myApp.factory('helloWorldFromFactory', function() {
  return {
    sayHello: function() {
      return "Hello, World!";
    }
  };
});

O serviço devolve um objecto com um método que pode ser invocado:

myApp.service('helloWorldFromService', function() {
  this.sayHello = function() {
     return "Hello, World!";
  };
});

Para mais detalhes, consulte um post I wrote on the difference: http://www.shanemkeller.com/tldr-services-vs-factories-in-angular/

17

Author: skeller88, 2015-01-31 10:22:22

Já há boas respostas, mas só quero partilhar esta.

Em primeiro lugar: O fornecedor é a forma/receita de criar um {[[0]} (objecto singleton) que suponha ser injectado por $injector (como AngulaJS vai sobre o padrão de Coi).

And Value, Factory, Service and Constant (4 ways) - the syntactic sugar over Provider way/recepie.

Há Service vs Factory uma parte foi coberto: https://www.youtube.com/watch?v=BLzNCkPn3ao

Service é tudo sobre new palavra-chave que, como sabemos, faz 4 coisas:

cria um objecto novinho em folha
liga-o ao seu objectoprototype
liga context a this
e devolve this

E fábrica é tudo sobre Padrão de fábrica - contém funções que devolvem objectos como esse serviço.

capacidade de utilizar outros serviços (ter dependências)
inicialização do Serviço
inicialização atrasada/preguiçosa

E este vídeo simples: cobre também O fornecedor: https://www.youtube.com/watch?v=HvTZbQ_hUZY (aqui você pode ver como eles vão de fábrica para provedor) {[[9]}

A receita do Fornecedor é usada principalmente na configuração da aplicação, antes da aplicação ter sido iniciada/inicializada por completo.

17

Author: ses, 2015-06-23 14:04:46

Depois de ler todos estes posts, criou mais confusão para mim.. Mas ainda assim tudo vale a pena ser informado.. finalmente, encontrei a tabela seguinte que dará informações com simples comparação

o injector usa receitas para criar dois tipos de objectos: serviços e objectos para fins especiais
Existem cinco tipos de receitas que definem como criar objectos: valor, Fábrica, Serviço, fornecedor e constante.
fábrica e serviço são os mais usados receita. A única diferença entre eles é que a receita de serviço funciona melhor para objetos de um tipo personalizado, enquanto a fábrica pode produzir primitivas JavaScript e funções.
a receita do Fornecedor é o tipo de receita principal e todos os outros são apenas açúcar sintático nele.
o fornecedor é o tipo de receita mais complexo. Você não precisa dele a menos que você esteja construindo um pedaço reutilizável de código que precisa de configuração global.
todos os objectos para fins especiais, excepto o O controlador é definido através de receitas de fábrica.

E para o principiante entender: - isto pode não corrigir o caso de uso, mas em alto nível este é o que usa para estes três.

Se quiser usar na função de configuração do módulo angular deve ser criada como fornecedor

angular.module('myApp').config(function($testProvider){
$testProvider.someFunction();
})

a chamada Ajax ou a integração de terceiros tem de serserviço .
Para Dados manipulações criam-no como fábrica.

Para a fábrica de cenários básicos e o serviço comporta-se da mesma forma.

14

Author: BEJGAM SHIVA PRASAD, 2017-07-27 06:48:50

Aqui está um código de broilerplate que eu criei como um modelo de código para a fábrica de objetos em AngularjS. Eu usei um carro / CarFactory como um exemplo para ilustrar. Torna o código de implementação simples no controlador.

     <script>
        angular.module('app', [])
            .factory('CarFactory', function() {

                /**
                 * BroilerPlate Object Instance Factory Definition / Example
                 */
                this.Car = function() {

                    // initialize instance properties
                    angular.extend(this, {
                        color           : null,
                        numberOfDoors   : null,
                        hasFancyRadio   : null,
                        hasLeatherSeats : null
                    });

                    // generic setter (with optional default value)
                    this.set = function(key, value, defaultValue, allowUndefined) {

                        // by default,
                        if (typeof allowUndefined === 'undefined') {
                            // we don't allow setter to accept "undefined" as a value
                            allowUndefined = false;
                        }
                        // if we do not allow undefined values, and..
                        if (!allowUndefined) {
                            // if an undefined value was passed in
                            if (value === undefined) {
                                // and a default value was specified
                                if (defaultValue !== undefined) {
                                    // use the specified default value
                                    value = defaultValue;
                                } else {
                                    // otherwise use the class.prototype.defaults value
                                    value = this.defaults[key];
                                } // end if/else
                            } // end if
                        } // end if

                        // update 
                        this[key] = value;

                        // return reference to this object (fluent)
                        return this;

                    }; // end this.set()

                }; // end this.Car class definition

                // instance properties default values
                this.Car.prototype.defaults = {
                    color: 'yellow',
                    numberOfDoors: 2,
                    hasLeatherSeats: null,
                    hasFancyRadio: false
                };

                // instance factory method / constructor
                this.Car.prototype.instance = function(params) {
                    return new 
                        this.constructor()
                                .set('color',           params.color)
                                .set('numberOfDoors',   params.numberOfDoors)
                                .set('hasFancyRadio',   params.hasFancyRadio)
                                .set('hasLeatherSeats', params.hasLeatherSeats)
                    ;
                };

                return new this.Car();

            }) // end Factory Definition
            .controller('testCtrl', function($scope, CarFactory) {

                window.testCtrl = $scope;

                // first car, is red, uses class default for:
                // numberOfDoors, and hasLeatherSeats
                $scope.car1     = CarFactory
                                    .instance({
                                        color: 'red'
                                    })
                                ;

                // second car, is blue, has 3 doors, 
                // uses class default for hasLeatherSeats
                $scope.car2     = CarFactory
                                    .instance({
                                        color: 'blue',
                                        numberOfDoors: 3
                                    })
                                ;
                // third car, has 4 doors, uses class default for 
                // color and hasLeatherSeats
                $scope.car3     = CarFactory
                                    .instance({
                                        numberOfDoors: 4
                                    })
                                ;
                // sets an undefined variable for 'hasFancyRadio',
                // explicitly defines "true" as default when value is undefined
                $scope.hasFancyRadio = undefined;
                $scope.car3.set('hasFancyRadio', $scope.hasFancyRadio, true);

                // fourth car, purple, 4 doors,
                // uses class default for hasLeatherSeats
                $scope.car4     = CarFactory
                                    .instance({
                                        color: 'purple',
                                        numberOfDoors: 4
                                    });
                // and then explicitly sets hasLeatherSeats to undefined
                $scope.hasLeatherSeats = undefined;
                $scope.car4.set('hasLeatherSeats', $scope.hasLeatherSeats, undefined, true);

                // in console, type window.testCtrl to see the resulting objects

            });
    </script>

Aqui está um exemplo mais simples. Estou usando algumas bibliotecas de terceiros que esperam um objeto de "posição" expondo latitude e longitude, mas através de propriedades de objetos diferentes. Não queria hackear o código do vendedor, por isso ajustei os objectos de" posição " que eu era. a passar.

    angular.module('app')
.factory('PositionFactory', function() {

    /**
     * BroilerPlate Object Instance Factory Definition / Example
     */
    this.Position = function() {

        // initialize instance properties 
        // (multiple properties to satisfy multiple external interface contracts)
        angular.extend(this, {
            lat         : null,
            lon         : null,
            latitude    : null,
            longitude   : null,
            coords: {
                latitude: null,
                longitude: null
            }
        });

        this.setLatitude = function(latitude) {
            this.latitude           = latitude;
            this.lat                = latitude;
            this.coords.latitude    = latitude;
            return this;
        };
        this.setLongitude = function(longitude) {
            this.longitude          = longitude;
            this.lon                = longitude;
            this.coords.longitude   = longitude;
            return this;
        };

    }; // end class definition

    // instance factory method / constructor
    this.Position.prototype.instance = function(params) {
        return new 
            this.constructor()
                    .setLatitude(params.latitude)
                    .setLongitude(params.longitude)
        ;
    };

    return new this.Position();

}) // end Factory Definition

.controller('testCtrl', function($scope, PositionFactory) {
    $scope.position1 = PositionFactory.instance({latitude: 39, longitude: 42.3123});
    $scope.position2 = PositionFactory.instance({latitude: 39, longitude: 42.3333});
}) // end controller

;

13

Author: James Earlywine, 2015-03-30 15:57:37

Usando como referência esta página e a documentação (que parece ter melhorado muito desde a última vez que olhei), juntei a seguinte demonstração real(-ish) mundial que usa 4 dos 5 sabores do Fornecedor; valor, constante, fábrica e fornecedor completo.

HTML:

<div ng-controller="mainCtrl as main">
    <h1>{{main.title}}*</h1>
    <h2>{{main.strapline}}</h2>
    <p>Earn {{main.earn}} per click</p>
    <p>You've earned {{main.earned}} by clicking!</p>
    <button ng-click="main.handleClick()">Click me to earn</button>
    <small>* Not actual money</small>
</div>

Aplicação

var app = angular.module('angularProviders', []);

// A CONSTANT is not going to change
app.constant('range', 100);

// A VALUE could change, but probably / typically doesn't
app.value('title', 'Earn money by clicking');
app.value('strapline', 'Adventures in ng Providers');

// A simple FACTORY allows us to compute a value @ runtime.
// Furthermore, it can have other dependencies injected into it such
// as our range constant.
app.factory('random', function randomFactory(range) {
    // Get a random number within the range defined in our CONSTANT
    return Math.random() * range;
});

// A PROVIDER, must return a custom type which implements the functionality 
// provided by our service (see what I did there?).
// Here we define the constructor for the custom type the PROVIDER below will 
// instantiate and return.
var Money = function(locale) {

    // Depending on locale string set during config phase, we'll
    // use different symbols and positioning for any values we 
    // need to display as currency
    this.settings = {
        uk: {
            front: true,
            currency: '£',
            thousand: ',',
            decimal: '.'
        },
        eu: {
            front: false,
            currency: '€',
            thousand: '.',
            decimal: ','
        }
    };

    this.locale = locale;
};

// Return a monetary value with currency symbol and placement, and decimal 
// and thousand delimiters according to the locale set in the config phase.
Money.prototype.convertValue = function(value) {

    var settings = this.settings[this.locale],
        decimalIndex, converted;

    converted = this.addThousandSeparator(value.toFixed(2), settings.thousand);

    decimalIndex = converted.length - 3;

    converted = converted.substr(0, decimalIndex) +
        settings.decimal +
        converted.substr(decimalIndex + 1);    

    converted = settings.front ?
            settings.currency + converted : 
            converted + settings.currency; 

    return converted;   
};

// Add supplied thousand separator to supplied value
Money.prototype.addThousandSeparator = function(value, symbol) {
   return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, symbol);
};

// PROVIDER is the core recipe type - VALUE, CONSTANT, SERVICE & FACTORY
// are all effectively syntactic sugar built on top of the PROVIDER construct
// One of the advantages of the PROVIDER is that we can configure it before the
// application starts (see config below).
app.provider('money', function MoneyProvider() {

    var locale;

    // Function called by the config to set up the provider
    this.setLocale = function(value) {
        locale = value;   
    };

    // All providers need to implement a $get method which returns
    // an instance of the custom class which constitutes the service
    this.$get = function moneyFactory() {
        return new Money(locale);
    };
});

// We can configure a PROVIDER on application initialisation.
app.config(['moneyProvider', function(moneyProvider) {
    moneyProvider.setLocale('uk');
    //moneyProvider.setLocale('eu'); 
}]);

// The ubiquitous controller
app.controller('mainCtrl', function($scope, title, strapline, random, money) {

    // Plain old VALUE(s)
    this.title = title;
    this.strapline = strapline;

    this.count = 0;

    // Compute values using our money provider    
    this.earn = money.convertValue(random); // random is computed @ runtime
    this.earned = money.convertValue(0);

    this.handleClick = function() { 
        this.count ++;
        this.earned = money.convertValue(random * this.count);
    };
});

A funcionardemo .

12

Author: net.uk.sweet, 2015-01-30 20:04:12

Esta resposta aborda o tópico / pergunta

Como fábrica, Serviço e constante-são apenas açúcar sintático em cima de uma receita de provedor?

OU

Como as fábricas, os servic e os fornecedores são simailar internamente

Basicamente, o que acontece é ...

Quando você faz um factory() ele define você function fornecido em segundo argumento para o provedor $get e devolvê-lo(provider(name, {$get:factoryFn })), Tudo o que você recebe é provider mas não há nenhuma propriedade / método que não seja $get desse provider (significa que não pode configurar isto)

Código-fonte da fábrica

function factory(name, factoryFn, enforce) {
    return provider(name, {
      $get: enforce !== false ? enforceReturnValue(name, factoryFn) : factoryFn
    });
};

Ao fazer um service() ele devolve-te a fornecer uma fábrica() com um function que injecta o constructor (devolve a instância do construtor que prestaste no teu serviço) e devolve-a

Código-fonte do serviço

function service(name, constructor) {
    return factory(name, ['$injector', function($injector) {
      return $injector.instantiate(constructor);
    }]);
};

Então, basicamente, em ambos os casos, você eventualmente recebe um provedor $definir a sua função que você forneceu, mas você pode dar qualquer coisa extra do que $get as you can originally provide in provider() for config block

12

Author: A.B, 2015-11-06 02:07:53

Sei muita resposta excelente, mas tenho de partilhar a minha experiência de usar
1. service para a maioria dos casos de incumprimento
2. factory Usado para criar o serviço que instância específica

// factory.js ////////////////////////////
(function() {
'use strict';
angular
    .module('myApp.services')
    .factory('xFactory', xFactoryImp);
xFactoryImp.$inject = ['$http'];

function xFactoryImp($http) {
    var fac = function (params) {
        this._params = params; // used for query params
    };

    fac.prototype.nextPage = function () {
        var url = "/_prc";

        $http.get(url, {params: this._params}).success(function(data){ ...
    }
    return fac;
}
})();

// service.js //////////////////////////
(function() {
'use strict';
angular
    .module('myApp.services')
    .service('xService', xServiceImp);
xServiceImp.$inject = ['$http'];

function xServiceImp($http) {  
    this._params = {'model': 'account','mode': 'list'};

    this.nextPage = function () {
        var url = "/_prc";

        $http.get(url, {params: this._params}).success(function(data){ ...
    }       
}
})();

E utilizar:

controller: ['xFactory', 'xService', function(xFactory, xService){

        // books = new instance of xFactory for query 'book' model
        var books = new xFactory({'model': 'book', 'mode': 'list'});

        // accounts = new instance of xFactory for query 'accounts' model
        var accounts = new xFactory({'model': 'account', 'mode': 'list'});

        // accounts2 = accounts variable
        var accounts2 = xService;
...

11

Author: nguyên, 2015-04-07 01:25:52

Um pouco tarde para a festa. Mas eu pensei que isso é mais útil para quem gostaria de aprender (ou ter clareza) sobre o desenvolvimento Angular Js serviços personalizados usando metodologias de fábrica, serviço e provedor. Deparei-me com este vídeo que explica claramente as metodologias de fábrica, de serviços e de fornecedores para o desenvolvimento dos Serviços Aduaneiros da AngularJS:

Https://www.youtube.com/watch?v=oUXku28ex-M

Código-Fonte: http://www.techcbt.com/Post/353/Angular-JS-basics/how-to-develop-angularjs-custom-service

O código publicado aqui é copiado diretamente da fonte acima, para beneficiar os leitores.

O código para o serviço personalizado baseado em" factory " é o seguinte (que vai com as versões sincronizadas e async, juntamente com chamar o serviço http):

var app = angular.module("app", []);
app.controller('emp', ['$scope', 'calcFactory',
  function($scope, calcFactory) {
    $scope.a = 10;
    $scope.b = 20;

    $scope.doSum = function() {
      //$scope.sum = calcFactory.getSum($scope.a, $scope.b); //synchronous
      calcFactory.getSum($scope.a, $scope.b, function(r) { //aynchronous
        $scope.sum = r;
      });
    };

  }
]);

app.factory('calcFactory', ['$http', '$log',
  function($http, $log) {
    $log.log("instantiating calcFactory..");
    var oCalcService = {};

    //oCalcService.getSum = function(a,b){
    //	return parseInt(a) + parseInt(b);
    //};

    //oCalcService.getSum = function(a, b, cb){
    //	var s = parseInt(a) + parseInt(b);
    //	cb(s);
    //};

    oCalcService.getSum = function(a, b, cb) { //using http service

      $http({
        url: 'http://localhost:4467/Sum?a=' + a + '&b=' + b,
        method: 'GET'
      }).then(function(resp) {
        $log.log(resp.data);
        cb(resp.data);
      }, function(resp) {
        $log.error("ERROR occurred");
      });
    };

    return oCalcService;
  }
]);

O código para a metodologia de "Serviço" para os serviços personalizados (isto é bastante semelhante a 'fábrica', mas diferente do ponto de vista de sintaxe):

var app = angular.module("app", []);
app.controller('emp', ['$scope', 'calcService', function($scope, calcService){
	$scope.a = 10;
	$scope.b = 20;

	$scope.doSum = function(){
		//$scope.sum = calcService.getSum($scope.a, $scope.b);
		
		calcService.getSum($scope.a, $scope.b, function(r){
			$scope.sum = r;
		});		
	};

}]);

app.service('calcService', ['$http', '$log', function($http, $log){
	$log.log("instantiating calcService..");
	
	//this.getSum = function(a,b){
	//	return parseInt(a) + parseInt(b);
	//};

	//this.getSum = function(a, b, cb){
	//	var s = parseInt(a) + parseInt(b);
	//	cb(s);
	//};

	this.getSum = function(a, b, cb){
		$http({
			url: 'http://localhost:4467/Sum?a=' + a + '&b=' + b,
			method: 'GET'
		}).then(function(resp){
			$log.log(resp.data);
			cb(resp.data);
		},function(resp){
			$log.error("ERROR occurred");
		});
	};

}]);

O código da metodologia de "fornecedor" para serviços personalizados (isto é necessário, se quiser desenvolver um serviço que possa ser configurado):

var app = angular.module("app", []);
app.controller('emp', ['$scope', 'calcService', function($scope, calcService){
	$scope.a = 10;
	$scope.b = 20;

	$scope.doSum = function(){
		//$scope.sum = calcService.getSum($scope.a, $scope.b);
		
		calcService.getSum($scope.a, $scope.b, function(r){
			$scope.sum = r;
		});		
	};

}]);

app.provider('calcService', function(){

	var baseUrl = '';

	this.config = function(url){
		baseUrl = url;
	};

	this.$get = ['$log', '$http', function($log, $http){
		$log.log("instantiating calcService...")
		var oCalcService = {};

		//oCalcService.getSum = function(a,b){
		//	return parseInt(a) + parseInt(b);
		//};

		//oCalcService.getSum = function(a, b, cb){
		//	var s = parseInt(a) + parseInt(b);
		//	cb(s);	
		//};

		oCalcService.getSum = function(a, b, cb){

			$http({
				url: baseUrl + '/Sum?a=' + a + '&b=' + b,
				method: 'GET'
			}).then(function(resp){
				$log.log(resp.data);
				cb(resp.data);
			},function(resp){
				$log.error("ERROR occurred");
			});
		};		

		return oCalcService;
	}];

});

app.config(['calcServiceProvider', function(calcServiceProvider){
	calcServiceProvider.config("http://localhost:4467");
}]);

Finalmente a IU que trabalha com qualquer um dos serviços acima referidos:

<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js" ></script>
	<script type="text/javascript" src="t03.js"></script>
</head>
<body ng-app="app">
	<div ng-controller="emp">
		<div>
			Value of a is {{a}},
			but you can change
			<input type=text ng-model="a" /> <br>

			Value of b is {{b}},
			but you can change
			<input type=text ng-model="b" /> <br>

		</div>
		Sum = {{sum}}<br>
		<button ng-click="doSum()">Calculate</button>
	</div>
</body>
</html>

10

Author: user203687, 2015-12-28 19:26:13

Só para esclarecer as coisas, a partir da fonte AngularJS, você pode ver um serviço apenas chama a função de fábrica que, por sua vez, chama a função de provedor:

function factory(name, factoryFn) { 
    return provider(name, { $get: factoryFn }); 
}

function service(name, constructor) {
    return factory(name, ['$injector', function($injector) {
      return $injector.instantiate(constructor);
    }]);
}

10

Author: Ricardo Rossi, 2016-01-21 20:44:58

Vamos discutir as três maneiras de lidar com a lógica de negócios em AngularJS de uma forma simples: ([15]) inspirado pelo curso de Yaakov em Coursera AngularJS)

Serviço:

Sintaxe:

App.js

 var app = angular.module('ServiceExample',[]);
 var serviceExampleController =
              app.controller('ServiceExampleController', ServiceExampleController);
 var serviceExample = app.service('NameOfTheService', NameOfTheService);

 ServiceExampleController.$inject = ['NameOfTheService'] //protects from minification of js files

function ServiceExampleController(NameOfTheService){
     serviceExampleController = this;
     serviceExampleController.data = NameOfTheService.getSomeData();
 }

function NameOfTheService(){
     nameOfTheService = this;
     nameOfTheService.data = "Some Data";
     nameOfTheService.getSomeData = function(){
           return nameOfTheService.data;
     }     
}

Índice.html

<div ng-controller = "ServiceExampleController as serviceExample">
   {{serviceExample.data}}
</div>

Características do serviço:

preguiçosamente instanciado : Se não for injectado, nunca será instanciado. Assim, para usá-lo terá que injectá-lo em um modulo.
Singleton : Se injectado em vários módulos, todos terão acesso a apenas uma instância em particular. É por isso que é muito conveniente compartilhar dados entre diferentes controladores.

Fábrica

Primeiro vamos ver a sintaxe:

App.js:

var app = angular.module('FactoryExample',[]);
var factoryController = app.controller('FactoryController', FactoryController);
var factoryExampleOne = app.factory('NameOfTheFactoryOne', NameOfTheFactoryOne);
var factoryExampleTwo = app.factory('NameOfTheFactoryTwo', NameOfTheFactoryTwo);

//first implementation where it returns a function
function NameOfTheFactoryOne(){
   var factory = function(){
      return new SomeService();
    }
   return factory;
}

//second implementation where an object literal would be returned
function NameOfTheFactoryTwo(){
   var factory = {
      getSomeService : function(){
          return new SomeService();
       }
    };
   return factory;
}

Agora usando os dois acima no controlador:

 var factoryOne = NameOfTheFactoryOne() //since it returns a function
 factoryOne.someMethod();

 var factoryTwo = NameOfTheFactoryTwo.getSomeService(); //accessing the object
 factoryTwo.someMethod();

Características da fábrica:

segue o padrão de design da fábrica. Fabrica é um lugar central que produz novos objetos ou funções.
O Método .service() é uma fábricaque produz sempre o mesmo tipo de serviço, que é um singleton, e sem nenhuma maneira fácil de configurar o seu comportamento. Esse método .service() é normalmente usado como um atalho para algo que não requer qualquer configuração.

Fornecedor

Vamos voltar a dar uma vista de olhos a sintaxe primeiro:

angular.module('ProviderModule', [])
.controller('ProviderModuleController', ProviderModuleController)
.provider('ServiceProvider', ServiceProvider)
.config(Config); //optional

Config.$inject = ['ServiceProvider'];
function Config(ServiceProvider) {
  ServiceProvider.defaults.maxItems = 10; //some default value
}


ProviderModuleController.$inject = ['ServiceProvider'];
function ProviderModuleController(ServiceProvider) {
  //some methods
}

function ServiceProvider() {
  var provider = this;

  provider.defaults = {
    maxItems: 10
  };

  provider.$get = function () {
    var someList = new someListService(provider.defaults.maxItems);

    return someList;
  };
}

}

Características do Fornecedor:

O Fornecedor é o método mais flexível de criação de serviços em Angular.
não só nós podemos criar uma fábrica que é dinamicamente configurável, mas no momento de usar a fábrica, com o método do provedor, Nós poderíamos personalizar a fábrica apenas uma vez no bootstrapping de toda a nossa aplicação.
a fábrica pode então ser usada em toda a aplicação com configurações personalizadas. Por outras palavras, pode configurar esta fábrica antes do início da aplicação. Na verdade, na documentação angular é mencionado que o método do provedor é o que realmente é executado nos bastidores quando configuramos nossos serviços com métodos .service ou .factory.
o $get é uma função que está directamente ligada à instância do Fornecedor. Essa função é uma função de fábrica . Em outras palavras, é exatamente como aquele que usamos para fornecer para o método .factory. Naquele função, nós criamos o nosso próprio serviço. Esta propriedade $get, que é uma função, é o que faz do Fornecedor um fornecedor. AngularJS espera que o provedor tenha uma propriedade $get cujo valor é uma função que Angular irá tratar como uma função de fábrica. mas o que torna toda esta configuração do Fornecedor muito especial, é o facto de podermos fornecer algum objecto {[[12]} dentro do prestador de serviços, e que normalmente vem com predefinições que podemos substituir mais tarde no passo, onde podemos configura a aplicação inteira.

9

Author: Pritam Banerjee, 2016-12-09 09:31:42

Fábrica: {[3] a fábrica você realmente criar um objeto dentro da fábrica e devolvê-lo.
service: The service you just have a standard function that uses the keyword to define function.
provedor: o provedor existe um $ get you define e ele pode ser usado para obter o objeto que retorna os dados.

7

Author: Mohanrajan, 2015-03-04 11:12:38

[[1]] essencialmente, fornecedor, Fábrica e serviço são todos Serviços. Uma fábrica é um caso especial de um serviço quando tudo o que você precisa é uma função $get (), permitindo que você a Escreva com menos código.

As principais diferenças entre Serviços, fábricas e fornecedores são suas complexidades. Os Serviços são a forma mais simples, as fábricas são um pouco mais robustas e os fornecedores são configuráveis em tempo de execução.

Aqui está um resumo de quando usar cada:

Fábrica : A o valor que você está fornecendo precisa ser calculado com base em outros dados.

Serviço : está a devolver um objecto com métodos.

Provedor : você quer ser capaz de configurar, durante a fase de configuração, o objeto que vai ser criado antes de ser criado. Use o provedor principalmente na configuração do app, antes que o app tenha completamente inicializado.

7

Author: eGhoul, 2016-12-28 11:41:07

1.Serviços são objetos singleton que são criados quando necessário e nunca são limpos até o final do ciclo de vida da aplicação (quando o navegador é fechado). Os controladores são destruídos e limpos quando já não são necessários.

2.A maneira mais fácil de criar um serviço é usando o método factory (). O método factory() nos permite definir um serviço retornando um objeto que contém funções de serviço e dados de serviço. A função de definição de serviço é onde colocamos nossos serviços injetáveis, tais como $ http e $Q. Ex:

angular.module('myApp.services')
.factory('User', function($http) { // injectables go here
var backendUrl = "http://localhost:3000"; var service = {
    // our factory definition
user: {},
setName: function(newName) {
      service.user['name'] = newName;
    },
setEmail: function(newEmail) { service.user['email'] = newEmail;
},
save: function() {
return $http.post(backendUrl + '/users', { user: service.user
}); }
};
return service; });

Usando a fábrica() no nosso app

É fácil usar a fábrica na nossa aplicação, pois podemos simplesmente injectá-la onde precisamos dela em tempo de execução.

angular.module('myApp')
.controller('MainController', function($scope, User) {
  $scope.saveUser = User.save;
});

o método serviço (), por outro lado, permite-nos criar um serviço definindo uma função construtora. Podemos usar um objeto prototípico para definir o nosso serviço, em vez de um objeto JavaScript raw. Semelhante ao método fábrica (), também vamos definir os injetáveis na definição da função.
a forma mais baixa de criar um serviço é usando o método provide (). Esta é a única maneira de criar um serviço que podemos configurar usando o.função config (). Ao contrário do anterior aos métodos, vamos definir os injetáveis em um definido isto.$get () function definition.

4

Author: Shankar Gangadhar, 2016-10-30 23:39:31

Açúcar sintático é a diferença. Só o Provedor é necessário. Ou, em outras palavras, apenas o Provedor é o angular real, todos os outros são derivados (para reduzir o código). Existe também uma versão simples, chamada Value() que retorna apenas o valor, nenhum cálculo ou função. Mesmo o valor é derivado do provedor!

Então por que essas complicações, por que não podemos usar o Provedor e esquecer tudo o resto? É suposto ajudar-nos a escrever código facilmente e comunicar melhor. E toungue-in-cheek reply would be, the more complex it gets the better selling a framework will be.

um fornecedor que pode devolver o valor = Valor
um provedor que pode apenas instanciate e return = Factory (+Value)
um fornecedor que pode instantiate + do something = Service (+Factory, + Value)
um fornecedor = must contain a property called $get (+Factory, + Service, + Value)

A injecção Angular dá-nos a primeira pista em chegar a esta conclusão.

" $ injector é usado para obter instâncias de objectos, tal como definido por Fornecedor" não Serviço, não Fábrica, mas fornecedor.

E uma resposta melhor seria:: "Um serviço Angular é criado por uma fábrica de serviços. Estas fábricas de serviços são funções que, por sua vez, são criadas por um prestador de serviços. Os prestadores de serviços são funções construtoras. Quando instanciados eles devem conter uma propriedade chamada $get, que detém a fábrica de serviços funcao."

Então o fornecedor principal e injector e tudo irá encaixar:]. E torna-se interessante em Typescript quando $get pode ser implementado em um provedor, herdando do IServiceProvider.

-3

Author: Blue Clouds, 2016-04-05 13:13:00

score 2879 · Accepted Answer

A partir da lista de correio AngularJS consegui um tópico incrível que explica o serviço vs fábrica vs fornecedor e o seu uso de injecção. Compilando as respostas:

Serviços

Sintaxe: module.service( 'serviceName', function );
Resultado: ao declarar o serviceName como um argumento injectável , ser-lhe-á fornecida uma instância da função. Por outras palavras: new FunctionYouPassedToService().

Fábricas

Sintaxe: module.factory( 'factoryName', function );
Resultado: ao declarar o factoryName como um argumento injetável ser-lhe-á fornecido o valor que é devolvido invocando a referência da função passada ao módulo.factory.

Fornecedores

Sintaxe: module.provider( 'providerName', function );
Resultado: ao declarar o nome de providerName como um argumento injectável ser-lhe-á fornecido (new ProviderFunction()).$get(). A função construtora é instanciada antes que o método $get seja chamado - ProviderFunction é a referência da função passada ao módulo.fornecedor.

Os fornecedores têm a vantagem de poderem ser configurados durante a fase de configuração do módulo.

Ver aqui para o código fornecido.

Eis mais uma explicação de Misko:

provide.value('a', 123);

function Controller(a) {
  expect(a).toEqual(123);
}

Neste caso, o injector devolve simplesmente o valor tal como está. Mas e se quiser calcular o valor? Então use uma fábrica

provide.factory('b', function(a) {
  return a*2;
});

function Controller(b) {
  expect(b).toEqual(246);
}

Então factory é uma função que é responsável pela criação do valor. Observe que a função de fábrica pode pedir outras dependências.

Mas e se quiseres ser mais OO e ter uma turma chamada Greeter?

function Greeter(a) {
  this.greet = function() {
    return 'Hello ' + a;
  }
}

Então para instanciar teria que escrever

provide.factory('greeter', function(a) {
  return new Greeter(a);
});

Então podíamos pedir um "saudador" no controlador como este.

function Controller(greeter) {
  expect(greeter instanceof Greeter).toBe(true);
  expect(greeter.greet()).toEqual('Hello 123');
}

Mas isso é demasiado wordy. Uma maneira mais curta de escrever isso seria provider.service('greeter', Greeter); Mas e se quiséssemos configurar a classe Greeter antes da injecção? Depois podíamos escrever.

provide.provider('greeter2', function() {
  var salutation = 'Hello';
  this.setSalutation = function(s) {
    salutation = s;
  }

  function Greeter(a) {
    this.greet = function() {
      return salutation + ' ' + a;
    }
  }

  this.$get = function(a) {
    return new Greeter(a);
  };
});

Então podemos fazer isto.

angular.module('abc', []).config(function(greeter2Provider) {
  greeter2Provider.setSalutation('Halo');
});

function Controller(greeter2) {
  expect(greeter2.greet()).toEqual('Halo 123');
}

Como nota lateral, service, factory, e value são todos derivados do Fornecedor.

provider.service = function(name, Class) {
  provider.provide(name, function() {
    this.$get = function($injector) {
      return $injector.instantiate(Class);
    };
  });
}

provider.factory = function(name, factory) {
  provider.provide(name, function() {
    this.$get = function($injector) {
      return $injector.invoke(factory);
    };
  });
}

provider.value = function(name, value) {
  provider.factory(name, function() {
    return value;
  });
};