0

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'
 )}
Tony Barnes
  • 2,625
  • 1
  • 18
  • 29
Arhyaa
  • 369
  • 1
  • 3
  • 21

1 Answers1

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'
  });
Tony Barnes
  • 2,625
  • 1
  • 18
  • 29
  • Thanks ! I also have another question (maybe I should include it in an edit to the first or create a new topic). I'd like to use a parent state with a dynamic child state. The state would be 'contact.state' with this url '/:state'. As the grandchild state is possible, I think it should be ok in this case. Was I right ? – Arhyaa Jul 03 '15 at 12:33
  • @Arhyaa Hey! Yes exactly, you can do the dynamic URL like that: `url: '/contact/:someId'` – Tony Barnes Jul 03 '15 at 12:35
  • Pleasure, have fun! :-) – Tony Barnes Jul 03 '15 at 12:39
  • One more question ! I'm using multiple ui-views in my html (every of them have a specific name). In my dynamic state, I tried to use views: { 'my-view-name@' : { controller : 'a psecific controller'}. The controller reads stateParams to choose which html file to load, but all I get in the app is a 'could not resolve 'contact.state' from state 'connected'. Any idea ? – Arhyaa Jul 03 '15 at 13:25
  • @Arhyaa Hmm i'm not sure, hard to debug from here :/ It sounds like maybe the `ui-sref` isn't declared properly? I also don't think you need the `@` in `'my-view-name@'`. Check this out, it's similar: http://stackoverflow.com/a/25041362/1257504 – Tony Barnes Jul 03 '15 at 13:43
  • Thanks. If needed, I will make a plunker of it :) – Arhyaa Jul 03 '15 at 13:44
  • I finally had another issue with this. Here is a plunker. When I click on "about" or "contact" button, the states 'could not be resolved from the 'home' state. Any idea ? – Arhyaa Jul 06 '15 at 09:34