Блог

Мы разрабатываем одностраничное приложение с использованием angular JS, и я использую поставщика состояния для настройки маршрутов. В основном существует глобальное представление навигации и представление панели мониторинга. Мне нужно передать несколько параметров из навигации, чтобы выполнить вызов службы, а затем соответствующим образом отобразить панель мониторинга.Я разделил состояния на два, одно для навигации, а другое для панели мониторинга. То, что я не могу понять, это то, где я должен вызвать ajax для извлечения данных панели мониторинга. Должен ли я сделать это в самой навигации и передать его через разрешение. или я должен просто передать данные на контроллер панели управления и оттуда вызвать ajax. Ниже приведено мое состояние

 $stateProvider
 .state('home', {
     url: '/',
     templateUrl: 'templates/home.htm',
     controller: 'homeController',
 })
 .state('dashboard', {
     url: 'contact',
     templateUrl: 'templates/dashboard.htm',
     controller: 'dashboardController'
 })
 .state('state3', {
     url: '/articles',
     templateUrl: 'templates/state3.htm',
     controller: 'state3Controller'
 });
 $urlRouterProvider.otherwise('/home');
  

Это полностью зависит от того, как вы хотите, чтобы пользовательский интерфейс воспроизводился.

Если вы хотите выполнить всю выборку данных перед переходом в состояние панели мониторинга, используйте resolve конфигурацию состояния

 .state('dashboard', {
    url: '/contact',
    templateUrl: 'templates/dashboard.htm',
    controller: 'dashboardController',
    resolve: {
        someData: function($http) {
            return $http.get('something').then(res => res.data);
        }
    }
}
  

затем ваш контроллер может быть введен someData , например

 .controller('dashboardController', function($scope, someData) { ... })
  

Это приведет к тому, что переход состояния будет ждать, пока someName обещание не будет выполнено, что означает, что данные будут доступны сразу в контроллере.

Однако, если вы хотите немедленно перейти в состояние панели мониторинга (и, возможно, отобразить сообщение о загрузке, счетчик и т. Д.), Вы должны переместить выборку данных на контроллер

 .controller('dashboardController', function($scope, $http) {
    $scope.loading = true; // just an example
    $http.get('something').then(res => {
        $scope.loading = false;
        $scope.data = res.data;
    });
})