when using ui-router resolve, how do I access the resolved data?

Question

I have the following routes:

$stateProvider
    .state("base",
    {
        url: "",
        abstract: true,
        resolve: {
            aService: "aService",
            dataNeeded: function(aService) {
            return aService.getDataMethod().$promise;
            }
        },
        template: "<ui-view/>",
    });


$stateProvider
    .state("base.main",
    {
        url: "/",
        templateUrl: coreConfig.path() + "/modules/content/content.tmpl.html",
        controller: "aController",
        controllerAs: "aCtrl",
        data: { requiresLogin: true }
    });

I'm using an abstract route to resolve data required in the child 'base.main' route.

and in my app.js file I have

angular.module("aModule", ["CoreModule"])
    .controller({ "aController": require("./modules/content/aController.controller.js") });

I have my controller:

 module.exports = ["aService", "dataNeeded", aController];

    function aController(aService, dataNeeded) {
        var test = dataNeeded; //value is undefined
    }

How do I access the 'dataNeeded' loaded in the abstract route from within the `'base.main' controller?

Answer 1

Every child state can ask for resloved stuff from its parent(s), so this would work

.controller('aController', ['$scope', 'dataNeeded', 
   function ($scope, dataNeeded) { 
     ...
}])

Check this related Q & A:

Angularjs ui-router abstract state with resolve

And its working example

EXTEND

There is another working example related to our scenario:

States:

$stateProvider
    .state("base", {
      url: "",
      abstract: true,
      resolve: {
        aService: "aService",
        dataNeeded: function(aService) {
          return aService.getDataMethod(); //.$promise;
        }
      },
      template: "<ui-view/>",
    });

$stateProvider
    .state("base.main", {
      url: "/main",
      //templateUrl: coreConfig.path() + "/modules/content/content.tmpl.html",
      templateUrl: 'tpl.main.html',
      controller: "aController",
      controllerAs: "aCtrl",
      data: {
        requiresLogin: true
      }
    });
  }
])

Controller and service:

.controller('aController', ['$scope', 'dataNeeded', 'aService',
    function($scope, dataNeeded, aService) {
      $scope.dataNeeded = dataNeeded;
      $scope.aService = aService;
    }
])
.factory('aService', function() {
    return {
      getDataMethod: function() {
        return { name:  "abc", id : 1 }
      }
    }
})

And a template which will render both 'dataNeeded', 'aService' :

<h5>aService</h5>
  <b>{{aService}}</b>
<h5>dataNeeded</h5>
  <pre>{{dataNeeded | json}}</pre>

The example in action here

MORE EXTEND

Another, more extended example could be loading data.json:

{ "name":  "def", "id" : 22 }

The servcie would then be

.factory('aService', ['$http', function($http) {
    return {
      getDataMethod: function() {
        return $http.get("data.json");
      }
    }
}])

And parent abstract resolve:

  resolve: {
    aService: "aService",
    dataNeeded: function(aService) {
      return aService.getDataMethod()
        .then(function(response){ return response.data }); //.$promise;
    }
  },

Check that here in action