Accessing resolve object in controller - angularjs

Question

I am pulling back some route dependent data and the JSON is returned just fine from the server, but I am unsure how to actually access the object once I am in my controller. I have tried a few different things, such as putting the .then() inside the resolve, but that did not work.
resolve: {
menus: function ($http) {
var httpSource = this.httpSource = location.protocol + '//' + location.hostname;
const url = `${this.httpSource}/api/package/menus`;
return $http.get(url);
}
}
I did also try this
resolve: {
menus: function ($http) {
var httpSource = this.httpSource = location.protocol + '//' + location.hostname;
const url = `${this.httpSource}/api/package/menus`;
var menuData;
$http.get(url).then(response => {
menuData = response.data.Data;
})
return menuData;
}
}
I just simply cannot figure out how to load it into a controller property.
I tried to follow this, but the variable is not injected in the constructor -- https://medium.com/opinionated-angularjs/advanced-routing-and-resolves-a2fcbf874a1c#.2xzq32cwo
I attempt to load it with
this.menuData = $state.current.resolve.menus;
And I end up with this object.
"$http", function $stateProvider.state.state.resolve.menus($http)]
I am sure there is something fundamental I am missing here, but being new to Angular, I do not see it. Basically, my object is the full function definition and not the return data.Data.
My controller constructor.
static $inject = ['PackageService', '$stateParams', '$state', 'menus'];
constructor(packageService: Service.IPackageService, $stateParams, $state, DTOptionsBuilder, DTColumnDefBuilder, public logger: ILogger, public menus: any) {

Answer 1

There is a working example
This should be our controller:
namespace myNamespace
{
export class MyController
{
public MenuData: any[];
// strict notation support, for minification
static $inject = ['$scope', 'menus'];
// here we will get the resolved menus
constructor(
protected $scope: ng.IScope,
protected menus: ng.IHttpPromiseCallbackArg<any>)
{
this.MenuData = menus.data
}
}
}
And this is our state
.state('home', {
url: "/home",
templateUrl: 'template.html',
controller: myNamespace.MyController,
controllerAs: 'Ctrl',
resolve: {
// real example returning some data from data.json
menus: function ($http) {
var url = "data.json";
return $http.get(url);
}
}
})
And now we can consume the above in the template
<pre>{{Ctrl.MenuData | json }}</pre>
Check it here in action

Answer 2

I don't totally understand the way you're using your resolve, but here's a simple example of a way I did it recently:
In my Service:
myApp.service('mainService', function ($http, $q) {
this.getStarWarsData = function() {
var myPromise = $q.defer();
$http({
method: "GET",
url: "http://swapi.co/api/people/"
}).then(function(response) {
var parsedResponse = response.data.results; //Your code will be different here depending on the object you're getting back
console.log(parsedResponse);
console.log("this is the type of the pr", typeof(parsedResponse))
//this bit below is just manipulating the parsed response to obtain the data I wanted
var emptyArr = [];
for(var i = 0; i < parsedResponse.length; i++) {
emptyArr.push({
Name: parsedResponse[i].name,
Eyes: parsedResponse[i].eye_color,
})
} myPromise.resolve(emptyArr);
})
return myPromise.promise;
}
})
And Controller
myApp.controller("myController", ["$scope", "mainService", function($scope, mainService){
$scope.getData = function() {
mainService.getStarWarsData()
.then(function(response){
console.log("this is a response in our controller", response)
$scope.peoples = response;
})
}
}]);