Ui-Router深层嵌套状态与父母

Question

I have been searching around, and have found nothing that works as I need yet, or anything that works in general.

I have states for an application I am building, as follows:

app - Main Parent State

facebook - Parent state of all routes for Facebook

adwords - Parent state of all routes for Adwords

bing - Parent state of all routes for Bing

... - There are a lot more... A lot...

So, for instance, if I wanted a Facebook overview, it would be app.facebook.overview . However, it hasn't worked in any ways I have tried ( dot annotation, parent in the declaration, etc.)

$stateProvider
    .state('app', {
        url: '',
        abstract: true,
        templateUrl: 'assets/views/default.html'
    })
    .state('app.facebook', {
        url: '/facebook',
        abstract: true
    })
    .state('app.facebook.overview', {
        url: '/overview',
        templateUrl: '/assets/views/facebook/overview/overview.html',
        controller: 'FacebookOverviewCtrl'
    });

I have tried every combination of abstract and parent , along with the dot annotation. I haven't been able to get it to work. It fails giving me the following error:

Could not resolve 'app.facebook.overview' from state 'app'

What am I doing wrong here? I don't understand, I have followed documentation for it, along with looked at numerous questions here, on Stackoverflow. Any ideas?

EDIT:

I have figured out the problem. Elementary mistake. I didn't include the module in the main angular.module declaration. Well... 4 am coding for you.

Answer 1

I'm basing my answer on this one here Basically, you just need to set the url of /facebook to url: ':facebook' and that should do the trick. http://plnkr.co/edit/LQLYTu0YHlvTdB26vQcP

Answer 2

I would like to state, for the fact, that I am stupid.

Here is a plunk with it working: https://plnkr.co/edit/aAeoucDidw3NX7QJqise?p=preview

It would have helped in my code if I included the module.

var App = angular.module('app', [
    '... other modules ...',
    'ui.router',
    '... other modules ...',
]);

Fix:

var App = angular.module('app', [
    '... other modules ...',
    'ui.router',
    'app.facebook',
    '... other modules ...',
]);

Elementary mistake, but worth keeping it here since it took me quite a while to figure out how to do deep nested states with ui-router . Some things I learned:

• You do NOT need to have a URL on abstract states, but if you do, it prepends down

  • For instance: app has no url, app.facebook has a url of '/facebook' , and app.facebook.overview has a url of '/overview' . Meaning the url that will be used will end up being /facebook/overview

• You can have states nested as deep as you want.

• If you go further down, you need to include template: '<ui-view></ui-view>' on your state declaration, so it will continue to input the next state as needed.

  • For instance: app has a template page, that has <ui-view></ui-view> in it, but app.facebook must also have template: '<ui-view></ui-view>' declared so it will insert the page you want below it ( app.facebook.overview ).

I hope this helps more people than just me. It took a while to figure it out, but the plunk has the code working in it. Now, that's dealt with. I feel like I can finally move on...