The usage and difference of Provider in AngularJS

In a well-layered Angular application, the Controller layer should be thin. In other words, most of the business logic and persistent data in the application should be placed in the service.

For this reason, it is necessary to understand the differences between several Provider in AngularJS.

New services created by Provider can be used to inject. Including:

• Provider
• Factory
• Service
• constant
• Value

In addition, built-in services can also be $controller $filter injected, and these services can also be used to obtain new filters and controllers.

The following describes the differences between the usage and provider, factory, and value.

Provider

Used to produce a configurable Service, consisting of two parts. The first part of the variables and functions can be accessed in the app.config function, you can modify them when they are accessed elsewhere. This is defined in the following way:

1 2 3 4

App.provider (function() { ‘‘; function() {}; })

To app.config modify in a function pair a :

1 2 3

App. Config (function(myproviderprovider) { ' Hello World '; })

This is also the reason for the use of provider in the case of such a simple factory.

The variables and functions in the second part are returned through the $get() function and can be accessed in any controller that has passed into the provider.

1 2 3 4 5 6 7 8

App.provider (function() { function() { return { function() {}, A:a } } })

Factory

Factory returns an object. Just create an object, add a property to it, and return to the object. You can use all of its properties by injecting the factory in the controller.

1 2 3 4 5 6

App.factory (function() { var fac = {}; ' Hello World '; function() {}; return FAC; })

It can be seen that the second parameter of factory is the $get corresponding function implementation in provider.

Service

A service is similar to a constructor that new instantiates an object with a keyword, adds properties and methods directly to it, and is this this returned as a return value when the service object is created.

1 2 3 4 5 6

app.service (< span class= "keyword" >function () { var a = this.seta = function< Span class= "params" > () {}; this.geta = function< Span class= "params" > () {}; this.foo = function< Span class= "params" > () {}; /span>

myServicethe injected controller can access the bindings in myService the this top setA() , getA() and foo() three methods.

constant

Constant is used to define constants, which cannot be changed once defined. Can be injected anywhere, but not decorated by decorators (decorator).

1	App.constant (' a1s2d3f4 ')

Value

As with constant, you can define values. But the difference with constant is: can be modified, can be decorator decorate, cannot be injected into CONFIG.

1	App.value (' 1.0 ')

Value is typically used to set an initial value for an app.

Decorator

More special, it is not provider. It is used to decorate other provider, except constant, because from the source can be seen, constant is not provider() created through the method.

Below is a chestnut decorated with decorator value.

1 2 3 4

App.value (' 1.0 '); App.decorator (($delegate) { '. 1 '; })

If you want to use the previous myService service, but there is a missing greet function that you want. Can I modify the service? The answer is NO! But you can decorate it:

1 2 3 4 5

App.decorator (function($delegate) { function() { "Hello, I am a new function of ' myservice '"; } })

$delegateRepresents an actual service instance.

The ability to decorate a service is very practical, especially when we want to use a third-party service, and we don't need to copy the code into our project at this time, but only some modifications are needed.

Source

The following are the underlying implementations of provider, factory, service, value, constant, and decorator:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

functionProvider(Name, Provider_) { Assertnothasownproperty (Name,' Service '); if (isfunction (provider_) | | IsArray (PROVIDER_)) { Provider_ = Providerinjector.instantiate (Provider_); } if (!provider_. $get) { Throw $INJECTORMINERR (' Pget ',"Provider ' {0} ' must define $get factory method.", name); } return providercache[name + providersuffix] = Provider_; } functionFactory(Name, FACTORYFN, enforce) { Return provider (name, { $get: Enforce!==False? Enforcereturnvalue (Name, FACTORYFN): FACTORYFN }); } functionService(name, constructor) { Return factory (name, [' $injector ',function($injector) { Return $injector. Instantiate (constructor); }]); } functionValue(Name, Val) {Return factory (Name, Valuefn (Val),FALSE); } functionconstant(name, value) { Assertnothasownproperty (Name,' Constant '); Providercache[name] = value; Instancecache[name] = value; function decorator (ServiceName, DECORFN) { var origprovider = providerinjector.get (ServiceName + providersuffix), Orig$get = Origprovider. $get; Origprovider. $get = () { var originstance = Instanceinjector.invoke (Orig$get, Origprovider); return instanceinjector.invoke (DECORFN, null, {$delegate: originstance}); }; } /span>

It can be seen that, in addition to constant, the other final calls are provider (decorator is special, not counted).

Summarize when to use provider instead of factory?

Provider is an enhanced version of factory. When a configurable factory is required, use provider.

A brief introduction to the process of AngularJS running the application, divided into two phases, the Config phase and the run phase. The config phase is the stage of setting any provider. It is also the stage of setting any instructions, controllers, filters and other things. In the run phase, AngularJS compiles your DOM and launches the app.

What is the difference between factory and service?

Factory is a normal function, and the service is a constructor (constructor), so that Angular calls the service with the New keyword, while invoking factory simply calls the normal function, so FAC Tory can return anything, and the service can not be returned.

Reference

1. AngularJS Factory vs Service vs Provider
2. [Angularjs Series (4)] The Provider who can't afford to hurt (Provider, Value, Constant, Service, Factory, Decorator)
3. Understanding the service types in Angularjs
4. The provider in Angularjs: the difference between service and factory

The usage and difference of Provider in AngularJS