AngularJS Services 2

AngularJS 1.2.6 Services

by maddin

HTML

<script src="http://code.angularjs.org/1.2.6/angular.js"></script>
<script src="http://code.angularjs.org/1.2.6/angular-resource.js"></script>
<div class="container" ng-controller="MyCtrl">
    <div class="myname">Hello, {{name}}!</div>
    <div class="mytime">The time is {{time}}.</div>
    <div class="myvalue">The Value: {{theValue}}</div>
</div>

CSS

body {
    font-family: Verdana;
}

body .container {
    margin-top: 1em;
    margin-left: 1em;
}

body .container .myname {
    font-weight: bold;
    font-size: large;
}

body .container .mytime {
}

body .container .myvalue {
}

JavaScript

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

angular.module('myApp').service('TimeService', function($q, $resource, OtherService) {
    var getResult = function() {
        var fullResult = $q.defer();
        $resource('http://time.jsontest.com/').get().$promise.then(function(data) {
            var promisses = [];
            for (var i = 0; i < 2; i++) {
                var ires = $q.defer();
                promisses.push(ires);
                OtherService.get({val: data.milliseconds_since_epoch+i}).$promise.then(function(keyValue) {
                    //console.log(keyValue);
                    data['key'+keyValue.key] = keyValue.key;
                    ires.resolve(keyValue);
                });
            }
            $q.all(promisses).then(function() {
                fullResult.resolve(data);
            });
        });
        return fullResult.promise;
    };
    return {
        getResult: getResult
    };
});

angular.module('myApp').service('OtherService', function($resource) {
    return $resource('http://echo.jsontest.com/key/:val', {val: '@val'});
});

angular.module('myApp').controller('MyCtrl', function($scope, TimeService, OtherService) {
    $scope.name = 'Mars';
    TimeService.getResult().then(function(data) {
        $scope.time = data.date;
        $scope.theValue = data;
    });
});