Accessing resolve object in controller

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) {

But whu u want resolve promise xd it wont pre load data better call there and return data imo — vivid
– vivid, Commented Dec 4, 2015 at 7:15

Radim Köhler · Accepted Answer · 2015-12-04 07:11:02Z

4

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

answered Dec 4, 2015 at 7:11

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Meester Over Over a year ago

Now to figure out why this does not work with the way we have built our application.

Radim Köhler Over a year ago

Great to see that.. enjoy UI-Router and TS

Luke Schunk · Accepted Answer · 2015-12-04 03:46:57Z

0

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

edited Dec 4, 2015 at 3:46

answered Dec 4, 2015 at 3:39

Luke Schunk

2412 silver badges14 bronze badges

4 Comments

Luke Schunk Over a year ago

Or if you'd rather not use $q here's another example I used recently: http://codepen.io/pen/?editors=101

Meester Over Over a year ago

Do you know how to make it work like this example? medium.com/opinionated-angularjs/…

Meester Over Over a year ago

Your example is simply using a service to pull the data. I need the data loaded as a route dependency using the $stateProvider.

Luke Schunk Over a year ago

are you using ngRouter or UIRouter? i'll take a look but I haven't done that before

Collectives™ on Stack Overflow

Accessing resolve object in controller

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related