(v) Angularjs-Dependency Injection

Source: Internet
Author: User

How do I find the API?

ANGULARJS provides some functionality for encapsulation, but when you try to access these features through the global object angular, you find that it is very different from the libraries you have encountered before.

For example, Angularjs exposes a global object: angular, which also encapsulates an Ajax call, provides a $http object, but when accessing angular. $http, you can't find it.

Dependency Injection/di

In fact, ANGULARJS organizes all of the functional components in a dependency injection mode in which all components must be accessed through the container, which results in the ANGULARJS that you must pass an intermediary to get the instance object of a component

1 var injector = Angular.injector ([' ng ']); 2 injector.invoke (function($http) {3     //dosth. With $http  4 });

Example: Printing $http code

1 angular.element (document). Ready (function() {2     angular.injector (["ng"]) . Invoke (function($http) {3         // $http object is converted to a string to display 4         var e = Document.queryselector ("#logger"); 5         angular.element (E). Text ($http. toString ()); 6     }); 7 });
<HTML><Head>    <Scriptsrc= "Angular.js"></Script></Head><Body>    <!--The contents of $http are shown here -    <DivID= "Logger"></Div></Body></HTML>

Injector/injector

Injector is the key of ANGULARJS framework implementation and application development, which is the implementation of a DI/IOC container.

Angularjs the functions into different types of components, each of which has a collectively known as the provider/provider.

ANGULARJS components cannot be called directly to each other, and one component must pass the injector to invoke another component. The benefit is that the components are decoupled from one another, and the entire life cycle of the object is managed by the injector.

Registering Service Components

From Injector's point of view, 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 are typically identified by a string, such as "$http" represents the HTTP invocation service, "$rootScope" represents the root scope object, "$compile" represents the build service ...

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

The combination of name and class function information is called a recipe. A centralized recipe library is maintained in injector 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.

Example: Registering a Hello service on the test module

//Registering a Hello service on the test moduleAngular.module ("Test", []). Provider ("Hello",function(){    //$get method is a class factory that returns an instance of the service     This. $get =function(){        return"Hello,world!"; };}); Angular.element (document). Ready (function() {Angular.injector (["Ng", "Test"]). Invoke (function(hello) {//turns the Hello instance object into a string display        varE = Document.queryselector ("#logger");    Angular.element (E). text (hello); });});
Get the Injector Object

Create a new injector

Angular.injector (modules, [STRICTDI]);

Get an injector that has already been created

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

Invoking the API via the injector

The injector has two methods to make API calls: Invoke () and get ().

Invoke ()

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

1 angular.injector ([' ng '])2 . Invoke (function($http) {3     // Do sth. with $http 4 });

Get ()

Get () method to get the service instance with the specified name:

1 var my$http = Angular.injector ([' ng ']). Get (' $http '); 2 // Do sth. with My$http

There are two ways to tell the injector that a service object needs to be injected: parameter name injection and dependency array injection.

Parameter name injection:

Converts the function definition to be injected into a string and checks its parameter table with a regular expression

1 // MyFunc This function is dependent on the "$http" service through the parameter table 2 var function ($http) {3     // Do sth. with $http 4 }; 5 Injector.invoke (MYFUNC); // the definition of MyFunc will be converted to a string for parameter name checking

Dependency array Injection

The last item in the array is the actual function to execute, and the other items indicate the name of the service that needs to be injected into the function. The injector will inject the dependent object into the function in the order of the array, in turn

1 // MyFunc relies on "$http" and "$compile" services 2 var myfunc = ["$http", "$compile",function(P1,P2) {3     //dosth. With P1 ($http), p2 ($compile)4}]; 5 Injector.invoke (MYFUNC);

(v) Angularjs-Dependency Injection

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.