Угловое решение ui-router не определено

Question

Я перешел от использования ngRoute к ui-router. Я пытаюсь разрешить фабричный вызов в маршруте для использования в контроллере, но он не определен при выводе на консоль. Вот Фабрика:

'use strict'; 

angular.module('angular10App') 

.factory('AirportService', function ($http) { 

return { 

    getAirports: function() { 

     var airports = $http.get('../json/airports.json') 
      .then(function (response) { 

       console.log(response.data); //Outputs an array of objects 

       return response.data; 
      }); 
    } 
}); 

Вот Маршрут:

'use strict'; 

angular.module('angular10App') 
    .config(function ($stateProvider) { 
    $stateProvider 
     .state('selectFlights', { 
      url: '/select_flights', 
      templateUrl: 'app/selectFlights/selectFlights.html', 
      controller: 'SelectFlightsCtrl', 
      resolve: { 

       AirportService: 'AirportService', 

       airports: function (AirportService) { 
        return AirportService.getAirports(); 
       } 
      }, 
     }); 
    }); 

и вот контроллер:

'use strict'; 
angular.module('angular10App') 
.controller('SelectFlightsCtrl', function ($scope, airports) { 

$scope.selectedAirport = null; 

    $scope.airports = airports; 
    console.log($scope.airports); //undefined 
}); 

Answer 1

Попробуйте изменить решимость блока к этому:

resolve: { 
    airports: function (AirportService) { 
     return AirportService.getAirports(); 
    } 
} 

И изменить getAirPorts функция:

function getAirports() { 
    // You need to return the $http promise (or in your case, 'var airports'); 
    return $http.get('../json/airports.json') 
    .then(function (response) { 
     console.log(response.data); //Outputs an array of objects 
     return response.data; 
    });   
}