Dependency injection

Angular makes use of dependency injection everywhere. Dependency injection is when a function does not initialize the dependencies it needs. Instead, they are injected into the function as parameters. For example, when a module needs a route provider, it asks for one. The module does not care how or when the route provider was created; it just wants a reference.

You actually use the injector in everything you do in Angular. Angular just does it for you. We will look at $injector and understand how it works but, most likely, you will not need to use these functions.

Dependency injection in Angular

We will quickly cover the common ways that objects are injected into functions in Angular. Using a controller as an example, we will cover the two most common methods. Both of these are using Angular's injection behind the scenes:

  • Defining the variables in a function: You just have to pass the name of the object you need injected. Here is an example that uses $scope and a service:
    firstModule.controller('DIController', function ($scope, customService) {
  //$scope and customService are available here
  console.log($scope);
  console.log(customService);
});
  • Using an array to list the dependencies: You can get the exact same result using an array. The elements of the array will be the objects you need as strings. Finally, you will just need to have a function as the last element in the array. The function can even rename the variable if needed. Here is the same example in the array format:
    firstModule.controller('DIController', ['$scope', 'customService', function (newScope, custom) {
  // newScope and custom are available here
  console.log(newScope);
  console.log(custom);
}]);

Note

Only the array format is minification safe. The first function will not work once the source has been minified.

injector

Use this to get an Angular injector that you can invoke:

angular.injector(modules)

Parameters

  • The modules(array) array is a list of the modules you want to load. You must include ng.

Return value

This returns an injector object. See $injector section.

Description

You can create this object to use Angular's injector object. List out the references you want and then invoke your function.

Here is an example that gets a reference to the $http service:

var injector = angular.injector(['ng']);
var injectTest = function ($http) { console.log($http); };
injector.invoke(injectTest);

$injector

You will very rarely ever need to create an injector in Angular. It will be provided for you. You can get a reference to the injector by injecting it or retrieving it from a current module. Here are examples for both:

  • You can get a reference from any element inside of the module:
    var injector = angular.element(document.body).injector();
  • You can have it injected into a function. Here is an example using config:
    firstModule.config(function ($routeProvider, $injector) {
  console.log($injector);
});

Methods

  • annotation: This returns an array of the objects that will be injected
  • get(name): This returns the service with its name
  • invoke(function): This will execute the function injecting the dependencies
  • has(name): This allows you to determine whether a service exists

Description

Angular will do this automatically for you, but it is always good to have an idea of what is happening. This is especially true with something that works just like $injector. Each time a function executes with dependencies, Angular will invoke the function from the injector, sending the correct parameters if they have been created and registered.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.221.126.56