One of the AngularJS features that causes the most confusion is dependency injection (DI). It can be hard to figure out what DI is, how it works, and why it is useful. Even if you have encountered dependency injection in other frameworks like ASP.NET MVC, AngularJS takes an unusual approach and mixes in some features that are distinct from other languages. As you will learn an AngularJS application consists of different components: controllers, directives, filters, and so on.
Let’s try to understand each of them with an example. The place to start is to understand the problem that DI sets out to solve. Some of the components in an AngularJS application will depend on others. In following code sample, our controller needs to use the $scope
component, which allows it to pass data to the view. This is an example of a dependency—our controller depends on the $scope component to perform its work.
...
myApp.controller("dayCtrl", function ($scope) {
...
Dependency injection simplifies the process of dealing with dependencies—known as resolving a dependency—
between components. Without DI, We would have to locate $scope manually in code somehow, probably using global variables. It would work, but it wouldn’t be as simple as the AngularJS technique.
A component in an AngularJS application declares its dependencies by defining arguments on its factory function whose names match the components it depends on. Let’s consider following example, AngularJS inspects the arguments of my controller function, determines that it depends on the $scope
component, locates $scope
for us, and passes it as an argument to the factory function when it is invoked. To put it another way, DI changes the purpose of function arguments. Without DI, arguments are used to receive whatever objects the caller wants to pass, but with DI, the function uses arguments to make demands, telling AngularJS what building blocks it needs.
One of the interesting side effects of the way that DI works in AngularJS is that the order of the arguments always
matches the order in which the dependencies are declared. Consider this function:
...
myApp.controller("dayCtrl", function ($scope, $filter) {
...
Ok, now let’s talk about what is going on in above example. The first argument passed to the function will be the $scope
component, and the second will be the $filter
service object. Don’t worry about what the $filter
object does for now. What’s important is that the order in which you declare dependencies is honored by AngularJS. If we change the order of our code dependencies, e.g:
...
myApp.controller("dayCtrl", function ($filter, $scope) {
...
then AngularJS will pass me the $filter
object as the first argument and the $scope
object as the second.
In short, it doesn’t matter what order you define dependency-injected arguments. This may seem obvious, but it
isn’t the way that JavaScript usually works, and it can take some time to get used to. You may already have seen a
similar technique used in other programming languages—this is known as named parameters in C#, for example.
The main benefit of using dependency injection during development is that AngularJS takes care of managing
component and feeding them to your functions when they are needed. DI also provides benefits when testing your
code, because it allows you to easily replace real building blocks with fake or mock objects that let you focus on
specific parts of your code
As this article is also a part of Concepts while working with Angular JS Application . So, you must read other tutorials in order to complete understanding to developing Angular JS Application. Since, we are going to learn several concepts. That's why I have broken this article into several small article. Which allow us to easily understand several Angular JS features and concepts. Following are the list of articles.
Summary: You should read above mentioned articles in order to completely understanding to developing an Angular JS application. This article is a part of Concepts while working with Angular JS Application, which is divided in to pieces of tutorials in order to understand easily. I hope you will like this article and find it useful.