Talk about the differences between Providers in AngularJS

Related tutorial recommendations: "angular tutorial"

What is Provider?

angularjsDocument definition of provider:

provider is an object with a $get() method. The injector calls the $get method to create a new service instance. Provider also has some other methods that can be used to configure the provider.

AngularJS uses $provide to register new providers. Providers basically create a new instance, but each provider is only created once. $provide provides 6 methods to create a custom provider, I will explain them respectively with simple code examples.

The 6 methods are as follows:

• constant

• ##value

• service

• factory

• decorator

• provider

Constant

Constant can be injected anywhere. Constant cannot be intercepted by decorator, which means that the value of constant can never be changed.

var app = angular.module('app', []); 
app.config(function ($provide) {
  $provide.constant('movieTitle', 'The Matrix');
}); 

app.controller('ctrl', function (movieTitle) {
  expect(movieTitle).toEqual('The Matrix');
});

AngularJS provides a simpler way to create constant. You can rewrite the above 3 to 5 lines of code as:

app.constant('movieTitle', 'The Matrix');

Value

value is a simple value that can be injected, which can be string, number, or function.

The difference from constant is that value cannot be injected into configurations, but value can be intercepted by decorators.

var app = angular.module('app', []); 
app.config(function ($provide) {
 $provide.value('movieTitle', 'The Matrix')
});

app.controller('ctrl', function (movieTitle) {
 expect(movieTitle).toEqual('The Matrix');
})

Easy way to create value:

app.value('movieTitle', 'The Matrix');

Service

Service is a constructor that can be injected. If you want, you can specify the required dependencies in the function.

Service is a singleton and is only created once. Services are a great way to transfer data between controllers, such as sharing data.

var app = angular.module('app' ,\[\]); 
app.config(function ($provide) {
 $provide.service('movie', function () {
   this.title = 'The Matrix';
 });
});

app.controller('ctrl', function (movie) {
 expect(movie.title).toEqual('The Matrix');
});

Simple way to create service:

app.service('movie', function () {
 this.title = 'The Matrix';
});

Factory

factory is an injectable function.

Same as service: factory is also a singleton, and dependencies can also be specified in this function.

The difference is: factory injects a normal function, AngularJs will call this function, and service injects a constructor.

Service is a constructor that calls new to create a new object. With a factory, you can make the function return anything you want.

You will see that factory is a provider with only $get method.

var app = angular.module('app', []); 
app.config(function ($provide) {
 $provide.factory('movie', function () {
   return {
     title: 'The Matrix';
   }
 });
}); 

app.controller('ctrl', function (movie) {
 expect(movie.title).toEqual('The Matrix');
});

Simple way to create a factory:

app.factory('movie', function () {
 return {
   title: 'The Matrix';
 }
});

Decorator

Decorator can modify or encapsulate other providers, but constant Cannot be decorated.

var app = angular.module('app', []); 
app.value('movieTitle', 'The Matrix'); 
app.config(function ($provide) {
 $provide.decorator('movieTitle', function ($delegate) {
   return $delegate + ' - starring Keanu Reeves';
 });
});

app.controller('myController', function (movieTitle) {
 expect(movieTitle).toEqual('The Matrix - starring Keanu Reeves');
});

Provider

provider is the most complex of all providers and can have complex creation functions and configuration options.

provider is actually a configurable factory. provider accepts an object or constructor.

var app = angular.module('app', []); 
app.provider('movie', function () {
 var version;
 return {
   setVersion: function (value) {
     version = value;
   },
   $get: function () {
     return {
       title: 'The Matrix' + ' ' + version
     }
   }
 }
});

app.config(function (movieProvider) {
 movieProvider.setVersion('Reloaded');
});

app.controller('ctrl', function (movie) {
 expect(movie.title).toEqual('The Matrix Reloaded');
});

Summary

All providers will only be instantiated once, so they are all singletons.

Except constant, other providers can be decorated.

Constant is a value that can be injected anywhere, and its value cannot be changed.

value is a simple injectable value.

service is an injectable constructor.

factory is an injectable function.

Decorator can modify or encapsulate other providers, except constant.

provider is a configurable factory.

English original address: https://xebia.com/blog/differences-between-providers-in-angularjs/

Related recommendations:

Programming teaching

The above is the detailed content of Talk about the differences between Providers in AngularJS. For more information, please follow other related articles on the PHP Chinese website!