Angularjs and ui-router: loading routes

Question

I’m developing an application with Angujarjs and ui-router and I’m having trouble loading routes. To facilitate the explanation I will delete parts of the code. My route file looks like this:

app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {

$stateProvider
.state('dashboard', {
  url: '/dashboard',
  templateUrl : 'pages/dashboard.html',
  controller  : 'DashController'
})
.state('dashboard.vendas', {
  url: '/vendas',
  templateUrl : 'pages/vendas.html',
  controller  : 'vendasController'
})
;

$urlRouterProvider.otherwise('/');

$locationProvider.html5Mode({
      enabled: true,
      requireBase: false
      });
});

I carry that route /Dashboard after the user login. In this route, I load, among other things, an http method that returns the companies that the user will have access, through the Factory below:

app.factory("factoryEmpresas", function($http,urlBase,isAuthenticated) {
return {
    getEmpresas: function() {
        return $http({
            url: urlBase.getUrl() + '/empresas',
            method: "GET",
            headers: {
                'X-Token': isAuthenticated.getJWT()
            }
        }).then(function successCallback(response) {   
            return response.data;
        }, function errorCallback(response) {
            return response;
        });

    }
}
});

When accessing the route /sales (which is relative to the state Dashboard.sales), I make another http call using a variable that is in the return of factoryEmpresas as follows:

app.factory("factoryVendas", function($http,urlBase,isAuthenticated) {
return {
    getVendas: function(id_empresa) {
        return $http({
            url: urlBase.getUrl() + '/vendas?id_empresa=' + id_empresa,
            method: "GET",
            headers: {
                'X-Token': isAuthenticated.getJWT()
            }
        }).then(function successCallback(response) {   
            return response.data;
        }, function errorCallback(response) {
            return response;
        });
    }
}
});

Everything works perfectly, until the user decides to give a refresh (F5) when it is on the route /sales. At that moment the loading of the two routes is triggered /dashboad and /sales. However, when making the http call on factoryVendas, to factoryDashboard has not yet had the return of the getEmpresas function. Thus, the variable "id_company" is not filled with the value it should, thus resulting in a call with Undefined instead of the "id_empresa".

The question I ask is, how to get factoryVendas await the return of factoryDashboard to make the call with the variable duly filled?

Any help will be welcome.

Thank you!

Answer 1

I got the answer on the stackoverflow forum in English. The solution to this problem is to use the resolve tag in the route file in this way:

$stateProvider
.state('dashboard', {
  url: '/dashboard',
  templateUrl : 'pages/dashboard.html',
  controller  : 'DashController',
  resolve: {
      Empresas: function(factoryEmpresas) {
          return factoryEmpresas.getEmpresas();
      }
  }
})
.state('dashboard.vendas', {
  url: '/vendas',
  templateUrl : 'pages/vendas.html',
  controller  : 'vendasController',
  resolve: {
      Vendas: function(Empresas, factoryVendas) {
          var id_empresa = Empresas[0].id; // just kind of guessing here
          return factoryVendas.getVendas(id_empresa);
      }
  }
})

Thus, the Dashboard.sales route will only be loaded after loading the Dashboard route and the id_company variable can be loaded correctly.