AngularJS RouteProvider Resolve Example

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

app.config(['$routeProvider', function($routeProvider) {
        $routeProvider
          .when('/resolveView', {
            templateUrl: 'resolveView.html',
            controller: 'resolveCtrl',
            resolve: {
                people: function(TestService) {
                    return TestService.getPeople();
                },
                cars: function(TestService) {
                    return TestService.getCars();
                }
            }}
          ).otherwise({
            redirectTo: '/resolveView'
          });
    }]);
    
app.controller('MainCtrl', function($scope, $location) {
});

app.controller('resolveCtrl', function($scope, people, cars) {
  $scope.people = people;
  $scope.cars = cars;
});

angular.module('plunker')
.factory('AuthenticationService', function($http, $timeout, $q) {

  var deferred = $q.defer();

  return {
    getToken: function() {
      
      // if (!expired) {
      //    return deferred.resolve($window.localStorage.getItem('access_token'));
      // }
      
      
      // else refresh token and return it 
      // I simulate a $http API
      $timeout(function(){}, 2000).then(function(refresh_token){
        // we suposse that refresh_token is that string
        deferred.resolve('ThiSisAnewRefreshedToken');
      });
      
      return deferred.promise;
    }
  };

});


angular.module('plunker')
.factory('TestService', function($q, $http, $timeout, AuthenticationService) {
  
  var deferred = $q.defer();
  var token = AuthenticationService.getToken().then(function(data){
    deferred.resolve(data);
    return deferred.promise;
  });
  
  return {
    getPeople: function() {
        console.log('TOKEN evaluated?', token)
        
        // simulate that server accepts the refreshed token
        if(token === "ThiSisAnewRefreshedToken") {
          return $http.get('people.json');
        }
    },
    getCars: function() {
        console.log('TOKEN evaluated?', token)
        
        // simulate that server accepts the refreshed token
        if(token === "ThiSisAnewRefreshedToken") {
          return $http.get('cars.json');
        }
    }
  }
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js" data-semver="1.0.7"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
   
   <div ng-view></div>
    
  </body>

</html>

/* Put your css in here */

a {
  color: blue;
  cursor: pointer;
  text-decoration: underline;
}

ul li  ul {
  display: none;
}

.open { 
   display: block; 
}

<h2>Scenario:</h2>
<p>OAuth server and an auth token expired. So I need to refresh it BEFORE of doing the $http call to get the desired resource. I tried to recreate that async calls through $timeout, becuase it is also async.</p>

<h2>Issue:</h2>
<p>When token is evaluated in lines 70 & 78, it already should be the refreshed token expected: <strong>ThiSisAnewRefreshedToken</strong> instead of a promise yet, as you can see in the console.log</p>

<h3>PEOPLE</h3>
<pre>{{people.data | json}}</pre>

<h3>CARS</h3>
<pre>{{cars.data | json}}</pre>

[{
  "id" : 1,
  "name": "Ben"
},
{
  "id" : 2,
  "name": "Jessie"
},
{
  "id" : 3,
  "name": "Laney"
},
{
  "id" : 4,
  "name": "Lincoln"
}]

[{
  "id" : 1,
  "brand": "Mercedes"
},
{
  "id" : 2,
  "name": "Ferrari"
},
{
  "id" : 3,
  "name": "Subaru"
},
{
  "id" : 4,
  "name": "Toyota"
}]