API not found?
AngularJS provides some encapsulation of functions, but when you try to access these functions through the global object angular, you find that they are very different from the libraries you encountered in the past.
$http
For example, in jQuery, we know that its API is exposed through a global object: $. When you need to make ajax call, use $.ajax(). Such an API is very consistent with the expectations of thinking.
AngularJS also exposes a global object: angular, which also encapsulates ajax call and provides a $http object. However, when you try to access angular.$http using old experience, you find that it is not the case!
After carefully checking the $http documentation, I can't find any clues. Where can I get this $http?
Dependency injection/DI
In fact, AngularJS organizes all functional components in dependency injection:
In dependency injection mode, all components must pass through containers to access each other, which leads to the fact that in AngularJS, you must use 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 is a container in the dependency injection mode. In AngularJS, it is called: injector.
In the example of →_→, we can see that we have got the $http object, which is actually a function.
Injector/injector
The injector is the key to the implementation of AngularJS framework and application development, which is an implementation of DI/IoC containers.
AngularJS divides functions into different types of components and implements them separately. These components have a collective name - provider/provider. The following figure lists several commonly used built-in services for AngularJS:
AngularJS components cannot be called directly from each other. One component must pass through an injector to call another component. This benefit is that components are decoupled from each other, and the management of the entire life cycle of the object is thrown to the injector.
The injector implements two important functions:
Centrally store recipes for all providers
The recipe is actually: name + class constructor. When AngularJS is started, these providers are first registered in the injector using their recipes. For example, the http request service component is encapsulated within the $httpProvider class, and it is registered in the injector through the name '$http'.
Provide examples of functional components on demand
Other components, such as a user's controller, if you need to use the http function, use the name '$http' to request the injector, you can get an http service instance.
Try to modify the code of →_→ to see what the $compile service is?
Register Service Component
From the perspective of injector, a component is a function provider, so it is called a provider/Provider. In AngularJS, the provider is encapsulated in the form of a JavaScript class (constructor).
Service names are usually identified by a string, such as '$http' for http calling service, '$rootScope' for root scope object, '$compile' for compilation service...
The Provider class requires a $get function (class factory). By calling this function, the injector can obtain an instance of the service component.
The combination information of name and class function is called recipe. Injector maintains a centralized recipe library to create different components on demand. This recipe library is actually a Hash object, key is the service name, and value is the class definition.
In the example of →_→, we define a simple service class, and the instance of this service class is a string: "hello,world!". We use 'ezHello' as its service name to register in the injector and display this instance through the injector.
Obtain the injector object
To use the functionality of AngularJS, you must first get the injector. There are two ways to get the injector.
Create a new injector
You can create a new injector using angular.injector():
angular.injector(modules, [strictDi]); Get the already created injector
If the AngularJS framework has been started, you can use the injector() method of the DOM object to obtain the already created injector:
var element = angular.element(dom_element);
var injector = element.injector();
Calling API via injector
The injector has two methods for API calls: invoke() and get().
invoke()
Using the invoke() method of the injector, you can directly call a user-defined function body and inject the dependent service object through function parameters. This is the usage of AngularJS recommendation and convention:
angular.injector(['ng']).invoke(function($http){//do sth. with $http}); get()You can also use the get() method of the injector to obtain the service instance with the specified name:
var my$http = angular.injector(['ng']).get('$http');//do sth. with my$http→_→ Example This time, I used the get() method to directly obtain a service instance and feel it!
Injection method and principle
There are two ways to inform the injector of the service object that needs to be injected: parameter name injection and dependency array injection.
Parameter name injection
When AngularJS executes the invoke() function, it converts the function definition to be injected into a string, checks its parameter table through regular expressions, and thus discovers and injects the service object it depends on:
//myfunc declares this function to depend on the '$http' service var myfunc = function($http){//do sth. with $http};injector.invoke(myfunc);//myfunc's definition will be converted into a string for parameter name checking.There is a problem with this, that is, when we compress the JavaScript code, $http may be changed to another name, which will cause the injection to fail.
Depend on array injection
AngularJS uses dependency array method to solve the problem caused by code compression obfuscation. At this time, the invoke() is passed into an array. The last item of the array is the function to be actually executed, and the other items indicate the service name that needs to be injected into the function. The injector will inject dependent objects into the function in the order in the array.
With this method, the name of the parameter table to be injected is irrelevant:
//myfunc depends on '$http' and '$compile' services var myfunc = ['$http','$compile',function(p1,p2){//do sth. with p1($http),p2($compile)}];injector.invoke(myfunc);The instance of →_→ is injected with an array-dependent method. This time, the ezHello service instance is injected. You can change the parameter name to see if it affects the result?
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.