Angular ui-router resolve inheritance

Question

I would like to create an abstract parent state, that has only one job: to resolve the current user through an ajax server call, and then pass this object to the child state. The problem is that the child state never gets loaded. Please have a look at this plunker: Example

a state

angular.module('test', ['ui.router'])
  .config(function($stateProvider, $urlRouterProvider){

    // Parent route
    $stateProvider.state('main', {
      abstract:true,
      resolve: {
        user: function(UserService){
          return UserService.getUser();
        }
      }
    });

    // Child route
    $stateProvider.state('home', {
      parent: 'main',
      url: '/',
      controller: 'HomeController',
      controllerAs: '$ctrl',
      template: '<h1>{{$ctrl.user.name}}</h1>'
    });

    $urlRouterProvider.otherwise('/');
  });

a factory

angular.module('test').factory('UserService', function($q){
  function getUser() {
    var deferred = $q.defer();

    // Immediately resolve it
    deferred.resolve({
      name: 'Anonymous'
    });

    return deferred.promise;
  }

  return {
    getUser: getUser
  };
});

a controller

angular.module('test').controller('HomeController', function(user){
  this.user = user;
});

In this example, the home state will never display the template, I don't really understand why. If I remove the parent: 'main' line, then it displays the template, but of course I get an error because it cannot find the user dependency in the HomeController.

What am I missing? I did everything like it is described in ui-router's documentation, I think this should work.

Community · Accepted Answer · 2017-05-23 12:00:53Z

2

Every parent must have a target ui-view in template for its child

$stateProvider.state('main', {
  abstract:true,
  resolve: {
    user: function(UserService){
      return UserService.getUser();
    }
  }
  template: '<div ui-view=""></div>'
});

NOTE: Another option is to use absolute names and target index.html .. but in this case the above is the way to go (Angularjs ui-router not reaching child controller)

edited May 23, 2017 at 12:00

CommunityBot

11 silver badge

answered Oct 2, 2016 at 17:22

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

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

Collectives™ on Stack Overflow

Angular ui-router resolve inheritance

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related