Angular: Empty Fiddle

http://angularjs.org/

by denisonluz

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<body ng-app='myApp' ng-controller='AppCtrl'>
 
  <script id='view/app.html' type='text/ng-template'>
 
    <h1>{{ feedback.message }}</h1>
 
  </script>
 
  <div ng-view></div>
 
</body>

CSS

h1 {
    padding: 20px;
    font-size: 20px;
}

JavaScript

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

myApp.config(function ($routeProvider) {
    $routeProvider.when('/', {
        controller: 'ViewCtrl',
        templateUrl: 'view/app.html',
        resolve: {
            loadData: function (myFirstService) {
                return myFirstService.start();
            }
        }
    })
});

var appCtrl = myApp.controller('AppCtrl', function ($scope, $rootScope) {
    $rootScope.$on('$routeChangeError', function (event, current, previous, rejection) {
        console.log('Some service has failed: ', rejection);
    });
});

var viewCtrl = myApp.controller('ViewCtrl', function ($scope, $route) {
    $scope.feedback = {
        message: 'All the services are working!'
    }
});

myApp.factory('myFirstService', ['$q', '$timeout', 'mySecondService', function ($q, $timeout, mySecondService) {
    var defer = $q.defer();

    return {

        start: function () {
            $timeout(function () {
                defer.resolve('FIRST Service \'myFirstService\' Failed');
            }, 2000);
            return mySecondService.start().then(function () {
                return defer.promise
            });
        }
    }
}]);

myApp.factory('mySecondService', ['$q', '$timeout', function ($q, $timeout) {
    var defer = $q.defer();

    return {
        start: function () {
            $timeout(function () {
                defer.resolve('second Service Failed');
            }, 2000);
            return defer.promise;
        }
    }
}]);