CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
kentcdodds
kentcdodds

Reputation: 29031

Getting started with Nested View

I am at a total loss with what's wrong with how I've setup my nested views. What am I doing wrong???

app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
  $locationProvider.html5Mode(true);

  $stateProvider
    .state('main', {
      url: '/',
      template: '<div><h1>Hello World</h1><div ui-view></div></div>',
      controller: 'MainCtrl'
    })
    .state('main.test', {
      template: '<div><h2>I\'m here!</h2></div>',
      url: '/here'
    });
});

What happens is I go to / and it shows me "Hello World", and then I go to /here and it shows me a blank page. I'm not sure what I'm doing wrong...

Upvotes: 2

Views: 90

Answers (1)

Ilan Frumer
Ilan Frumer

Reputation: 32367

You need to omit the preceding / in url:

.state('main.test', {
  template: '<div><h2>I\'m here!</h2></div>',
  url: 'here'
 });

debugging

when clicking on this anchor ui-router navigates to this location: http://localhost:8000//here

 <a ui-sref="main.test">test</a>

In your application you can easily check the url of a state

app.run(function($state){
   var href = $state.href('main.test');
   console.log(href); # '//here'   
});

Be sure to set the server to support html5mode

$location documantation

Server side

Using this mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application (e.g. index.html)

Upvotes: 2

Related Questions