Dot Net Stuff

Understanding Dependency Injection in Angular JS


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.

Problems Solutions
Create an AngularJS module. Use the angular.module method.
Set the scope of a module. Use the ng-app attribute.
Define a controller. Use the Module.controller method.
Apply a controller to a view. Use the ng-controller attribute.
Pass data from a controller to a view. Use the $scope service.
Define a directive. Use the Module.directive method.
Define a filter. Use the Module.filter method
Use a filter programmatically. Use the $filter method.
Define a service. Use the Module.service, Module.factory, or Module.provider method.
Define a service from an existing object or value. Use the Module.value method.
Add structure to the code in an application. Create multiple modules and declare dependencies from the module referenced by the ng-app attribute.
Register functions that are called when modules are loaded. Use the Module.config and Module.run methods.

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.

Keen to hear from you...!

If you have any questions related to what's mentioned in the article or need help with any issue, ask it, I would love to here from you. Please MakeUseOf Contact and i will be more than happy to help.

About the author

Anil Sharma is Chief Editor of dotnet-stuff.com. He's a software professional and loves to work with Microsoft .Net. He's usually writes articles about .Net related technologies and here to shares his experiences, personal notes, Tutorials, Examples, Problems & Solutions, Code Snippets, Reference Manual and Resources with C#, Asp.Net, Linq , Ajax, MVC, Entity Framework, WCF, SQL Server, jQuery, Visual Studio and much more...!!!

blog comments powered by Disqus