user1665355 user1665355 - 5 months ago 14
AngularJS Question

ng-view not showing with resolve

I am using resolve in this way (seems to be the standard way to do this way). But the view is not showing. Any ideas what I missed? Best Regards

angular.module('fifaApp', ['ngRoute'])
.config(function($routeProvider) {
$routeProvider.when('/team/:code', {
templateUrl: 'views/team_details.html',
controller:'TeamDetailsCtrl as teamDetailsCtrl',
resolve: {
auth: function(UserService){
return UserService.session();
}
}
});
});

.factory('UserService', ['$http', function($http) {
var service = {
isLoggedIn: false,
session: function() {
var promise = $http.get('/api/session')
promise.success(function(response) {
service.isLoggedIn = true;
return response;
});
return promise;
};
return service;
};
}]);

.controller('MainCtrl', ['$scope','auth',
function($scope,auth) {
$scope.auth = auth.response;
}]);


And html:

<div class="team-details-container card">
<div class="team-logo">
<img title="Image Courtesy: Wikipedia"
ng-src="{{teamDetailsCtrl.team.logoUrl}}">
</div>
<div class="name">
<span ng-bind="teamDetailsCtrl.team.name"></span>
(<span ng-bind="teamDetailsCtrl.team.fifaCode"></span>)
</div>
<div class="detail">
<div class="label">
<span>Nickname</span>
</div>
<div class="title">
<span ng-bind="teamDetailsCtrl.team.nickname"></span>
</div>
</div>
<div class="detail">
<div class="label">
<span>FIFA Ranking</span>
</div>
<div class="title">
<span ng-bind="teamDetailsCtrl.team.fifaRanking">
</span>
</div>
</div>
<div class="detail">
<div class="label">
<span>Association</span>
</div>
<div class="title">
<span ng-bind="teamDetailsCtrl.team.association"></span>
</div>
</div>
<div class="detail">
<div class="label">
<span>Head Coach</span>
</div>
<div class="title">
<span ng-bind="teamDetailsCtrl.team.headCoach"></span>
</div>
</div>
<div class="detail">
<div class="label">
<span>Captain</span>
</div>
<div class="title">
<span ng-bind="teamDetailsCtrl.team.captain"></span>
</div>
</div>
</div>

Answer

Add $q in service.

.factory('UserService', ['$http' , '$q', function($http, $q) {
    var service = {
      isLoggedIn: false,
      session: function() {
        var deferred = $q.defer();
        var promise = $http.get('/api/session')
        promise.success(function(response) {
            service.isLoggedIn = true;
            deferred.resolve(response);
        });

        return deferred.promise;
    };
    return service;
  };
 }]);
Comments