Angular JS – Services

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Angular JS</title>
    <style>
        [ng-cloak],
        [data-ng-cloak],
        .ng-cloak {
            display: none !important;
        }
    </style>
</head>
<body>
    <div ng-app="myApp" ng-cloak>
        <div ng-controller="myController">
            <h1>Factory</h1>
            <p>The counter is {{ factory.counter }}</p>
            <button ng-click="factory.incrementCounter()">Increment counter</button>
            <br />
            <h1>Service</h1>
            <p>The counter is {{ service.counter }}</p>
            <button ng-click="service.incrementCounter()">Increment counter</button>
            <br />
            <h1>Provider</h1>
            <p>The counter is {{ provider.counter }}</p>
            <button ng-click="provider.incrementCounter()">Increment counter</button>
        </div>
    </div>
 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
 
    <script>
 
        //-----------------------------
        //Application Main
        //(should be in "/app/run.js")
        //-----------------------------
 
        angular.module("myApp", ["myApp.controllers", "myApp.services"]).config(
            ["myCounterProviderProvider", function (myCounterProviderProvider) {
 
                //To refer the myCounterProvider provider
                //here we have to add the "Provider" suffix
                myCounterProviderProvider.incrementSize = 3;
            }]);
        angular.module("myApp.controllers", []);
        angular.module("myApp.services", []);



        //------------------------------------------------------
        //Application Controllers
        //(should be in "/app/controllers/<controllerName>.js")
        //------------------------------------------------------
 
        angular.module("myApp.controllers").controller("myController",
            ["$scope", "myCounterFactory", "myCounterService", "myCounterProvider",
            function ($scope, myCounterFactory, myCounterService, myCounterProvider) {
                $scope.factory = myCounterFactory;
                $scope.service = myCounterService;
                $scope.provider = myCounterProvider;
            }]);



        //------------------------------------------------
        //Application services
        //(Should be in "/app/services/<serviceName>.js")
        //------------------------------------------------
 
        /*
        Services are singleton objects shared between all the application's controllers.
        They can be required as dependencies by each module in the same way they require
        the $scope or the $http objects (they are dependencies as well). Angular use his
        dependancy injection system to provide them.
        */
 
        /*
        Factory services return an object
        */
        angular.module("myApp.services").factory("myCounterFactory", [function () {
            return new function () {
                var self = this;
 
                self.counter = 0;
                self.incrementCounter = function () {
                    self.counter++;
                };
            };
        }]);
 
        /*
        Service services define an object
        */
        angular.module("myApp.services").service("myCounterService", [function () {
            var self = this;
 
            self.counter = 0;
            self.incrementCounter = function () {
                self.counter++;
            };
        }]);
 
        /*
        Provider services are the most complex service type. The other types are derived
        from this one. Requiring modules will not receive, as dependancy, the whole provider
        object, but just the $get() method's result. The whole object will be accessible to
        the app.config() method, from where is possible to configure the provider's behavior
        (we need to add the "Provider" suffix to the provider's name). Providers are the
        only service type which can be referred by the app.config() method.
        */
        angular.module("myApp.services").provider("myCounterProvider", [function () {
            var self = this;
            self.incrementSize = 1;
 
            self.$get = function () {
                return new function () {
                    var self2 = this;
 
                    self2.counter = 0;
                    self2.incrementCounter = function () {
                        self2.counter += self.incrementSize;
                    };
                };
            };
        }]);
    </script>
</body>
</html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s