What is the difference between factory and provider in AngularJS (on fingers)

Some time ago, I translated the article “Understanding the types of services in AngularJS (constant, value, factory, service, provider)” . In practice, of course, not everything comes in handy, so as part of lowering the threshold of entry into Angulyar, I will explain it more simply.



There are no factories in Angulyar. There are only providers. Written as follows:

app.provider('$helloWorld', function() { return { world: 'World', $get: function($hello) { return $hello + this.world; } } }); 

After this, Angulyar will create a service from the $ get method:

')

 $helloWorld = function($hello) { return $hello + this.world; } 

and its provider to configure the remaining parameters:

 $helloWorldProvider = { world: 'World' } 

We use the provider to configure the service (at the configuration stage):

 app.config(function($helloWorldProvider) { $helloWorldProvider.world = 'Piter'; }) 

The service itself - after launching the application:

 app.controller('MainCtrl', function($scope, $helloWorld) { $scope.title = $helloWorld; // $hello + 'Piter' }); 

Suppose we do not need the settings:

 app.provider('$helloWorld', function() { return { $get: function($hello) { return $hello + 'World'; } } }); 

What we have just recorded is nothing but a factory. The same can be written as:

 app.factory('$helloWorld', function($hello) { return $hello + 'World'; }); 

Of course, in this case Angulyar will create $helloWorldProvider , only it will be without parameters - empty.



Output: factory, service, value, constant - just syntactic sugar for the provider



PS $hello is just some kind of our service, taken as an example:

 app.factory('$hello', function() { return 'Hello'; }); 

PPS Cheat Sheet



Provider

 app.provider('$helloWorld', function() { return { world: 'World', $get: function($hello) { return $hello + this.world; } } }); 

Factory

 app.factory('$helloWorld', function($hello) { return $hello + 'World'; }); //  app.provider('$helloWorld', function() { return { $get: function($hello) { return $hello + 'World'; } } }); 

Service

 app.service('$helloWorld', HelloWorldClass); //  app.provider('$helloWorld', function() { return { $get: function($hello) { return new HelloWorldClass($hello); } } }); 

Value

 app.value('$helloWorld', {greating: 'Hello'}); //  app.provider('$helloWorld', function() { return { $get: function() { return {greating: 'Hello'}; } } }); 

Constant

 app.constant('$helloWorld', {world: 'Piter'}); //  app.provider('$helloWorld', function() { return { world: 'Piter', $get: function() { return this; // $get } } }); //  config    Provider app.config(function($helloWorld) { ... }) 

PPPS

 function HelloWorldClass($hello) { ... } app.service('$helloWorld', HelloWorldClass); 

How does Angulyar know which parameters to pass to the constructor? The fact is that HelloWorldClass (and any function in $get ) starts through $injector.invoke(fn) , and this is the kind of thing that reads the function code, pulls out arguments from parentheses and pulls in services of the same name ( $hello in our case) . It's simple!