Understanding Dependency Injection in AngularJS

12 dec. 2023
Advanced
23,1K Views
2 min read  

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. Exploring this pattern within an Angular Online Training could provide a comprehensive understanding of its implementation and advantages.

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) {
     $scope.name = 'dotnet-tricks.com';
     }
    </script>
    
  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) {
     myscope.name='dotnet-tricks.com';
    }
    
    MyController['$inject'] = ['$scope', '$location'];
    </script>
    

    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) {
     scope.name = 'dotnet-tricks.com';
     }];
     
     //OR
     var app=angular.module('app',[]);
     app.controller('MyController',['$scope','$location',function MyController (scope, location) {
     scope.name = 'dotnet-tricks.com';
     }]);
     </script>
    

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. Your valuable feedback, queries, or comments on this article are immensely appreciated, enhancing the learning experience of the Angular JS Training.

Share Article
About Author
Shailendra Chauhan (Microsoft MVP, Founder & CEO at Scholarhat by DotNetTricks)

Shailendra Chauhan is the Founder and CEO at ScholarHat by DotNetTricks which is a brand when it comes to e-Learning. He provides training and consultation over an array of technologies like Cloud, .NET, Angular, React, Node, Microservices, Containers and Mobile Apps development. He has been awarded Microsoft MVP 8th time in a row (2016-2023). He has changed many lives with his writings and unique training programs. He has a number of most sought-after books to his name which has helped job aspirants in cracking tough interviews with ease.
Learn to Crack Your Technical Interview

Accept cookies & close this