<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
    <title></title>
    <link data-require="ionic@1.0.0-beta.1" data-semver="1.0.0-beta.1" rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" />
    <script data-require="ionic@1.0.0-beta.1" data-semver="1.0.0-beta.1" src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
    <script src="app.js"></script>
    <script src="controllers.js"></script>
  </head>

  <body ng-app="starter" animation="slide-left-right-ios7">
    <ion-nav-view></ion-nav-view>
  </body>

</html>
/* Styles go here */

// Ionic Starter App, v0.9.20

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers'])

.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
  
  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "menu.html",
  })
  
  .state('app.song', {
    url: "/song",
    views: {
      'menuContent': {
        templateUrl: "tabs.html",
        controller: 'SongCtrl'
      }
    }
  });
  
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/song');
});
This is a blank ionic framework starter template.

https://github.com/driftyco/ionic-starter-tabs
angular.module('starter.controllers', [])

.controller('SongCtrl', function($scope) {
  $scope.song = {
    name: 'Ringa Ringa',
    lyrics: 'Ringa ringa roses',
    tabs: '1, 2, 3',
    length: '4m 1s'
  };
})
angular.module('starter.services', [])

/**
 * A simple example service that returns some data.
 */
.factory('Friends', function() {
  // Might use a resource here that returns a JSON array

  // Some fake testing data
  var friends = [
    { id: 0, name: 'Scruff McGruff' },
    { id: 1, name: 'G.I. Joe' },
    { id: 2, name: 'Miss Frizzle' },
    { id: 3, name: 'Ash Ketchum' }
  ];

  return {
    all: function() {
      return friends;
    },
    get: function(friendId) {
      // Simple index lookup
      return friends[friendId];
    }
  }
});
<!--
  This template loads for the 'tab.friend-detail' state (app.js)
  'firend' is a $scope variable created in the FriendsCtrl controller (controllers.js)
  The FriendsCtrl pulls data from the Friends service (service.js)
  The Friends service returns an array of friend data
-->
<ion-view title="{{friend.name}}">
  <ion-content has-header="true" padding="true">
  </ion-content>
</ion-view>
<ion-view title="Account">
  <ion-content class="has-header padding">
    <h1>Account</h1>
  </ion-content>
</ion-view>
<ion-view title="Dashboard">
  <ion-content class="has-header padding">
    <h1>Dash</h1>
  </ion-content>
</ion-view>
<ion-view title="Friends">
  <ion-content class="has-header">
    <ion-list>
      <ion-item ng-repeat="friend in friends" type="item-text-wrap" href="#/tab/friend/{{friend.id}}">
        {{friend.name}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>
<!-- 
  Create tabs with an icon and label, using the tabs-positive style. 
  Each tab's child <ion-nav-view> directive will have its own 
  navigation history that also transitions its views in and out.
-->
<ion-view view-title="{{song.name}}">

  <ion-tabs>
    <ion-tab title="Album">
        <h1>1st heading: Song name and basic info</h1>
        <h1>This is the 2nd heading. 1st heading is hidden under nav bar.</h1>
        {{song.name}}
        {{song.length}}
    </ion-tab>
    <ion-tab title="Lyrics">
        <h1>First heading</h1>
        <h1>Second heading</h1>
        {{song.lyrics}}
    </ion-tab>
    <ion-tab title="Guitar Tabs">
        <h1>Song Tabs</h1>
        <h1>Song Tabs</h1>
        {{song.tabs}}
    </ion-tab>
  </ion-tabs>


</ion-view>
<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable bar-royal">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon-round"
                menu-toggle="left">
        </button>
      </ion-nav-buttons>

      <ion-nav-buttons side="right">
        <a class="button button-icon button-clear ion-search" href="#/app/search"></a>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>
  
  <ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Menu</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item ng-if="loggedIn()" ng-click="logout()">
            Logout
        </ion-item>
        <ion-item ng-if="!loggedIn()" href="#/app/login">
            Login
        </ion-item>
        <ion-item nav-clear menu-close href="#/app/browse">
          Browse
        </ion-item>
        <ion-item nav-clear menu-close href="#/app/playlists">
          Playlists
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>

</ion-side-menus>