Angularjs of the application development thinking of the 3_ANGULARJS injection

An API that can't be found?
Angularjs provides some encapsulation of functionality, but when you try to access these features through the global object angular, you find that it's very different from the ones you've encountered before.

$http
For example, in jquery, we know that its APIs are exposed through a global object: $, and when you need to make Ajax calls, use $.ajax (). Such APIs are very much in line with thinking expectations.

Angularjs also exposes a global object: Angular, also encapsulates Ajax calls to provide a $http object, but, however, when you try to use the old experience to access angular. $http, found that is not the case!

Check $http's documentation carefully and find little clues as to where to get this $http.

Dependency Injection/di
In fact, ANGULARJS organizes all the functional components in a dependency injection way:

In dependency injection mode, all components must pass through the container to access each other, which leads to a angularjs in which you must pass an intermediary to obtain an instance object of a component:

var injector = Angular.injector ([' ng ']);
Injector.invoke (function ($http) {
//do sth. with $http
});

This intermediary, which is the container in the dependency injection pattern, is called in the Angularjs: the injector.

In the →_→ example, we can see that we've got the $http object, which is actually a function.

Injection Device/injector
The injector is the key to the implementation and application development of the ANGULARJS framework, which is the implementation of a DI/IOC container.

Angularjs functions into different types of components to implement, these components have a general name-provider/provider, the following figure is listed in the ANGULARJS several common built-in services:

ANGULARJS components cannot be called directly to each other, and a component must pass through the injector to invoke another component. The advantage is that the components are decoupled from each other, and the entire lifecycle management of the object is dumped into the injector.

The injector implements two important functions:

Centralize storage of all provider recipes
The formula is actually: Name + class constructor. When Angularjs starts, these provider are first registered with their formula in the injector. For example, the HTTP request service component is encapsulated within the $httpprovider class and is registered in the injector through the name ' $http '.

Provide instances of functional components on demand
Other components, such as a user's controller, can obtain an HTTP service instance if you need to use the HTTP feature and use the name ' $http ' to request to the injector.

Try modifying the →_→ code to see what the next $compile service is.

Registering Service Components
From a injector perspective, a component is a function provider, and is therefore called the supplier/provider. In Angularjs, provider is encapsulated in the form of a JavaScript class (constructor).

Service names typically use a string identifier, such as ' $http ' on behalf of the HTTP invocation service, ' $rootScope ' representing the root scope object, ' $compile ' representing the compilation service ...

The provider class requires that a $get function (class factory) be provided, and injector can obtain an instance of the serviced component by calling the function.

The combination of name and class functions is called a recipe. Injector maintains a centralized recipe library that is used to create different components on demand. This recipe library, in fact, is a hash object, key is the service name, value is the class definition.

In the →_→ example, we define a simple service class where an instance of the service class is a string: "hello,world!". We use ' Ezhello ' as its service name in the injector register, and through the injector to show this example.

Get the Injector Object
to use the Angularjs feature, you must first get the injector. There are two ways of getting the injector.

Create a new injector
You can use Angular.injector () to create a new injector:

Angular.injector (modules, [STRICTDI]); Get an injector that has been created
If the ANGULARJS framework is already started, you can use the injector () method of the DOM object to obtain an injector that has already been created:

var element = angular.element (dom_element);
var injector = Element.injector ();

Invoking the API through the injector
the injector has two methods available for API calls: Invoke () and get ().

Invoke ()
Using the Invoke () method of the injector, you can directly invoke a user-defined function body and inject the dependent service object through the function parameters, which is the usage of ANGULARJS recommendations and conventions:

Angular.injector ([' ng '])
. Invoke (function ($http) {
//do sth. with $http
});

You can also use the injector's Get () method to obtain a service instance with the specified name:

var my$http = angular.injector ([' ng ']). Get (' $http ');
Do sth. With My$http

→_→ 's example this time using the Get () method to directly obtain a service instance, feel!

The way and principle of injection
There are two methods of informing the injector of the service object to be injected: parameter name injection and dependent array injection.

Parameter name injection
When the Invoke () function is executed, the Angularjs function definition is converted to a string, and the parameter table is examined by a regular expression to discover and inject the service object on which it depends:

MyFunc declares this function by parameter table depends on the ' $http ' service
var myfunc = function ($http) {
//do sth. with $http
};
Injector.invoke (myfunc); the definition of//myfunc will be converted to a string for parameter name checking

The problem with this is that when we compress JavaScript code, $http may be changed to another name, which will cause the injection to fail.

Dependency array Injection
Angularjs uses the dependency array method to solve the problem of code compression obfuscation. The incoming invoke () is an array in which the last item of the array is the actual function to be executed, and other items indicate the service name that needs to be injected into the function. The injector will inject the dependent object into the function sequentially, in the order of the array.

In this way, the name of the parameter table of the function to be injected does not matter:

MyFunc relies on ' $http ' and ' $compile ' services
var myfunc = [' $http ', ' $compile ', function (P1,P2) {
//do sth. with P1 ($http), P2 ($compile)
}];
Injector.invoke (MyFunc);

→_→ example this time using an array-dependent method injected into the Ezhello service instance, you can change the name of the parameter to see if the impact of the results?

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.