Services

<DOCTYPE html>
<html>
    <head>
        <meta CHARSET="UTF-8">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
        <h2>Scope</h2>
        <fieldset>
            <legend>
                Location
            </legend>
            <div>
                Absolute URL {{current_url}} <br/>
                Protocol {{protocol}} <br/>
                Port {{port}} <br/>
                Host {{host}} <br/>
            </div>
        </fieldset>
        <fieldset>
            <legend>
                Timeout
            </legend>
            <div>
                {{greeting}}
            </div>
        </fieldset>
        <fieldset>
            <legend>
                Time Interval
            </legend>
            <div>
                {{counter}}
            </div>
        </fieldset>
        <fieldset>
            <legend>
                Custom Service
            </legend>
            <div>
                Square of 5 is {{square}} <br/>
                Cube of 5 is {{cube}} <br/>
            </div>
        </fieldset>
        <fieldset>
            <legend>
                HTTP Service
            </legend>
            <div>
                {{ajax_response}}
            </div>
        </fieldset>
    </body>
    <script>
        var app = angular.module("myApp", []);

        app.service('square_cube', function () {
            this.square = function (x) {
                return x * x;
            }

            this.cube = function (x) {
                return x * x * x;
            }
        });

        app.controller("myCtrl", function ($scope, $location, $timeout, $interval, square_cube, $http) {

            $scope.current_url = $location.absUrl();
            $scope.protocol = $location.protocol();
            $scope.port = $location.port();
            $scope.host = $location.host();

            $timeout(function () {
                $scope.greeting = "Hello India"
            }, 5000);

            $scope.counter = 0;

            $interval(function () {
                $scope.counter = $scope.counter + 1;
            }, 1000);

            $scope.square = square_cube.square(5);
            $scope.cube = square_cube.cube(5);

            $http.get('ajax_response.html').then(function (response) {
                $scope.ajax_response = response.data[1].name;
            });

        });
    </script>
</html>
Leave a Reply Cancel reply
