How to Pass an Object into a State Using Ui-Router

How to pass an object into a state using UI-router?

In version 0.2.13, You should be able to pass objects into $state.go,

$state.go('myState', {myParam: {some: 'thing'}})

$stateProvider.state('myState', {
                url: '/myState/{myParam:json}',
                params: {myParam: null}, ...

and then access the parameter in your controller.

$stateParams.myParam //should be {some: 'thing'}

myParam will not show up in the URL.

Source:

See the comment by christopherthielen https://github.com/angular-ui/ui-router/issues/983, reproduced here for convenience:

christopherthielen: Yes, this should be working now in 0.2.13.

.state('foo', { url: '/foo/:param1?param2', params: { param3:
null } // null is the default value });

$state.go('foo', { param1: 'bar', param2: 'baz', param3: { id: 35,
name: 'what' } });

$stateParams in 'foo' is now { param1: 'bar', param2: 'baz', param3: {
id: 35, name: 'what' } }

url is /foo/bar?param2=baz.

Angular2: How to pass object into a state using ui-router

I would probably use a service for this. e.g. save state to service on first step, then navigate, then fetch state from service and continue.

Passing object to all components from parent state in UI-Router

Never mind,

Solved it on my own. I just had to add $ctrl in ui-view directive of parent component state..

<div ui-view settings="$ctrl.settings">

Drawback of working late. You are not productive enough sometimes.

How to send object from 1 $state into another $state with ui-router

There is the updated plunker

Namely we have to set a tags state as a child of container one

  const tags = {
    // here we use parent as a placeholder for our child state
    parent: 'container',
    name: 'tags',
    url: '/tags',

also, the container state now in template has a target

<div ui-view>
</div>

And finally - tags stat has as a part of its template the tags-module

template: '<p>Tags State</p><tags-module></tags-module>',

Check it here and also to get more understanding about nesting, maybe check this:

• Nested states or views for layout with leftbar in ui-router?

Pass object as param into Angular ui-router

You can't pass objects on the querystring so the way you have constructed the URL for your graph state is causing the object to be converted to a string which you are seeing as [object Object].

What you should do instead is create params for your state as shown below. This will allow you to pass the object and have it accessible in your controller via $stateParams.

angular.module('app', ['ui.router'])  .config(function($stateProvider, $urlRouterProvider) {    $urlRouterProvider.otherwise("/");    $stateProvider      .state('main', {        url: '/',        template: '<div><a ui-sref="graph({friends: main.friends, start: main.start_date, end: main.end_date})">Go to graph</a></div>',        controller: 'MainController as main'      })      .state('graph', {        url: '/graph',        template: '<div>Graph</div><div>{{graph.friends}}</div><div>Start: {{graph.startDate}}, End: {{graph.endDate}}',        controller: 'GraphController as graph',        params: {          friends: null,          start: null,          end: null        }      });  })  .controller('MainController', function() {    var _this = this;    _this.friends =      {        'friend1': 'friend 1',         'friend2': 'friend 2'      };    _this.start_date = "Jun-17";     _this.end_date = "Jun-19";  })  .controller('GraphController', function($stateParams) {    var _this = this;    _this.friends = $stateParams.friends;    _this.startDate = $stateParams.start;    _this.endDate = $stateParams.end;  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script><div ng-app="app">  <div ui-view></div></div>

Pass object through ui-router to controller

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

---

Related Topics