CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
Connor Leech
Connor Leech

Reputation: 18833

nest urls but have independent templates with ui-router

I am using angular-ui-router's nested states for my views. I'd like to have two routes:

/artists - shows the homepage for all artists

/artists/:id - shows the artist profile

Therefore I don't want the artist profile route to share html with the artists homepage route. Essentially I'd like the views to be isolated from each other, but share the base route

.state('artists', {
    url: '/artists',
    templateUrl: 'page/to/show/all/artists.html',
    controller: 'AllArtistCtrl'
})
.state('artists.profile', {
    url: '/:artistId',
    templateUrl: 'page/to/show/artist/profile.html',
    controller: 'ArtistProfileCtrl'
})

I don't want the artist profile to be injected into <div ui-view></div> from the artist parent route. I want the templates independent. How do i implement this?

Upvotes: 1

Views: 69

Answers (1)

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123861

Not really sure in to which view you do NOT want to insert the detail - 1) artists homepage route or 2) artist parent route. So let's show how to use any of these approaches and that should lead to your answer. The working plunker is here

If we want to inject both states (parent and child as well) into index.html we have to use aboslute view naming in state defintion

.state('artists', {
      url: '/artists',
      ...
    })
    .state('artists.profile', {
      url: '/:artistId',
      views : {
       // here we declare that we should search for a view in a root named ""
        "@" : { 
          templateUrl: 'page/to/show/artist/profile.html',
          ...
        }
      }
    })

In case, that we want to inject the detail into parent, we just have to inject the unnamed view inside of parent view:

    .state('artists', {
      url: '/artists',
      ...
      // here we do have the same unnamed view as in a root index.html
      template: '<div><h4>this is the list </h4>' +
      ' <div ui-view=""></div></div>',

    })
    .state('artists.nested', {
      url: '/nested/:artistId', // just to distinguish url
      views : {
        // no @ === inject into parent
        "" : {
          templateUrl: 'page/to/show/artist/profile.html', 
          ...
        }
      }
    })

The view naming and names targeting is explained here:

Check the example

Upvotes: 1

Related Questions