Designing and coding

Menu

Dependency Injection (DI) in {{AngularJS}} – Part 16

Dependency Injection (DI) is one of the hottest terms being used in software development nowadays. Most of the application developers talking about this and try using it in their applications. One of the key reasons Agile methodology, as it is used in almost every project in one or other way and DI easily fits into this model and help in achieving its goal. I have been getting many request to write about DI in AngularJS so let’s start exploring that.

Note – This post is a part of series of posts on AngularJS and it is 16th one. Click here to view all the post. Apart from that you can also use the navigation links for next and previous post in each post at the bottom to check all.

What is Dependency Injection?

DI is software design pattern that implements the Inversion of Control (IoC) to resolve the dependencies. It allows us to write loosely coupled system which enables us write the reusable components and helps to test the code properly without affecting or need of any other component. Injection refers passing the dependent object to the component based on available options. Normally there are three standard ways to inject the dependency.

Method Injection (Passing the dependency as parameter)

Property Injection (Setter)

Constructor Injection

Implementing DI in a Vanilla JavaScript

In this example, I have a folder watcher, which watches a folder and if there is some change happens then it calls the event logger which internally calls a MessageGenerator which returns a message and logs it.

I have a Message Generator which has a method GetMessage that returns a message. It is as

Here we are creating the all the dependencies inside the methods. Let’s implement DI and start from the lowest level method logMessage. In this method, instead of creating instance of MessageGenerator, we can pass it as parameter like

This must have make some idea of DI. Till now we have seen that how can we write a vanilla JavaScript code using DI. Now let’s jump to AngularJS.

Dependency Injection in AngularJS

As AngularJS is a complete JavaScript framework which provides many out of the box features. And on top of it the whole framework is DI friendly and allows us to inject dependency in different ways. We will discuss it in detail.

There are two key items when we implement dependency injection

1- Creating the instance. It could be created at while application initialization.

2- Passing the instance to the appropriate place where it can be used.

In Angular, $injector is key service which helps in creating the instances and passing to the appropriate places. We have already seen in one of our earlier posts, the services are kind of global singleton objects which can be reused across the application when needed. $injector helps in creating the instances of services and special objects.

1- There are two types of services in Angular. One is inbuilt services like $http, $q etc (which starts from $) and another custom services that we create and register with module.

2- Special objects are like directives, filters, controllers etc.

$injector itself does not create instance but it take the help of other component which creates the instance as $injector needs. And this component is called Provider. Provider is a kind of base mechanism to create the instance but there are four other types which are just a syntactic sugar on top of it.Internally they all use the provider only. Lets see all those

So we can see that Value, Factory, Service, Constant all are made on top of the Provider. We will discuss each in detail.

Value : It is the most simple way to provide a JavaScript object that can be used in the entire angular application. The passed value could be any primitive or non primitive type. It could be number, string, date array or any JavaScript object. As we discussed in many earlier posts, Module works as container in angular app so all the components must be registered with it. So same is true here as well. Lets see an Example

var myangularapp = angular.module('myangularapp', []);
// Providing a number and assigning to Value object
myangularapp.value("NumberofItems", 40);
// Providing a string and assigning to value object
myangularapp.value("ApplicationHeader", "AngularApp with DI using value");
// Providing a current date and assigning to value object
myangularapp.value("Person", { name: 'Tom', Age : 31, City : 'Florida' });
// Providing a current date and assigning to value object
myangularapp.value("Time", new Date());

Here we registered four objects of different type via value with module. Now these can be used in the entire application lets see

Here we can see that we have injected all four in controller and later used that in the view. So it is the simplest one.

Factory – Using Factory provider, we create a function which takes 0 to n parameters which can be dependent on others items which can be passed as parameters. Based on those parameters and via some business logic (if required), it creates an object and return it. One of the key points here, It is singleton and reusable component. We can use the object as parameter that we set as value above. Let’s see a example