In AngularJS, dependencies can be passed in three possible ways. They are as follows:
- Passing a dependency as Function Arguments
- Passing dependencies as function arguments works perfectly fine until we deploy the application in the production with a minified version of the application.
- 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.
- 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" }); - Passing dependencies as function arguments works perfectly fine until we deploy the application in the production with a minified version of the application.
- Passing a dependency as Array Arguments
- Most popular way of passing a dependency in an AngularJS application is passing them as Array Arguments.
- When we pass a dependency as an Array Argument, the application does not break in production when we minify the application.
- We can do this in two possible ways.
- 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]); - We are passing a dependency $scope object in the array along with the name of the controller function.
- 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!" }]); - You can pass dependencies as array arguments exactly the same way you pass them in named controller functions.
- Using the Named function
- Most popular way of passing a dependency in an AngularJS application is passing them as Array Arguments.
- 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
- Create a Calculator service
app.factory("Calculator", function () { return { add: function (a, b) { return a + b; } } }); - 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); } }; - At this point, the application should work because dependencies are passed as function arguments.
- However, the application will break when we minify it.
- So, let's go ahead and inject the dependencies using the $inject
CalController.$inject = ['$scope', 'Calculator'];
- On the view, the controller can be used as shown below:
{{result}}
