CODEWITHSUNDEEP
javascriptangularjsstateangular-ui-router
Joshua Terrill
Joshua Terrill

Reputation: 2017

Displaying a view from inside a view using ui-router

I have an index.html file that has a view that is defined by <div ui-view="main"></div>

The HomePageModuleConfig.js where this view is defined looks like this:

var homePageState = {
    url: '/HomePage/', //the url that will trigger the template and controller to be called
    views: {
        "main": {
            controller: 'HomePageController',
            templateUrl: 'HomePage/HomePage.tpl.html' //template paths are relative to the app folder
        }
    }
};

$stateProvider.state("HomePage", homePageState);

Inside HomePage/HomePage.tpl.html I have another view defined like this: <div ui-view="tableGrid"></div>

I thought that I could render the tableGrid view by adding another another state to the stateProvider like this:

var archiveState = {
    parent: 'HomePage',
    url: "/Archive/",
    views: {
      "tableGrid@HomePage" : {
        controller: 'ArchiveController',
        templateUrl: 'Archive/Archive.tpl.html' //template paths are relative to the app folder
      }
    }
};

Then tacking it on:

$stateProvider.state("HomePage", homePageState).state('Archive', archiveState);

But when I visit /Archive/ nothing loads.

Edit: When I inspect the page after visiting /Archive/, the <div ui-view"main"></div> has nothing in it.

When I visit /HomePage/ the main template renders as expected.

Upvotes: 1

Views: 37

Answers (1)

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

Reputation: 123861

In case that you do not see anything on url

#/Archive/

you should know, that url is inherited from parent

#/HomePage//Archive/

Other words, the parent(s) url is added as a prefix to current state url defintion

And yes, there are so many // signs above, because url should rather be defined like this:

var homePageState = {
    // url: "/HomePage/", do not add slash at the end
    url: '/HomePage',
    ...
var archiveState = {
    parent: 'HomePage',
    // url: "/Archive/", do not add slash at the end
    url: "/Archive",
...

Another option how to solve the issue with parent url being prefixed is (doc link and cite):

Absolute Routes (^)

If you want to have absolute url matching, then you need to prefix your url string with a special symbol '^'.

$stateProvider
  .state('contacts', {
     url: '/contacts',
     ...
  })
  .state('contacts.list', {
     url: '^/list',
     ...
  });

So the routes would become:

  • 'contacts' state matches "/contacts"
  • 'contacts.list' state matches "/list". The urls were not combined because ^ was used.

Upvotes: 1

Related Questions