Nested States & Nested Views

◄ Back (State Manager) Next (Multiple Named Views) ►

States can be nested within each other. You can specify nesting in several ways:

You can use dot syntax to infer your hierarchy to the $stateProvider. Below, contacts.list becomes a child of contacts.

$stateProvider
  .state('contacts', {})
  .state('contacts.list', {});

Alternately, you can specify the parent of a state via the parent property.

$stateProvider
  .state('contacts', {})
  .state('list', {
    parent: 'contacts'
  });

Object-based States

If you aren't fond of using string-based states, you can also use object-based states. The name property goes in the object and the parent property must be set on all child states, like this:

var contacts = { 
    name: 'contacts',  //mandatory
    templateUrl: 'contacts.html'
}
var contactsList = { 
    name: 'list',      //mandatory
    parent: contacts,  //mandatory
    templateUrl: 'contacts.list.html'
}

$stateProvider
  .state(contacts)
  .state(contactsList)

You can usually reference the object directly when using other methods and property comparisons:

$state.transitionTo(states.contacts);
$state.current === states.contacts;
$state.includes(states.contacts)

Nested States & Views

When the application is in a particular state—when a state is "active"—all of its ancestor states are implicitly active as well. Below, when the "contacts.list" state is active, the "contacts" state is implicitly active as well, because it's the parent state to "contacts.list".

Child states will load their templates into their parent's ui-view.

$stateProvider
  .state('contacts', {
    templateUrl: 'contacts.html',
    controller: function($scope){
      $scope.contacts = [{ name: 'Alice' }, { name: 'Bob' }];
    }
  })
  .state('contacts.list', {
    templateUrl: 'contacts.list.html'
  });

function MainCtrl($state){
  $state.transitionTo('contacts.list');
}

<!-- index.html -->
<body ng-controller="MainCtrl">
  <div ui-view></div>
</body>

<!-- contacts.html -->
<h1>My Contacts</h1>
<div ui-view></div>

<!-- contacts.list.html -->
<ul>
  <li ng-repeat="contact in contacts">
    <a>{{contact.name}}</a>
  </li>
</ul>

Scope Inheritance by View Hierarchy Only

Keep in mind that scope properties only inherit down the state chain if the views of your states are nested. Inheritance of scope properties has nothing to do with the nesting of your states and everything to do with the nesting of your views (templates).

It is entirely possible that you have nested states whose templates populate ui-views at various non-nested locations within your site. In this scenario you cannot expect to access the scope variables of parent state views within the views of children states.

Inherited Resolved Dependencies

Child states will inherit resolved dependencies from parent state(s), which they can override. They do not inherit anything else (no controllers, templates, etc), only resolved dependencies. You can then inject resolved dependencies into the controllers and resolve functions of child states.

Warning: This feature is in progress. Do not use until complete. See #73.

$stateProvider.state('parent', {
      resolve:{
         resA:  function(){
            return {'value': 'A'};
         }
      },
      controller: function($scope, resA){
          $scope.resA = resA.value;
      }
   });
   .state('parent.child', {
      resolve:{
         resB: function(resA){
            return {'value': resA.value + 'B'};
         }
      },
      controller: function($scope, resA, resB){
          $scope.resA2 = resA.value;
          $scope.resB = resB.value;
      }

Abstract States

An abstract state can have child states but can not get activated itself. An 'abstract' state is simply a state that can't be transitioned to, because it's only there to provide inherited properties that are common to its child states.

Here is an example where the 'contacts' state is abstract. Its main purpose is to provide its child states with access to the $scope.contacts data. $scope.contacts will be available to both child state views.

$stateProvider
    .state('contacts', {
        abstract: true,
        templateURL: 'contacts.html',
        controller: function($scope){
            $scope.contacts = [{ name: "Alice" }, { name: "Bob" }];
        }
    )
    .state('contacts.list', {
        // loaded into 'contacts' ui-view
        templateUrl: 'contacts.list.html'
    })
    .state('contacts.detail', {
        // loaded into 'contacts' ui-view
        templateUrl: 'contacts.detail.html'
    })

◄ Back (State Manager) Next (Multiple Named Views) ►

- Guide

Reference Docs

Provide feedback

Saved searches