Different Ways of Injecting Dependency in an AngularJS Application

In AngularJS, dependencies can be passed in three possible ways. They are as follows:

1. Passing a dependency as Function Arguments
   
   1. Passing dependencies as function arguments works perfectly fine until we deploy the application in the production with a minified version of the application.
      
   2. Usually to improve the performance, we minify the application in production, but passing the dependency as a function argument breaks when we minify the application.
      
   3. This is because the parameter name will change to a shorter alias name.
      

   app.controller("ProductController", function ($scope) {
        $scope.message = "Hey I am passed as function argument"
      });
          

2. Passing a dependency as Array Arguments
   
   1. Most popular way of passing a dependency in an AngularJS application is passing them as Array Arguments.
      
   2. When we pass a dependency as an Array Argument, the application does not break in production when we minify the application.
      
   3. We can do this in two possible ways.
      
      1. Using the Named function
         

         var app = angular.module('app', []);
           function ProductController($scope) {
               $scope.greet = "Infragistics";
           };
           app.controller('ProductController', ['$scope', ProductController]);
                       

         We are passing a dependency $scope object in the array along with the name of the controller function.    
         
         More than one dependency can be passed, separated by a comma.    
         
         For example, we can pass both $http service and the $scope object as dependencies  
         
         

         var app = angular.module('app', []);
                 function ProductController($scope,$http) {
               $scope.greet = $http.get("api.com");
             };
             app.controller('ProductController', ['$scope','$http', ProductController]);
                        

      2. Using the Inline Anonymous function
         

         You can pass dependencies as array arguments exactly the same way you pass them in named controller functions.
         
         We can pass dependencies in an inline function as array arguments   
         
         Keep in mind that dependencies injected as Array arguments work even if we minify the application.
         
         

         var app = angular.module('app', []);
           app.controller('ProductController', ['$scope', '$http', function ($scope,$http) {
               $scope.greet = "Foo is Great!"
           }]);
          

3. Passing a dependency using the $inject service
   

by using the $inject service. In doing so, we manually inject the dependencies. We can inject $scope object dependencies using the $inject service 
 function ProductController($scope){
     $scope.greet = "Foo is Not Great!5";
 }
 ProductController.$inject = ['$scope'];
 app.controller('ProductController', ProductController);

Using the $inject service also does not break the application when we minify the application for production. Most often we will find $inject services being used to inject dependencies in unit testing of the controller 

1. Create a Calculator service
   

   app.factory("Calculator", function () {
   return {
   add: function (a, b) {
   return a + b;
   }
   }
   });
   

2. Use a Calculator service inside CalController
   

   app.controller('CalController', CalController);
   function CalController($scope, Calculator) {
   $scope.result = 0;
   $scope.add = function () {
   alert("hi22");
   $scope.result= Calculator.add($scope.num1, $scope.num2);
   }
   };
   

3. At this point, the application should work because dependencies are passed as function arguments.
   
4. However, the application will break when we minify it.
   
5. So, let's go ahead and inject the dependencies using the $inject
   

   CalController.$inject = ['$scope', 'Calculator'];
   

6. On the view, the controller can be used as shown below:
   

   
   
   
   {{result}}