How to use tab menu in ionic framework


#1

I am developing an android application using cordova and ionic framework.I am side menus and tab menus for navigation .How can use a tab menu in page which is loaded using a side menu.Here is app.js file

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

    .state('app', {
      url: "/app",
      abstract: true,
      templateUrl: "templates/menu.html",
      controller: 'AppCtrl'
    })
	
	/*--------------------menus in sidebar----------------------------------------------*/
    .state('app.home', {
      url: "/home",
      views: {
        'menuContent' :{
          templateUrl: "templates/home.html",
		  controller: 'homeCtrl' 
        }
      }
    })
	
    .state('app.announcements', {
      url: "/announcements",
      views: {
        'menuContent' :{
          templateUrl: "templates/announcements.html",
          controller:'announcementCtrl'
        }
      }
    })

    .state('app.deals', {
      url: "/deals",
      views: {
        'menuContent' :{
          templateUrl: "templates/deals.html",
          controller:'dealsCtrl'
        }
      }
    })

    .state('app.dining', {
      url: "/dining",
      views: {
        'menuContent' :{
          templateUrl: "templates/dining.html",
          controller:'diningCtrl'
        }
      }
    })

    .state('app.director', {
      url: "/director",
      views: {
        'menuContent' :{
          templateUrl: "templates/director.html"
        }
      }
    })

    .state('app.contact', {
      url: "/contact",
      views: {
        'menuContent' :{
          templateUrl: "templates/contact.html"
        }
      }
    })

    .state('app.about_app', {
      url: "/about_app",
      views: {
        'menuContent' :{
          templateUrl: "templates/about_app.html"
        }
      }
    })
    .state('app.quiz_register', {
        url: "/quiz_register",
        views: {
          'menuContent' :{
        	templateUrl:'templates/register.html',  
            controller:'RegisterCtrl'
          }
        }
      })
     .state('app.quiz_web', {
        url: "/quiz_web",
        views: {
          'menuContent' :{
        	templateUrl:'templates/registermodel.html', 
            controller:'WebCtrl'
          }
        }
      })
 
    /*----------------------------------menus in sidebar--------------------------------------------*/
	
	/*----------------------------------menus in homepage--------------------------------------------*/
    .state('app.about_gksf', {
      url: "/about_gksf",
      views: {
        'menuContent' :{
          templateUrl: "templates/about_gksf.html"
        }
      }
    })
	
    .state('app.culture', {
      url: "/culture",
      views: {
        'menuContent' :{
          templateUrl: "templates/culture.html"
        }
      }
    })

    .state('app.sponsors', {
      url: "/sponsors",
      views: {
        'menuContent' :{
          templateUrl: "templates/sponsors.html"
        }
      }
    })

    .state('app.gallery', {
      url: "/gallery",
      views: {
        'menuContent' :{
          templateUrl: "templates/gallery.html",
          controller:'galleryCtrl'
        }
      }
    })

	/*---------------------------------menus in homepage----------------------------------------*/
	
	/*---------------------------------ANNOUNCEMENT ITEM----------------------------------------*/
  
    .state('app.announcementsitem', {
      url: "/announcementsitem/:itemId",
      views: {
        'menuContent' :{
          templateUrl: "templates/announcementsitem.html",
          controller:'announcementdetailCtrl'
        }
      }
    })
	
	/*---------------------------------ANNOUNCEMENT ITEM----------------------------------------*/

	/*---------------------------------DEALS ITEM----------------------------------------*/

    .state('app.dealsitem', {
      url: "/dealsitem/:dealId",
      views: {
        'menuContent' :{
          templateUrl: "templates/dealsitem.html",
          controller:'dealsdetailsCtrl'
        }
      }
    })
	
	/*---------------------------------DEALS ITEM----------------------------------------*/

	/*---------------------------------DINING ITEM----------------------------------------*/

    .state('app.diningitem', {
      url: "/diningitem/:diningId",
      views: {
        'menuContent' :{
          templateUrl: "templates/diningitem.html",
          controller:'diningdetailCtrl'
        }
      }
    })
	
	/*---------------------------------DINING ITEM----------------------------------------*/



    .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/home');
});

This is what i am trying to do
1.When i click the side menu QUIZ quiz page is loaded

2.Here i want use the TAB menu


#2

hey ,

try using TabsDelegate
http://ionicframework.com/docs/api/service/$ionicTabsDelegate/