Untitled

<!DOCTYPE html>
<html>

  <head>
    <link data-require="ionic@*" data-semver="1.0.0-beta6" rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.6/css/ionic.css" />
    <script data-require="ionic@*" data-semver="1.0.0-beta6" src="http://code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="NavDemo">
    <ion-nav-view></ion-nav-view>
  </body>

</html>

var items = [
  { Id: 1, Name: "Item 1" },
  { Id: 2, Name: "Item 2" }
];

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

.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
            // org.apache.cordova.statusbar required
            StatusBar.styleDefault();
        }
    });
})

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

    $stateProvider

    .state("app", {
      url: "/app",
      abstract: true,
      templateUrl: "main.html"
    })
    
    .state("app.home", {
      url: "/home", 
      views: {
        "mainContent": {
          templateUrl: "home.html",
          controller: "HomeCtrl"
        }
      }
    })
    
    .state("app.masterlist", {
      cache: false,
      url: "/master-list",
      views: {
        "mainContent": {
          templateUrl: "master-list.html",
          controller: "MasterListCtrl"
        }
      }
    })
    
    .state("app.masterlist.masterdetail", {
      url: "/master-detail",
      abstract: false,
      views: {
        "mainContent@app": {
          templateUrl: "master-detail-tabs.html",
          controller: "MasterDetailBaseCtrl"
        }
      }
    })
    
    .state("app.masterlist.masterdetail.generaldata", {
      url: "/general-data/:id", 
      abstract: false,
      views: {
        "tabGeneralData": {
          templateUrl: "tab-general-data.html", 
          controller: "DetailGeneralDataCtrl"
        }
      }
    })
    ;
    
    $urlRouterProvider.otherwise("/app/home");
})

.controller("HomeCtrl", function() {})

.controller("MasterListCtrl", function($scope) {
  $scope.items = items;
})

.controller("MasterDetailBaseCtrl", function($scope) {})

.controller("DetailGeneralDataCtrl", function($scope, $stateParams) {
  $scope.itemId = $stateParams.id;
  $scope.item = items[$scope.itemId];
})
;

/* Styles go here */

<ion-side-menus>
    <!-- main content -->
    <ion-side-menu-content>
        <ion-nav-bar class="bar-stable nav-title-slide-ios7">
            <ion-nav-back-button class="button-clear"><i class="icon ion-arrow-left-c"></i> Back</ion-nav-back-button>
        </ion-nav-bar>
        <ion-nav-view name="mainContent" animation="slide-left-right"></ion-nav-view>
    </ion-side-menu-content>

    <!-- left side menu -->
    <ion-side-menu side="left">
        <header class="bar bar-header bar-stable">
            <h1 class="title">Hauptmenü</h1>
        </header>
        <ion-content class="has-header">
            <ion-list>
                <ion-item nav-clear menu-close href="#/app/home">
                  Home
                </ion-item>              
                <ion-item nav-clear menu-close href="#/app/master-list">
                  Master List
                </ion-item>
                <ion-item nav-clear menu-close href="#/app">
                    Pointing nowhere
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>

<ion-view title="Home">
  <ion-nav-buttons side="left">
      <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-content class="has-header">
    <h1>Home Page</h1>
    <p>Open side menu and navigate to <i>Master List</i></p>
  </ion-content>
</ion-view>

<ion-view title="Master List">
  <ion-nav-buttons side="left">
      <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-content class="has-header">
    <ion-list>
      <a class="item item-icon-right" ng-repeat="i in items" href="#/app/master-list/master-detail/general-data/{{$index}}">
          {{i.Name}}
          <i class="icon ion-ios-arrow-right list-item-arrow">&gt;</i>
      </a>
    </ion-list>
  </ion-content>
</ion-view>

<ion-tabs class="tabs-icon-top tabs-color-active-positive">

  <ion-tab title="General" icon-off="ion-information-circled" icon-on="ion-information-circled">
    <ion-nav-view name="tabGeneralData"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Another Tab" icon-off="ion-person" icon-on="ion-person">
    <ion-nav-view name="tabAnotherData"></ion-nav-view>
  </ion-tab>
    
</ion-tabs>

<ion-view view-title="Item Details">
  <ion-nav-buttons side="left">
      <button class="button" ng-click="$ionicGoBack($event)"><i class="icon ion-arrow-left-c"></i> My own Back Link</button>
  </ion-nav-buttons>

  <ion-content>
      <div class="list">
        <a class="item item-icon-right list-item">
            <div class="label">{{item.Name}} ({{itemId}})</div>
            <i class="icon ion-ios-arrow-right list-item-arrow">&gt;</i>
        </a>
      </div>
  </ion-content>
</ion-view>