Understanding Dependency Injection in AngularJS
Dependency Injection (DI) is a software design pattern that allows you to remove hard coded dependencies between software components. It allows you to develop loosely coupled components by injecting dependencies either at compile time or run time.
AngularJS comes with a built-in dependency injection mechanism. Using Angular you can divide your apps into multiple components which can be inject into each other by using AngularJS dependency injection mechanism.
Methods to inject dependency in AngularJS
There are three ways to inject dependencies into your AngularJS components:
The function parameter
This is the easiest way to inject dependencies into your code. You have to just pass the dependencies as function parameters.
In this method, Angular read the name of the passing parameters, and if those names are already registered as services, it will call your function when it’s invoked with those parameters.
The $inject property
The $inject property is an array of service names to inject. Hence defined your dependencies within $inject array. Also, the order of the values in the $inject array must match the order of the parameters to inject.
In the above code snippet, the $scope will be injected into myscope and $location into mylocation. Hence, parameters matching will be based on the order of values in the $inject array and it doesn’t matter what is the name of the parameters.
The inline array
You can also inject dependencies by using an inline array which will contain the dependencies.
AngularJS has the following core types of objects and components which can be injected into each other using AngularJS dependency injection mechanism.
What do you think?
I hope you will enjoy the AngularJS Dependency Injection mechanism while developing your app with AngularJS. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.