Pass object through ui-router to controller

Question

I'm creating a user profile page using angular/rails. I've set up a StateProvider using ui-router, like so,

$stateProvider
  .state('friendprofile', {
    url: '/{name}',
    views: {
      "friendProfile": {
        templateUrl: '../assets/angular-app/templates/_friendProfile.html',
        controller: 'friendProfileCtrl',
      }
    },
  })

This is the click action from the template,

%a.profile{"ui-sref" => "friendprofile(user)"}
  name: {{ user.name }}

Note that I'm passing user here.

So when the link .profile is clicked I go to the url http://localhost:3000/#/Jan%20Jansen. So that's working fine.

In my friendProfileCtrl I have a function that calls a service,

friendProfileService.loadProfile().then(function(response) {
  $scope.user_profile = response.data;
  console.log ($scope.user_profile)
})

Which calls this service,

app.factory('friendProfileService', ['$http', function($http) {
  return {
    loadProfile: function() {
      return $http.get('/users/4.json');
    }
  };
}])

Currently I have the return url users/4/.json hardcoded. Can I get the users id in there somehow? Or do I have to resolve it in the StateProvider?

Pankaj Parkar · Accepted Answer · 2016-01-04 19:36:43Z

1

You could just add id parameter of user inside state so that it can be easily readable from the $stateParams.

url: '/{id}/{name}', //assuming user object has `id` property which has unique id.

So while making an ajax you could directly get the user id from the user object before making an ajax.

Controller

friendProfileService.loadProfile($stateParams.id).then(function(response) {
  $scope.user_profile = response.data;
  console.log ($scope.user_profile)
})

Factory

app.factory('friendProfileService', ['$http', '$stateParams', function($http) {
  return {
    loadProfile: function(id) {
      return $http.get('/users/'+ id +'json');
    }
  };
}])

edited Jan 4, 2016 at 19:36

answered Jan 4, 2016 at 19:21

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

2 Comments

Peter Boomsma Over a year ago

Thanks. I didn't know you could pass $stateParams through. Looks like it's working.

Pankaj Parkar Over a year ago

@PeterBoomsma Great.. Glad to help you..Thanks :)

Stalinko · Accepted Answer · 2016-01-04 19:23:10Z

You've said right - you should resolve it before controller loads:

$stateProvider
  .state('friendprofile', {
    url: '/{name}',
    views: {
      "friendProfile": {
        templateUrl: '../assets/angular-app/templates/_friendProfile.html',
        controller: 'friendProfileCtrl',
      }
    },
    resolve: {
      user: function($stateParams, friendProfileService) {
        friendProfileService.loadProfile($stateParams.name);
      }
    }
  })

And then in the controller you can inject user variable which won't be a promise but the resolved data already:

app.controller('friendProfileCtrl', [
  '$scope',
  'user',
  ...
  function($scope, user, ...) {
    $scope.user_profile = user;
    console.log($scope.user_profile)
  }
]);

Btw the value for ui-sref should be something like that: friendprofile({name: user})

And don't forget to add input parameter to loadProfile function. Probably you should better rename {name} parameter to {id}

Collectives™ on Stack Overflow

Pass object through ui-router to controller

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related