text: ---
  name: navWithMenu
  component: ionSideMenus
  ---
  angular.module('navWithMenu', ['ionic'])
  .config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
  
      .state('app', {
        url: "/app",
        abstract: true,
        templateUrl: "templates/menu.html",
        controller: 'AppCtrl'
      })
  
      .state('app.search', {
        url: "/search",
        views: {
          'menuContent' :{
            templateUrl: "templates/search.html"
          }
        }
      })
  
      .state('app.browse', {
        url: "/browse",
        views: {
          'menuContent' :{
            templateUrl: "templates/browse.html"
          }
        }
      })
      .state('app.playlists', {
        url: "/playlists",
        views: {
          'menuContent' :{
            templateUrl: "templates/playlists.html",
            controller: 'PlaylistsCtrl'
          }
        }
      })
  
      .state('app.single', {
        url: "/playlists/:playlistId",
        views: {
          'menuContent' :{
            templateUrl: "templates/playlist.html",
            controller: 'PlaylistCtrl'
          }
        }
      });
    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise('/app/playlists');
  })
  
  .controller('AppCtrl', function($scope) {
  })
  
  .controller('PlaylistsCtrl', function($scope) {
    $scope.playlists = [
      { title: 'Reggae', id: 1 },
      { title: 'Chill', id: 2 },
      { title: 'Dubstep', id: 3 },
      { title: 'Indie', id: 4 },
      { title: 'Rap', id: 5 },
      { title: 'Cowbell', id: 6 }
    ];
  })
  
  .controller('PlaylistCtrl', function($scope, $stateParams) {
  })
  