Introduction:
First of all, we need to understand what dependency injection is?
What is the difference between control inversion and dependency injection?
Assuming: Application A needs to access external resource C. Container B is used here (referring to a framework program used to implement IOC/DI functions).
A requires access to C
B gets C and returns to A
IOC inversion of control: stand at the container angle. B controls A and injects C into A in reverse from B. That is, the container controls the application, injecting the external resources required by the application into the application in reverse.
DI Dependency Injection: From the perspective of the application. A depends on B to get C, and B injects C into A. That is, the application depends on the container to create and inject the external resources it needs.
AngularJS Dependency Injection
Provider service ($provide)
AngularJS provides a good dependency injection mechanism. The following 5 core components are used as dependency injection:
value
factory
service
provider
constant
decorator (play soy sauce)
Constant
For defining constants, the value defined by this product cannot be changed. It can be injected anywhere, but cannot be decorated by a decorator.
var app = ('app', []);
(function ($provide) {
$('movieTitle', 'The Matrix');
});
('ctrl', function (movieTitle) {
expect(movieTitle).toEqual('The Matrix');
});
// Syntax sugar:('movieTitle', 'The Matrix');
Value
This product can be string, number or even function. The difference between it and constant is that it can be modified and cannot be injected into the config, but it can be decorated by the decorator
var app = ('app', []);
(function ($provide) {
$('movieTitle', 'The Matrix')
});
('ctrl', function (movieTitle) {
expect(movieTitle).toEqual('The Matrix');
});
// Syntax sugar:('movieTitle', 'The Matrix');
Service
It is an injectable constructor, which is a singleton in AngularJS, and it is suitable to use it to communicate or share data in the Controller.
var app = ('app' ,[]);
(function ($provide) {
$('movie', function () {
= 'The Matrix';
});
});
('ctrl', function (movie) {
expect().toEqual('The Matrix');
});
// Syntax sugar:('movie', function () {
= 'The Matrix';
});
Factory
It is an injectable function. The difference between it and service is: the factory is a normal function, and the service is a constructor. In this way, Angular will use the new keyword when calling the service, and when calling the factory, it only calls the ordinary function, so the factory can return anything, while the service can not return (you can check the role of the new keyword).
var app = ('app', []);
(function ($provide) {
$('movie', function () {
return {
title: 'The Matrix';
}
});
});
('ctrl', function (movie) {
expect().toEqual('The Matrix');
});
// Syntactic sugar('movie', function () {
return {
title: 'The Matrix';
}
});
Provider
Provider is their boss, and almost (except constant) of the above are packaged by providers. Provider must have a $get method. Of course, it can also be said that provider is a configurable factory.
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');
});
Decorator
This is quite special. It is not a provider. It is used to decorate other providers. As mentioned earlier, it cannot decorate Constant because in fact Constant is not created through the provider() method.
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');
});
Summarize:
All suppliers are instantiated only once, which means they are singletons.
Except for constant, all suppliers can be decorated by decorators.
value is a simple injectable value
Service is an injectable constructor
Factory is an injectable method
Decorator can modify or encapsulate other vendors, except for constant
Provider is a configurable factory
The above source: (Providers in AngularJS: the difference between Service and Factory, etc.)/a/1190000003096933
Injector ($injector)
The injector is responsible for creating injected instances from the services we created through provide. As long as you write a parameter with injectability, you can see how the injector works. Every AngularJS application has a unique injector, which is created when the application starts, and you can get it by injecting the injector into any injectable function ($injector knows how to inject itself!).
Once you have an injector, you can call the get function to get any instance of a defined service.
var movie = $('movie');
expect().toEqual('The Matrix Reloaded');
The injector is also responsible for injecting services into functions; for example, you can magically inject services into any function as long as you use the injector's invoke method:
var myFunction = function(movie) {
return ;
};
$(myFunction);
If the injector just creates an instance of a service once, then it is nothing great. What's great about it is that it can cache anything returned from a provider through the service name, and when you use this service again the next time you get the same object.
Therefore, it is reasonable for you to inject a service into any function by calling it. include:
- Controller definition function
- Directive definition function
- Filter definition function
- $get method (that is, factory function) in the provider
Since constant and value always return a static value, they are not called through the injector, so you can't inject anything into it.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.