0

I there,

I'm building an Angular.js app with the help of Restangular and angular-local-storage. I need to retrieve some data from a RESTFull service server and assign it to a $scope variable.

I would like to know how could I wait for all that data to load before loading it to my view (html).

Here's what I've done so far:

app.controller('InventoryController', function($scope, inventoryService) {                        
  $scope.productList = inventoryService.getProduces();
  console.log($scope.productList); // At that point, $scope.productList is null
});

app.service('inventoryService', function(entityService, browserStorageService) {
  entityService.allUrl('product', entityService.getBaseUrl).getList().then(function(data){
    console.log(data); // The data variable is not null here.
    browserStorageService.set('producList', data);
  });

  this.getProduces = function() {
    return browserStorageService.get('producList');
  };
});

app.service('browserStorageService', function(localStorageService) {
  localStorageService.clearAll();
  return localStorageService;
});

app.service('entityService', function(Restangular) {
  Restangular.setBaseUrl('http://localhost:8000/rest/');
  return Restangular;
});

I'm not at all comfortable with the asynchronous nature of JavaScript, I'm sure it's pretty simple, but I can't get my head around what I can do to correct the situation.

The data is not loader into the page at the fist call made to the controller, but when I call it again without reloading the app, the data is there.

Thanks for your help!

leseulsteve
  • 335
  • 3
  • 14
  • Have you seen this question http://stackoverflow.com/questions/16286605/initialize-angularjs-service-with-asynchronous-data?rq=1 It seems similar – Zack Jul 22 '14 at 17:38

1 Answers1

1

Instead of calling inventoryService.getProduces(); in controller you must create resolve object in config section of application with data from service. After that you can have access to data passed to controller.

app.config(function($routeProvider){
    $routeProvider
    .when('/',{
        template:'',
        controller: 'InventoryController',
        resolve:{
            products: function(inventoryService) {
               return inventoryService.getProduces();
            }
        }
    });
});

app.controller('InventoryController', function($scope, products) {                        
    $scope.productList = products;
    console.log($scope.productList);
});

Template and route path should be setup according to your application structure.

Krzysztof Safjanowski
  • 7,292
  • 3
  • 35
  • 47
  • Thanks, I'm getting to love AngularJs, so smart hehe – leseulsteve Jul 23 '14 at 13:51
  • You put me on the right direction, but now the probleme is where the InventoryService call the browserStorageService to get the ProduceList in the method getProduce(). – leseulsteve Jul 23 '14 at 14:01
  • It seams that the browserStorageService.get('producList'); call is asynchronous to, so it return a unassigned variable to, same problem but a bit further down the process! I mark your response has a good one because it was the right way to do it, if I don't use my browserStorageService and return the values straight from my entityService it works. – leseulsteve Jul 24 '14 at 04:33
  • 1
    To get the requested object in cache, I switch to angular-cached-resource witch work like a charm since my app won't always have access to the server (inventory in a freezer :). – leseulsteve Jul 24 '14 at 04:35