<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>app</title> <link href="resource/ionic.min.css" rel="stylesheet"> <script src="resource/ionic.bundle.min.js"></script> <script type="text/javascript"> angular.module('starter', ['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.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: "menu.html" }) .state('app.playlists', { url: "/playlists", views: { 'menuContent' :{ templateUrl: "playlists.html" } } }) .state('app.browse', { url: "/browse", views: { 'menuContent' :{ templateUrl: "browse.html" } } }) .state('app.search', { url: "/search", views: { 'menuContent' :{ templateUrl: "search.html" } } }) // if none of the above states are matched, use this as the fallback $urlRouterProvider.otherwise('/app/playlists'); }) </script> </head> <body ng-app="starter"> <ion-nav-view></ion-nav-view> <script id="menu.html" type="text/ng-template"> <ion-side-menus> <ion-pane 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-chevron-left"></i> Back</ion-nav-back-button> </ion-nav-bar> <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view> </ion-pane> <ion-side-menu side="left"> <header class="bar bar-header bar-stable"> <h1 class="title">Left</h1> </header> <ion-content class="has-header"> <ion-list> <ion-item nav-clear menu-close href="#/app/search"> Search </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> </script> <script id="playlists.html" type="text/ng-template"> <ion-view title="Playlists"> <ion-nav-buttons side="left"> <button menu-toggle="left" class="button button-icon icon ion-navicon"></button> </ion-nav-buttons> <ion-content class="padding"> 123123 </ion-content> </ion-view> </script> <script id="browse.html" type="text/ng-template"> <ion-view title="browse"> <ion-nav-buttons side="left"> <button menu-toggle="left" class="button button-icon icon ion-navicon"></button> </ion-nav-buttons> <ion-content class="padding"> 4444 </ion-content> </ion-view> </script> <script id="search.html" type="text/ng-template"> <ion-view title="search"> <ion-nav-buttons side="left"> <button menu-toggle="left" class="button button-icon icon ion-navicon"></button> </ion-nav-buttons> <ion-content class="padding"> 5555555555 </ion-content> </ion-view> </script> </body> </html>