My app loads data from remote server and render it in view. I have done this by resolving a http request in state which pass the data to controller when resolved. Everything loads perfectly this way. However, ionic waits for the data before it renders the transition and view. This is not a good way in terms of UX. If I want to show the transition and loading screen first, and render the view when the data is ready. How can I change my code to do that?
Should I remove the resolve part from state and put it into my controller?
I am not quite sure what’s the best practice to deal with this as these state / ui-router / resolve are new to me. Appreciate if anyone could suggest a better solution for this issue.
Below are my current codes.
Service
app.service('productsService', function($q,$http) {
return {
getProducts : function() {
var dfd = $q.defer();
$http.get(ctrl_url + 'get_products').
success(function(result) {
dfd.resolve(result);
});
return dfd.promise;
}
}
});
Controller
app.controller("ProductListingCtrl", function(products){
this.products = products;
});
State
app.state('tabs.home.listing', {
url: '/listing',
views: {
"home-tab@tabs": {
templateUrl: "templates/cat_listing.html",
controller: "ProductListingCtrl as listing",
resolve: {
products: function(productsService) {
return productsService.getProducts();
}
}
}
}
});
Proposed solution: Controller with loading & resolve
app.controller("ProductListingCtrl", function($ionicLoading,productsService){
$ionicLoading.show({
template: 'Loading...'
});
this.products = productsService.getProducts();
** productsService.getProducts() returns a promise object, how can I resolve this in controller? **
}) ;