I'm currently working on organizing my routes with three levels using ui-router.
I'll just provide a snippet of my routes that is causing an issue, as they are quite extensive and including everything here may be overwhelming. If you feel more details are needed, please let me know.
app.js
.state('elements', {
url: '/elements',
views: {
nav: {
templateUrl: 'components/directives/main-nav.html'
},
content: {
templateUrl: 'views/main-nav/elements.html'
},
localFooter: {
templateUrl: 'views/footer/elements-subnav.html'
},
globalFooter: {
templateUrl: 'views/footer/global-footer.html'
}
},
ncyBreadcrumb: {
label: 'elements'
}
})
.state('elements.elements-library', {
url: '/elements-library',
views: {
// nested views configuration
},
ncyBreadcrumb: {
// breadcrumb information
}
})
.state('elements.elements-library.neutral-colors', {
url: '/neutral-colors',
views: {
// third level nested view configuration
},
ncyBreadcrumb: {
// breadcrumb for neutral colors
}
})
Below is part of elements-library.html where there's a link to navigate to the third-level nested route.
elements-library.html
<div class="row">
<div class="col-xs-12">
<h2 class="evo-header-10-bold" id="neutral-colors">Neutral Colors<a ui-sref="elements.elements-library.neutral-colors" href="javascript: void(0);" class="evo-icon-10 evo-icon-circle-chevron-right" style="float: right; margin-top: 5px;"></a></h2>
<div class="evo-space-15"></div>
</div>
</div>
The following code represents neutral-colors.html page that should load in View when clicking from elements-library.html
neutral-colors.html
<div class="container">
<div class="row">
<div class="col-xs-12">
<div ncy-breadcrumb></div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h2 class="evo-header-15-bold no-line">Neutral Colors</h2>
</div>
</div>
</div>
Lastly, in the index.html file, I've included data-ui-view="content"
index.html
<div data-ui-view="content" class="container" ng-cloak></div>
When clicking on the link "a ui-sref="elements.elements-library.neutral-colors ..." from elements-library.html, the URL address updates to http://localhost:3000/#/elements/elements-library/neutral-colors, and the ncy-breadcrumb also updates correctly to "elements / elements library / neutral colors", but the content section does not update.
In attempting the third-level nesting ".state('elements.elements-library.neutral-colors'", I even tried changing content: to content@elements, however, this resulted in an error message:
Uncaught SyntaxError: Unexpected token ILLEGAL
Uncaught Error: [$injector:nomod] Module 'evolution' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.