State provider hierarchy configuration

Until now we have had a flat list of states, but this doesn't really provide many enhancements over the existing routing concept, even with multiple views, all views are always reloaded. Also it could get quite complex if views dependent on each other couldn't be arranged in a hierarchy.

The $stateProvider provides configuring states in a hierarchy in two ways.

Hierarchy by Naming Convention

One way is using a name convention for states where . is used to separate state levels. So that the state phones.list becomes a child of phones, it is important however that phones is defined before it's children.

angular.module('phonecat', ['dotjem.routing']).
  config(['$stateProvider', function($stateProvider) {
  $stateProvider
      .state('phones', { 
          views: {
              'main': { 
                  template: 'phones.html', 
                  controller: PhonesCtrl
              },
              'hint': { template: { html: '@phones' } } 
          }
      })
      .state('phones.list', { 
          views: {
              'main.content': { 
                  template: 'phones.list.html', 
                  controller: PhonesListCtrl 
              },
              'hint': { template: { html: '@phones.list' } } 
          }
      })
      .state('phones.detail', { 
          views: {
              'main.content': { 
                  template: 'phones.detail.html', 
                  controller: PhonesDetailsCtrl 
              },
              'hint': { template: { html: '@phones.list' } } 
          }
      })
}]);

The above may indicate that views also has a child to parent relation in the naming, but this is merely a good naming convention, there is no constraint on how views are named.

It is recommended that they are unique however, unless you diliberately wish to load the same content into multiple areas of a page, if multiple views use the same name within a page, they will load the same content, but they will render independendly.

Hierarchy by Children Convention

Another way of defining the above is through a children property on the state it self.

angular.module('phonecat', ['dotjem.routing']).
  config(['$stateProvider', function($stateProvider) {
  $stateProvider
      .state('phones', { 
          views: {
              'main': { 
                  template: 'phones.html', 
                  controller: PhonesCtrl 
              },
              'hint': { template: { html: '@phones' } } 
          },
          children: [
              'list': { 
                  views: {
                      'main.content': { 
                          template: 'phones.list.html', 
                          controller: PhonesListCtrl 
                      },
                      'hint': { template: { html: '@phones.list' } } 
                  }
              },
              'detail', { 
                  views: {
                      'main.content': { 
                          template: 'phones.detail.html', 
                          controller: PhonesDetailsCtrl 
                      },
                      'hint': { template: { html: '@phones.list' } } 
                  }
              }
          ]
      })
}]);

Which is the exact equivalent.