AngularJS ui-router resolve is undefined

Question

I have moved from using ngRoute to ui-router. I am trying to resolve a Factory call in the route for use in the controller but it is undefined when output to the console. Here is the Factory:

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

Here is the Route:

'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();
                }
            },
        });
    });

and here is the controller:

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

$scope.selectedAirport = null;

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

Answer 1

Try changing your resolve block to this:

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

And modify the getAirPorts function into:

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