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

Understanding Dependency Injection in AngularJS

  Author : Shailendra Chauhan
Posted On : 08 Sep 2014
Total Views : 15,190   
Updated On : 08 Sep 2014

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
16 JAN
Developing Microsoft Azure Solutions (Online)
07:00 AM-09:00 AM IST/ 07:30 PM -09:30 PM CST
16 JAN
React with Redux (Online)
07:00 AM-08:30 AM IST
15 JAN
Big Data Hadoop Developer (Online)
05:00 PM to 06:30Pm IST / 06:30AM to 08:00AM CST
ASP.NET Core with Angular4 (Online)
09:00 Pm to 11:00 Pm IST (+5:30Gmt)
Big Data Hadoop Developer (Online)
07:00 AM - 08:30 AM IST(+5:30 GMT)
16 DEC
ASP.NET MVC with Angular4 (Classroom)
10:00 AM - 01::00 PM IST(+5:30 GMT)
12 DEC
ASP.NET MVC with Angular4 (Online)
09:00 PM - 11:00 PM IST(+5:30 GMT)
Developing Microsoft Azure Solutions (Online)
07:00 AM-09:00 AM IST / 08:30 PM Central Time
Angular2+4 with Firebase (Online)
10:30 AM-12:30 PM IST(+5.30 GMT)
27 NOV
ASP.NET Core (Online)
07:00 AM to 09:00 AM IST (+5:30 GMT)
11 NOV
ASP.NET MVC (Online)
08:00 AM-10:00 AM IST / 09:30 PM To 11:30 PM(CST)
16 OCT
ASP.NET Core (Online)
09:00 PM - 11:00 PM IST(+5:30 GMT)