javascript - Nested ui-router state without nested view? -

javascript - Nested ui-router state without nested view? -

i'm wondering if it's possible have nested state without nested view. suppose have setup:

app.config(function($stateprovider, $urlrouterprovider) { // // // set states $stateprovider .state('index', { url: "/index", templateurl: "views/home.html", controller: "maincontroller", ncybreadcrumb: { label: 'home' } }) .state('about', { url: "/about", templateurl: "views/about.html", controller: "aboutcontroller", ncybreadcrumb: { label: 'about', parent: 'index' } }) .state('us', { url: "/us", templateurl: "views/us.html", controller: "uscontroller", parent: 'about', ncybreadcrumb: { label: 'us' } }) // // unmatched url, redirect /home $urlrouterprovider.otherwise("/index"); });

when visit /about, page. when visit /about/us, still page page loaded in ui-view of page. however, load page on /about , page on /us. possible?

yes possible. have use, absolute naming. state defintion this:

.state('us', { url: "/us", views : { "@" : { // here using absolute name targeting templateurl: "views/us.html", controller: "uscontroller", }, } parent: 'about', ncybreadcrumb: { label: 'us' } })

see doc:

view names - relative vs. absolute names

behind scenes, every view gets assigned absolute name follows scheme of viewname@statename, viewname name used in view directive , state name state's absolute name, e.g. contact.item. can take write view names in absolute syntax.

for example, previous illustration written as:

.state('report',{ views: { 'filters@': { }, 'tabledata@': { }, 'graph@': { } } })

so documentation shows, can utilize absolute naming. in our case, target root state nams string empty (index.html) - part after delimiter @. , unnamed view - string empty before @. why use:

views : { "@" : {

note: behind scenes, ui-router used state us:

views : { "@about" : {

there working plunker, these states in action:

// states $stateprovider .state('index', { url: "/index", templateurl: 'tpl.html', }) .state('about', { url: "/about", templateurl: 'tpl.html', }) .state('us', { url: "/us", parent: "about", views : { '@': { templateurl: 'tpl.html', }, } })

check in action if 'us' state name ui-sref="us" navigate '/about/us'.

javascript angularjs angular-ui-router