Resolve angular trouble

Question

I am following this example, about how to use resolve http://blog.brunoscopelliti.com/show-route-only-after-all-promises-are-resolved/

But it does not work, the view is not showing. Below are the essential parts of the code I use:

angular.module('fifaApp', ['ngRoute'])
  .config(function($routeProvider) {

    $routeProvider.when('/', {
      templateUrl: 'views/team_list.html',
      controller: 'TeamListCtrl as teamListCtrl',
      resolve: {
        teams: function (FifaService) {
          return FifaService.getTeams();
      }
    }
    })
//For each route, we can decide to include the controller directly
//in the HTML or using the controller configuration in the route.
    .when('/login', {
      templateUrl: 'views/login.html'
    })
    .when('/team/:code', {
      templateUrl: 'views/team_details.html',
      controller:'TeamDetailsCtrl as teamDetailsCtrl',
      resolve: {
        //The auth resolve function returns a promise.
        auth: ['$q', '$location', 'UserService',
          function($q, $location, UserService) {
             return UserService.session().then(
               function(success) {},
               function(err) {
                  $location.path('/login');
                  $location.replace();
//reject the promise in the case of an error,
// because we still want the promise to fail.
//If we don’t $q.reject, 
//that tells AngularJS that the error was handled successfully                  
                  return  $q.reject(err);
             });
        }]
      }
    });
    $routeProvider.otherwise({
      redirectTo: '/'
    });
  });

angular.module('fifaApp')
  .factory('FifaService', ['$http',
    function($http) {
      var sdo = {
        getTeams: function() {
          var promise = return $http.get('/api/team');
          promise.success(function(response) {
            return response;
          });
          return promise;
      },

        getTeamDetails: function(code) {
          var promise = return $http.get('/api/team/' + code);
          promise.success(function(response){
            return response;
          });
          return promise;
        }
      }
      return sdo;
  }])

.controller('TeamListCtrl', ['FifaService','teams',
    function(FifaService,teams) {
      var self = this;
      self.teams = teams.response;

  }])

Am I missing something? Best Regards

Answer 1

Maybe use an IDE with javascript syntax support. You have some glitches...

angular.module('fifaApp', ['ngRoute'])
  .config(function($routeProvider) {

    $routeProvider.when('/', {
      templateUrl: 'views/team_list.html',
      controller: 'TeamListCtrl as teamListCtrl',
      resolve: {
        teams: function(FifaService) {
          return FifaService.getTeams();
        }
      }
    }) 
  }); // <-- missing brackets

angular.module('fifaApp')
  .factory('FifaService', ['$http',
    function($http) {
      var sdo = {
        getTeams: function() {
          var promise = $http.get('/api/team'); // <-- remove return statement
          promise.success(function(response) {
            return response;
          });
          return promise;
        },

        getTeamDetails: function(code) {
          var promise = $http.get('/api/team/' + code); // <-- remove return statement
          promise.success(function(response) {
            return response;
          });
          return promise;
        }
      }
      return sdo;
    }
  ])

.controller('TeamListCtrl', ['FifaService', 'teams',
  function(FifaService, teams) {
    var self = this;
    self.teams = teams.response;

  }
]);