Can't get abstract routes to work

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:

      .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'


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">

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


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

Like this:

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

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

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