Setting up an ionic tabbed application

I'm relatively new to ionic, so here I want to create my first ionic application from scratch.

I'm just trying to get the scaffolding of a basic tabbed bar application up and running. For this I've created an app folder inside the www and started up with my own app.js. This is my app.js

angular.module("PelvicRehabLog", ["ionic"])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleLightContent();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider

  // setup an abstract state for the tabs directive
    .state('home', {
    url: "/home",
    abstract: true,
    templateUrl: "app/home/home.html"
  });

    $urlRouterProvider.otherwise('/home');

});

I've also created a home folder inside my app folder with the following home.html

<ion-nav-bar class="bar-balanced">
    <h1 class="title">Log</h1>
</ion-nav-bar>

<ion-tabs class="tabs-energized tabs-icon-top">

  <!-- Dashboard Tab -->
  <ion-tab title="Status" icon="ion-home" href="#">
    <ion-view name="tab-dash"></ion-view>
  </ion-tab>

  <!-- Chats Tab -->
  <ion-tab title="Status" icon="ion-home" href="#">
    <ion-view name="tab-dash"></ion-view>
  </ion-tab>

</ion-tabs>

And I've changed the relevant reference in the index.html

    <script src="app/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
  </head>
  <body ng-app="PelvicRehabLog">

At this stage I'm expecting to see a basic tabbed bar application, with two tabs. But all I see is a blank screen. Any help appreciated.

You need to add some child states under your abstract state.

Abstract States

"... An abstract state can have child states but cannot get activated itself. An 'abstract' state is simply a state that can't be transitioned to. It is activated implicitly when one of its descendants are activated ..."

read this article or check example of app.js from ionic build:

.config(function($stateProvider, $urlRouterProvider) {   
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
// Each tab has its own nav history stack:
.state('tab.dash', {
url: '/dash',
views: {
  'tab-dash': {
    templateUrl: 'templates/tab-dash.html',
    controller: 'DashCtrl'
  }
}
})
.state('tab.chats', {
  url: '/chats',
  views: {
    'tab-chats': {
      templateUrl: 'templates/tab-chats.html',
      controller: 'ChatsCtrl'
    }
  }
 })
 .state('tab.chat-detail', {
  url: '/chats/:chatId',
  views: {
    'tab-chats': {
      templateUrl: 'templates/chat-detail.html',
      controller: 'ChatDetailCtrl'
    }
  }
})
.state('tab.account', {
url: '/account',
views: {
  'tab-account': {
    templateUrl: 'templates/tab-account.html',
    controller: 'AccountCtrl'
  }
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash');
});

Include <ion-nav-view></ion-nav-view> in your body tag inside your index.html. Cross check your console for errors.