is it possible with UI router to have single ui-view in index.html, and nested states?

Question

i'm setting up a project, and using ui-router. requirement is to have url which keep on appending eg: #/home/contacts. In order to achieve that, i have to use the nested states. eg: home and home.contacts, where home state will have in template which will get populate.

But i want to have a single ui-view at root level, index.html, which will get templates when i will hit on url, eg, home or home/contacts. Is it possible to get this behaviour with ui-router?

in nutshell, having nested behavior[not nested, i want appending url] with single ui-view at index.html.

Note

What would a state after contacts look like? What's the reasoning behind the requirement for appended URLs? What problem are you trying to solve? — Michael G
– Michael G, Commented Mar 17, 2016 at 14:57

Michael G · Accepted Answer · 2016-03-17 14:45:51Z

1

Could you specify the URL of the state to be explicitly home/contacts?

See below for an example:

app.config(function($stateProvider) {

  var routes = [
  {
    state: 'home',
    config: {
      url: '/home',
      template: '<h3>Home</h3>'
    }
  }, 
  {
    state: 'contacts',
    config: {
      url: '/home/contacts',
      template: '<h3>Contacts</h3>'
    }
  }];

  routes.forEach(function(route) {

    if (route.state) {
      $stateProvider.state(route.state, route.config);
    }
  });

});

View:

  <body ng-controller="MainCtrl">
    <a ui-sref="home">Home</a>
    <a ui-sref="contacts">Contacts</a>

    <div ui-view></div>
  </body>

Working Plnkr example here.

answered Mar 17, 2016 at 14:45

Michael G

6,7752 gold badges45 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

navtej singh Over a year ago

yes, i have tried it but wanted to know the better solution with nested states.

navtej singh Over a year ago

$stateProvider .state('leaguesState', {                 url: '/leagues',                 template:'hello<div ui-view></div>'             }).state('leagueState.teams',{                 url:'/teams',                 template :'<div>team in leagues, i will not populate in ui-view of index.html</div>'             })             .state('fixturesState',{                 url:'/fixtures',                 template :'<div>fixtures</div>'             })             .state('teamState',{                 url:'/team',                 template :'<div>teams</div>'             });

navtej singh Over a year ago

Three non nested states 1.leagueState 2.fixtureState 3.TeamState leagueState has child state, so league state shud have ui-view, cant i just populate in ui-view put in index.html using no names views?

Michael G Over a year ago

I don't believe that's possible.

navtej singh Over a year ago

hmmn. so can i do like this? when user will go to /leagues/state, can i wipeout the template which is in index.html ui-view (of leagueState), as of now i am getting both templates, one of parent leagueState that gets into ui-view @index.html and 2nd of leagueState.teams in ui-view given to parent template. when i hit leagues/state

Collectives™ on Stack Overflow

is it possible with UI router to have single ui-view in index.html, and nested states?

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related