original:/blog/differ...
What is Provider?
AngularJS documentation defines provider:
Provider is an object with the $get() method. Injector calls the $get method to create a new service instance. There are some other methods for configuring providers.
AngularJS uses $provide to register new providers. Providers basically create a new instance, but each provider is created only once. $provide provides 6 ways to create custom providers, I will explain them separately with simple code examples.
The 6 methods are as follows:
- constant
- value
- service
- factory
- decorator
- provider
Constant
constant can be injected anywhere. The constant cannot be intercepted by the decorator, which means that the constant value can never be changed.
var app = ('app', []);
(function ($provide) {
$('movieTitle', 'The Matrix');
});
('ctrl', function (movieTitle) {
expect(movieTitle).toEqual('The Matrix');
});
AngularJS provides an easier way to create constant. You can rewrite the above 3 to 5 lines of code as:
('movieTitle', 'The Matrix');
Value
value is a simple injectable value, either string, number, or function.
Unlike constant, value cannot be injected into configurations, but value can be intercepted by decorators.
var app = ('app', []);
(function ($provide) {
$('movieTitle', 'The Matrix')
});
('ctrl', function (movieTitle) {
expect(movieTitle).toEqual('The Matrix');
})
Easy way to create a value:
('movieTitle', 'The Matrix');
Service
service is an injectable constructor. If you want, you can specify the required dependencies in the function.
The service is a singleton that is created only once. Services is a great way to pass data between controllers, such as sharing data.
var app = ('app' ,\[\]);
(function ($provide) {
$('movie', function () {
= 'The Matrix';
});
});
('ctrl', function (movie) {
expect().toEqual('The Matrix');
});
Simple way to create a service:
('movie', function () {
= 'The Matrix';
});
Factory
factory is an injectable function.
The same thing 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. And with factory, you can make this function return whatever you want.
You will see that factory is a provider with only $get method.
var app = ('app', []);
(function ($provide) {
$('movie', function () {
return {
title: 'The Matrix';
}
});
});
('ctrl', function (movie) {
expect().toEqual('The Matrix');
});
Easy way to create a factory:
('movie', function () {
return {
title: 'The Matrix';
}
});
Decorator
The decorator can modify or encapsulate other providers, but the constant cannot be decorated.
var app = ('app', []);
('movieTitle', 'The Matrix');
(function ($provide) {
$('movieTitle', function ($delegate) {
return $delegate + ' - starring Keanu Reeves';
});
});
('myController', function (movieTitle) {
expect(movieTitle).toEqual('The Matrix - starring Keanu Reeves');
});
Provider
The provider is the most complex of all providers, and can have complex creation functions and configuration options.
The provider is actually a configurable factory. The provider accepts an object or constructor.
var app = ('app', []);
('movie', function () {
var version;
return {
setVersion: function (value) {
version = value;
},
$get: function () {
return {
title: 'The Matrix' + ' ' + version
}
}
}
});
(function (movieProvider) {
('Reloaded');
});
('ctrl', function (movie) {
expect().toEqual('The Matrix Reloaded');
});
Summarize
All providers will be instantiated only once, so they are singletons.
Except for 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 for constant.
Provider is a configurable factory.
This is the end of this article about the difference between several providers in AngularJS. For more information about the differences between providers in AngularJS, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!