Can't get abstract routes to work

1

In another app, I’ve been able to create routes just fine but in a new app I can’t seem to figure out what’s wrong with my routes.

This is my $stateprovider:

$stateProvider
      .state('todo', {
        abstract: true,
        url: "/todo",
        views: {
          todo: {
            template: '<ion-nav-view></ion-nav-view>'
          }
        } 
      })
      .state('todo.lists', {
        url: '/lists',
        templateUrl: 'views/todo/lists.html'
      })
      .state('login', {
          url: '/login',
          templateUrl: 'views/login.html'
      })
      ;

  $urlRouterProvider.otherwise('login');

http://localhost:8100/#/login works
http://localhost:8100/#/todo/lists doesn’t work and just loads nothing

My views are there and are loading, I can verify that in the console. views/todo/lists/html looks like this:

    <ion-view title="Todo lists">
    <ion-content padding="true">
         <h2>lists</h2>
    </ion-content>
   </ion-view>

Any idea what I’m doing wrong? Also, is there an easy way to quickly share a project like this on codepen.io without having to recreate all files?

2

GitHub.

Login works because is not inherited from todo. Maybe the answer lies in the absence of views configuration.

Like this:

...
.state('app.search', {
  url: "/search",
  views: {
    'menuContent' :{
      templateUrl: "templates/search.html"
    }
  }
})

Moreover, this a good reading to understand the concept and apply it to Ionic: AngularJS Routes

3

Thanks for the link Raphael, using views did the trick!