Resolve using UI Router and pass to a component's controller

Question

How do I resolve a variable with UI Router when I am using a component.

This is the route:

$stateProvider
  .state('route', {
    url: '/route',
    template: '<my-component user="user"></my-component>',
    resolve: {
      user: (Auth) => {
        return Auth.getCurrentUser().$promise;
      }
    }
  })

This is the component:

(function () {

   class BookingListComponent {
     constructor(user) {
        //I want to use the user here but getting the unknown provider error
     }

  }

  angular.module('app')
    .component('myComponent', {
      templateUrl: 'my-url.html',
      controller: MyComponent,
      bindings: {
      user: '<'
      }
    });

})();

Using Angular 1.5 and yeoman angular-fullstack

You may need to define a controller for your route so the user variable can be bound to the scope. — Todd Miller, Aug 15 '16 at 18:51
related [How to test Angularjs route's resolve value on component?](http://stackoverflow.com/q/40717165/802365) — Édouard Lopez, Nov 24 '16 at 15:47

Muli Yulzary · Accepted Answer · 2016-08-16T12:30:19.657

You will need to do one of the following:

Create a controller for the state and bind the resolved value to the $scope.
Bind the reference of Auth.getCurrentUser() to the $rootScope for it to be available for each state.

Example for approach #1:

.state('route', {
    url: '/route',
    template: '<my-component user="user"></my-component>',
    controller: ($scope, user) => { $scope.user = user; },
    resolve: {
      user: (Auth) => {
        return Auth.getCurrentUser().$promise;
      }
    }
});

Example for approach #2:

.run(($rootScope, Auth) => {
 //This does NOT replace the resolve in your state definition but for this to work,
 //Auth.getCurrentUser() must NEVER return null.
 $rootScope.user = Auth.getCurrentUser();
});

Further explaination on approach #2:

Each $scope will inherit from $rootScope so as long $rootScope.user points to an actual object, child scopes will point to the same object.

The best practice if you choose to go with #2 is to bind the user object to a property of a defined object on the $rootScope to avoid any issues:

.run(($rootScope, Auth) => {
     $rootScope.data = {
      //Now user can be null.
      user: Auth.getCurrentUser()
      //Other shared data...
     }
});

But then you'll have to update your template to use data.user.

EDIT:

I've found this example in the docs, might shed a bit of light on the issue:

angular.module('myMod', ['ngRoute']);
.component('home', {
  template: '<h1>Home</h1><p>Hello, {{ $ctrl.user.name }} !</p>',
  bindings: {
    user: '<'
  }
})
.config(function($routeProvider) {
  $routeProvider.when('/', {
    //Notice $resolve?
    template: '<home user="$resolve.user"></home>',
    resolve: {
      user: function($http) { return $http.get('...'); }
    }
  });
});

Sorry I didn't notice this but yeah this is most probably the case. I did notice you use one way binding though. — Muli Yulzary, Aug 16 '16 at 12:22
This answer is amazing. I missed the fact that the controller of the route is applied to the template and that is separate from what the component renders that also has a controller. — Mika, Aug 16 '16 at 13:58

Resolve using UI Router and pass to a component's controller

1 Answers1

Example for approach #1:

Example for approach #2:

Linked