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:          


        

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

Answer 2

In your app.js

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

In your controller :

app.controller('ServiceController', [
    'aService',
    'dataNeeded',
    function(aService, dataNeeded ) {
   ...
}];

Now, you access 'aService' and the 'dataNeeded' loaded inside your controller 'ServiceController'.

Answer 3

Based on this Q & A

angular-ui-router with requirejs, lazy loading of controller

I created this working plunker, which is able to load controller with RequireJS and inject state resolve - from Parent or from the Child itself

This would be the state defintion:

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

  });

$stateProvider
  .state("base.other", {
    url: "/other",
    template: "<div>The message from ctrl: {{message}}" +
    "<br>and someResolved: <b>{{someResolved}}<b>" +
    "<br> and dataNeeded: <pre>{{dataNeeded | json}}</pre>" +
    "</div>",
    controller: "OtherCtrl", 
    resolve: {
      someResolved: function() { return "This is resolved value for key 'someResolved'" },
      loadOtherCtrl: ["$q", function($q) { 
        var deferred = $q.defer();
        require(["OtherCtrl"], function() { deferred.resolve(); });
        return deferred.promise;
      }],
    },
  });

For more details read complete explanation here...

And this is the controller for RequireJS:

define(['app'], function (app) {
    // the Default Controller
    // is added into the 'app' module
    // lazily, and only once
    app_cached_providers
      .$controllerProvider
      .register('OtherCtrl',['$scope', 'dataNeeded', 'aService', 'someResolved', 
        function ($scope, dataNeeded, aService, someResolved) {
          $scope.message = "OtherCtrl";
          $scope.someResolved = someResolved;
          $scope.dataNeeded = dataNeeded;
          console.log(dataNeeded)
          console.log(aService)
          console.log(someResolved)
    }]);

});

Check it here in action