CODEWITHSUNDEEP
angularjsangular-ui-router
navtej singh
navtej singh

Reputation: 277

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

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

Upvotes: 1

Views: 36

Answers (1)

Michael G
Michael G

Reputation: 6745

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.

Upvotes: 1

Related Questions