Start With AngularJS: Part 6

<!DOCTYPE html>
<html>
<head>
    <title>Provider Demo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script>
        var app = angular.module('app', []);
        app.config(["myProviderServiceProvider", function(myProviderService) {
            myProviderService.set("shiva", "shukla");
        }]);
        app.controller("MemberController", function($scope, myProviderService) {
            $scope.FirstName = myProviderService.FirstName();
            $scope.LastName = myProviderService.LastName();
            $scope.FullName = myProviderService.FullName;
        });
        app.provider('myProviderService', function() {
            var myFName = "Shiva";
            var myLName = "Shukla";
            return {
                set: function(fName, lName) {
                    myFName = fName;
                    myLName = lName;
                },
                $get: function() {
                    function getFName() {
                        return myFName;
                    }
                    function getLName() {
                        return myLName;
                    }
                    return {
                        FullName: myFName + " " + myLName,
                        FirstName: getFName,
                        LastName: getLName
                    };
                }
            };
        });
    </script>
</head>
<body ng-app="app">
    <p>AngularJS Provider</p>

    <p ng-controller="MemberController">
        <p>
            FirstName: {{FirstName}} and LastName : {{LastName}}
        </p>
        <p>
            FullName: {{FullName}}
        </p>
    </p>
</body>
</html>

Output

When to use?

When you need to provide module-wise configuration for your service object before making it available.

Value

You can also register a function as a value. Values are typically used as configuration which is injected into factories, services, or controllers.

<!DOCTYPE html>
<html>

<head>
    <title>Value Demo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script>
        var app = angular.module('app', []);
        app.controller("MemberController", function ($scope, numberValue, stringValue, objectValue) {
            $scope.numberValue = numberValue;
            $scope.stringValue = stringValue;
            $scope.objectValue = objectValue;
        });
        app.value("numberValue", 1000);
        app.value("stringValue", "Hello Word");
        app.value("objectValue", {
            objVal1: true,
            objVal2: "My object Value"
        });
    </script>
</head>

<body ng-app="app">
    <p>AngularJS Value</p>

    <p ng-controller="MemberController">
        <p>
            number Value: {{numberValue}}
            <br/> string Value: {{stringValue}}
            <br/> object Value : {{objectValue.objVal1}} and {{objectValue.objVal2}}
        </p>
    </p>
</body>

</html>

Output

Constant

It is like a value. Register a constant service, such as a string, a number, an array, an object or a function, with the $injector. Unlike value it can be injected into a module configuration function and it cannot be overridden by an Angular decorator.

<!DOCTYPE html>
<html>

<head>
    <title>Constant Demo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script>
        var app = angular.module('app', []);
        app.controller('MemberController', function($scope, myConfig) {
            $scope.myConfig = myConfig;
        });
        app.constant('myConfig', {
            flag: true,
            settings: 'default'
        });
    </script>
</head>

<body ng-app="app">
    <p>AngularJS Constant</p>
    <p ng-controller="MemberController">
        <p>
            flag: {{myConfig.flag}}
            <br/> settings: {{myConfig.settings}}
        </p>
    </p>
</body>

</html>

Output

Decorator

A decorator can modify or encapsulate other providers. There is one exception and that a constant cannot be decorated.

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

app.value('movieTitle', 'Airlift');

app.config(function ($provide) {
    $provide.decorator('movieTitle', function ($delegate) {
        return $delegate + ' – The rising';
    });
});

app.controller('MyController', function (movieTitle) {
    expect(movieTitle).toEqual('Airlift – the rising');
});

Summary

• All the providers are instantiated only once. That means that they are all singletons.
• All the providers except Constant can be decorated.
• A constant is a value that can be injected everywhere. The value of a constant can never be changed.
• A value is just a simple injectable value.
• A service is an injectable constructor.
• A factory is an injectable function.
• A decorator can modify or encapsulate other providers except a constant.
• A provider is a configurable factory.