Nested child state with ui-router

Question

As I'm working on an Angular app, I was wondering about ui-route nested states.

As said in the docu, it's possible to create nested state such as (taken from the doc) :

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

But is it possible to create a granchild state ? (possibly by adding something like) :

 .state('contacts.list.state', {
   templateUrl: 'html_file.html'
 )}

Answer 1

Yes, you can do it like that, as you suggested. EG:

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