AngularJS: Article 2 AngularJS dependency injection and Article 2 angularjs

AngularJS: Article 2 AngularJS dependency injection and Article 2 angularjs

Introduction:

First, what is dependency injection?
What is the difference between control reversal and dependency injection?
Assume that application A needs to access external resource C. Here, container B is used (a framework program used to implement the IOC/DI function ).
A needs to access C
B obtains C and returns it to.
IOC inversion of control inversion: from the container perspective. B controls A, and B reversely injects C into. That is, the container controls the application, and the container reversely injects the external resources required by the application to the application.
DI Dependency Injection: From the application perspective. A depends on B to obtain C, and B injects C into. That is, the application depends on the container to create and inject the required external resources.

AngularJS dependency Injection

Provider Service ($ provide)

AngularJS provides a good dependency injection mechanism. The following five core components are used for dependency injection:

Value
Factory
Service
Provider
Constant
Decorator (soy sauce)

Constant

Defined constants are used. The value defined in this product cannot be changed. It can be injected anywhere, but cannot be decorated by decorator.

Var app = angular. module ('app', []); app. config (function ($ provide) {$ provide. constant ('movietitle', 'The Matrix ');}); app. controller ('ctrl ', function (movieTitle) {featured CT (movieTitle ). toEqual (The Matrix);}); // syntactic sugar: app. constant ('movietitle', 'The Matrix ');

Value

This product can be string, number, or even function. It differs from constant in that it can be modified and cannot be injected into config, but it can be decorated by decorator.

Var app = angular. module ('app', []); app. config (function ($ provide) {$ provide. value ('movietitle', 'The Matrix ')}); app. controller ('ctrl ', function (movieTitle) {featured CT (movieTitle ). toEqual (The Matrix);}); // syntactic sugar: app. value ('movietitle', 'The Matrix ');

Service

It is an injecting constructor. In AngularJS, It is a singleton. It is suitable for communication or sharing data in the Controller.

Var app = angular. module ('app', []); app. config (function ($ provide) {$ provide. service ('movie ', function () {this. title = 'The Matrix ';}) ;}); app. controller ('ctrl ', function (movie) {custom CT (movie. title ). toEqual (The Matrix);}); // syntactic sugar: app. service ('movie ', function () {this. title = 'The Matrix ';});

Factory

It is an injecting function, and the difference between it and service is that factory is a common function, and service is a constructor ), in this way, Angular will use the new keyword when calling the service, while calling the factory only calls the common function, so the factory can return anything, but the service does not return (check the function of the new Keyword ).

Var app = angular. module ('app', []); app. config (function ($ provide) {$ provide. factory ('movie ', function () {return {title: 'The Matrix' ;}}) ;}); app. controller ('ctrl ', function (movie) {custom CT (movie. title ). toEqual (The Matrix);}); // syntactic sugar app. factory ('movie ', function () {return {title: 'The Matrix ';}});

Provider

Provider is their boss. Almost all the above (except constant) are provider encapsulation. provider must have a $ get method. Of course, provider is a configurable factory.

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');});

Decorator

This is special. It is not a provider. It is used to decorate other providers. As mentioned earlier, Constant cannot be decorated, because in fact Constant is not created through the provider () method.

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');});

Summary:

All suppliers are instantiated only once, that is, they are single-instance
All suppliers except constant can be decorated with decorator.
Value is a simple and deployable value.
A service is an extensible constructor.
Factory is an executable method.
Decorator can modify or encapsulate other vendors, except for constant
Provider is a configurable factory

(AngularJS providers: Service and Factory, etc.) https://segmentfault.com/a/1190000003096933

Injector ($ injector)

The injector is responsible for creating injection instances from the services we created through provide. You can see how the injector runs as long as you have compiled a parameter with a testability. Each AngularJS application has a unique injector, which is created when the application is started, you can get it by injecting injector into any injection function ($ injector knows how to inject itself !).
Once you have an injector, you can call the get function to obtain an instance of any defined service.

var movie = $injector.get('movie');expect(movie.title).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 movie.title;};$injector.invoke(myFunction);

If the injector only creates a service instance once, it is nothing remarkable. It is amazing that it can cache anything returned from a provider through the service name. When you use this service again next time, you will get the same object.
Therefore, it is reasonable to call injector. invike to inject the service into any function. Including:

• Controller-defined functions
• Command definition function
• Filter definition function
• $ Get method in provider (that is, the factory function)
  

Since constant and value always return a static value, they are not called through the injector, so you cannot inject anything in it.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.