Please enable Javascript to correctly display the contents on Dot Net Tricks!

Understanding Dependency Injection in AngularJS

  Author : Shailendra Chauhan
Updated On : 08 Sep 2014
Total Views : 10,416   

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:

  1. 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.

    <script type="text/javascript">
    function MyController ($scope,$location) {
     $ = '';
  2. 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.

    <script type="text/javascript">
    var MyController = function(myscope, mylocation) {'';
    MyController['$inject'] = ['$scope', '$location'];

    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.

  3. The inline array

    You can also inject dependencies by using an inline array which will contain the dependencies.

    <script type="text/javascript">
    var MyController = ['$scope','$location',function MyController (scope, location) { = '';
     var app=angular.module('app',[]);
     app.controller('MyController',['$scope','$location',function MyController (scope, location) { = '';

AngularJS has the following core types of objects and components which can be injected into each other using AngularJS dependency injection mechanism.

  1. Value

  2. Factory

  3. Service

  4. Provider

  5. Constant

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.

Free Interview Books
PPC Marketing (offline)

Sat, Sun 09:00 AM-10:30 AM IST

Know More
26 OCT
ASP.NET MVC with AngularJS Development (online)

MON-FRI 07:30 AM-09:00 AM IST

Know More
24 OCT
NodeJS Development (online)

MON-FRI     06:00 AM - 07:30 AM IST

24 OCT
MEAN Stack Development (online)

MON-FRI     06:00 AM -07:30 AM IST

24 OCT
AngularJS Development (online)

MON-FRI     08:00 PM-09:30 PM IST.

22 OCT
ASP.NET MVC with AngularJS Development (offline)

SAT,SUN     08:00 AM-09:30 AM

12 OCT
ASP.NET MVC with AngularJS Development (online)

Mon-Fri     09:30 PM-11:00 PM IST

17 SEP
ASP.NET MVC with AngularJS Development (offline)

SAT,SUN     05:00 PM-06:30 PM IST

NodeJS Development (offline)

Sat, Sun     11:00 AM-12:30 PM IST


Professional Speaks