AngularJS и ui-router: неправильное поведение маршрутов после обновления - PullRequest
Новая
       8

AngularJS и ui-router: неправильное поведение маршрутов после обновления

0 голосов
/ 30 апреля 2020

Я разрабатываю приложение с Angujar JS и ui-router и у меня возникают проблемы с загрузкой маршрутов. Чтобы облегчить объяснение, я удалю части кода. Мой файл rotes выглядит так: 

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
      });
});

Я загружаю этот маршрут / dashboard после входа пользователя. На этом маршруте я загружаю, среди прочего, метод http, который возвращает компании, к которым пользователь будет иметь доступ, через фабрику ниже: 

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;
        });

    }
}
});

При доступе к маршруту / vendas (который связан с состоянием dashboard.vendas), я делаю еще один http-вызов, используя переменную, возвращаемую factoryEmpresas, следующим образом: 

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;
        });
    }
}
});

Все работает отлично, пока пользователь не решит обновить sh (F5) при нахождении на маршруте / vendas . В этот момент начинается загрузка двух маршрутов / dashboad и / vendas . Однако при вызове http на factoryVendas factoryDashboard еще не вернул функцию getEmpresas. Таким образом, переменная «empresa_id» не заполняется требуемым значением, что приводит к неопределенному вызову вместо «empresa_id».

Я задаю вопрос: как заставить factorySales ждать, пока factoryDashboard, чтобы вернуться, чтобы я мог сделать вызов с должным образом заполненной переменной?

Любая помощь будет приветствоваться.

Спасибо!

1 Ответ

0 голосов
/ 01 мая 2020

Похоже, венды имеют прямую зависимость от empresa. Имеет ли смысл включать empresaId в параметры маршрута для доступа к вендам? Таким образом, информация, необходимая для загрузки страницы, всегда будет доступна (от $stateParams), даже при перезагрузке 

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

Другая вещь, которую вы можете сделать, это определить порядок загрузки, создав разрешение для родителя, которое ребенок потребляет. Затем uirouter знает, что ему нужно дождаться разрешения родителя, прежде чем пытаться загрузить дочерний элемент. 

$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);
      }
  }
})

Vendas и Empresas могут быть введены в их соответствующие контроллеры.

Хотя это бы сработало, я бы на самом деле не одобрял этот метод, потому что теперь ваш пользователь все больше ждет появления контента. Исследования показали, что лучше показывать прогресс пользователя, ваше приложение будет чувствовать себя быстрее. Я стараюсь избегать разрешений, когда это возможно, и в моем контроллере есть логика инициализации c. Таким образом, страница сразу загружается и заполняется по мере поступления данных.

...