AngularJS Dependency Injection

AngularJS Dependency Injection

Dependency Injection is software design pattern where your application can be divide into multiple different types of components that can be injected into each other as dependencies.

AngularJS provides a supreme Dependency Injection mechanism.

Dependency injection allows you to specify only what you need in your controller, factory, service, etc.

It provides following core components which can be injected into each other as dependencies.

• factory
• value
• constant
• service
• provider

1. factory – This function which returns value on demand when a service or controller needed.

Syntax: module.factory( 'factoryName', function );

<script>

    var myApp = angular.module('myApp', []);

    myApp.factory('messFactory', function () {

        var successMessage = function () {

            return 'Success message';

        };

        var alretMessage = function () {

            return 'Alert message';

        };

        var warningMessage = function () {

            return 'Warning message';

        };

        return {

            alretMessage: alretMessage,

            warningMessage: warningMessage,

            successMessage: successMessage

        };

    });

</script>

You can inject factory to controller as below code.

<script>

    app.controller('empController', ['$scope', 'messFactory', function ($scope, messFactory) {

        $scope.message = messFactory.successMessage() + ' , ' + messFactory.alretMessage() + ' , ' + messFactory.warningMessage();

    }]);

</script>

2. value – It is a JavaScript object and used in config phase to passes values to controller.

<script>

    var myApp = angular.module("myApp", []);

    myApp.value("DefalutAge", 18);

    //inject the value  into the controller

    myModule.controller("EmpController", function ($scope, DefalutAge) {

        $scope.Age = DefalutAge

    });

</script>

3. Constant – constants is used during config phase to passes values.

 
mainApp.constant("constantName", "constant value");

4. service – It is a singleton object and defined by service() function that have lots of functions to execute specific tasks.

Syntax: module.service( 'serviceName', function );

<script>

    //define a module

    var myApp = angular.module("myApp", []);

    ...

    //create a service which defines a method square to return square of a number.

    myApp.service('CalculationService', function(){

        this.square = function(a) {

            return a*a;

    };

    });

</script>

You can inject service to controller as below code.

<script>

    //inject the service "CalcService" into the controller

    var myApp = angular.module("myApp", []);

    myApp.controller('CalcController', function($scope, CalculationService) {

        $scope.square = function(number) {

            $scope.result = CalculationService.square($scope.number);

        }

    });

</script>

5. provider – provider is used during config phase to create services, factory etc.It is used with get() function to return the value/service/factory.It is used to create factory, service etc.

Syntax:  module.provider( 'providerName', function );

Example:

<script>

    var myApp = angular.module("myApp", []);

    myApp.config(function ($provide) {

        $provide.provider('CalculationService', function () {

            this.$get = function () {

                var factory = {};

                factory.addition = function (a, b) {

                    return a + b;

                };

                factory.Substraction = function (a, b) {

                    return a - b;

                };

                factory.multiply = function (a, b) {

                    return a * b;

                };

                factory.divide = function (a, b) {

                    return a/b;

                };

                return factory;

            };

        });

    });

</script>