AngularJS load view only after $resource has loaded - angularjs

Question

In my project I want the pages to load only after the requests on those pages are finished. For example I have a view that contains an ng-init to getArtistsInfo. I want that the page that contains that ng-init to be shown only after the request to getArtistsInfo have loaded:
<div class="row" ng-controller="ArtistController" ng-init="getArtistInfo(params)">
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img ng-src="{{ artist.image_url }}" alt="{{ artist.name }}">
</div>
<div class="col-lg-10 col-md-10 col-sm-9 col-xs-8">
{{ artist.bio }}
</div>
</div>
To make the request to the backend api I use resources:
angular.module('ArtistService', []).factory('Artist', ['$resource',
function ($resource) {
return $resource('/api/artists/:artistId', {
artistId: '#id'
},
{
getArtistInfo: {
method: 'GET',
url: '/api/artists/getArtistInfo'
}
});
}
]);
In controller I have:
angular.module('ArtistController', []).controller('ArtistController', ['$scope', 'Artist', '$location', '$routeParams',
function ($scope, Artist, $location, $routeParams) {
$scope.getArtistInfo = function (params) {
$scope.artist = Artist.getArtistInfo(params);
}
$scope.params = $routeParams;
}
]);
How can I make the whole page load only after I receive the response from the getArtistInfo request?
I have tried using resolve in $routeProvider but that doesn't seem to work.
Thank you very much!

Answer 1

You use the ngRoute module? In this case you can add a resolve parameter to load the artist info (see: https://docs.angularjs.org/api/ngRoute/provider/$routeProvider). If a resolve parameter returns a promise event ($resource does this), the router waits for the promise to be resolved, so in your case, it would wait until the artist info has been loaded:
$routeProvider.when('...', {
controller: 'ArtistController',
// ...
resolve: {
artist: ['Artist', '$route', function(Artist, $route) {
return Artist.getArtistInfo($route.current.params).$promise;
}]
}
})
and use the loaded artist in the controller:
.controller('ArtistController', [..., 'artist', function(..., artist) {
$scope.artist = artist; // This is the loaded artist
}]);