Come configurare sidemenu con le schede in ionico?

Question

A mio parere avere un sidemenu, per cose come le impostazioni e le pagine, combinato con le schede per l'app principale è un'interfaccia dell'app piuttosto essenziale e standard. Cose come l'app di Google Messenger lo usano.

Sto faticando per farlo funzionare e vedo che ci sono molte domande a riguardo con pochissime informazioni soddisfacenti. Ho combinato un sidemenu con gli swipebox. Questo dovrebbe essere altrettanto facile. Usavo jQuery Mobile per le mie app, che è molto più rozzo di Ionic ma fare un'interfaccia come questa è facile e funziona bene.

Il problema che sto riscontrando è che i modelli di schede non vengono caricati nelle schede. Questo può essere qualcosa di stupido che mi manca, ma qui è il mio codice app.js frammento di:

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

    .state('app', { 
    url: "/app", 
    abstract: true, 
    templateUrl: "templates/menu.html", 
    controller: 'AppCtrl' 
    }) 

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

.state('tab.tab1', { 
     url: 'tab/tab1', 
     views: { 
     'tab-tab1': { 
      templateUrl: 'templates/tab-tab1.html', 
      controller: 'tab1Ctrl' 
     } 
     } 
    }) 

.state('tab.tab-tab2', { 
     url: 'tab/tab2', 
     views: { 
     'tab-tab2': { 
      templateUrl: 'templates/tab-tab2.html', 
      controller: 'tab2Ctrl' 
     } 
     } 
    }) 

.state('tab.extras', { 
    url: 'tab/extras', 
    views: { 
     'tab-extras': { 
     templateUrl: 'templates/tab-extras.html', 
     controller: 'AccountCtrl' 
     } 
    } 
    }) 

    .state('app.about', { 
     url: "/about", 
     views: { 
     'menuContent': { 
      templateUrl: "templates/about.html", 
      controller: 'aboutCtrl' 
     } 
     } 
    }); 
    // if none of the above states are matched, use this as the fallback 
    $urlRouterProvider.otherwise('/app/tabs'); 
}); 

Il menu laterale funziona bene e posso navigare con al riguardo la pagina o torna alle schede. Le schede funzionano in quanto cambiano lo stato attivo e le icone cambiano colore, ma i modelli non vengono caricati in essi. Ho triplicato il doppio dei nomi di url.

Qualcuno sa come fare? Se ho fatto un piccolo errore da qualche parte e farlo funzionare, codepederò questo come un esempio di come creare questa interfaccia, tanto necessaria.

Modifica: come richiesto.

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

    <ion-tab title="tab1" icon="ion-man" href="#/tab/tab1"> 
    <ion-nav-view name="tab-tab1"></ion-nav-view> 
    </ion-tab> 

    <ion-tab title="tab2" icon="ion-person-stalker" href="#/tab/tab2"> 
    <ion-nav-view name="tab-tab2"></ion-nav-view> 
    </ion-tab> 

    <ion-tab title="Extras" icon="ion-heart" href="#/tab/extras"> 
    <ion-nav-view name="tab-extras"></ion-nav-view> 
    </ion-tab> 

</ion-tabs> 

Penso che tutti corrispondano, no?

Nota: per quanto riguarda la richiesta di questo è un duplicato; la mia app è un'app a schede con un menu laterale nella pagina di base. L'altra domanda riguarda un'applicazione con una serie di sezioni, una delle quali contiene schede. È una struttura completamente diversa.

Answer 1

Penso che il vostro routing sia un po 'fuori - gli stati vostri figli per le schede non sono completamente dichiarati. Li hai dichiarato come questo

.state('tab.tab1', { 

... e non hai mai dichiarato il genitore tab Stato. Quindi rimangono "sospesi" finché non viene dichiarato lo stato genitore. l'ui-router li ignorerà solo fino a quando ciò non accadrà.

Prova questa

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

    .state('app', { 
    url: "/app", 
    abstract: true, 
    templateUrl: "templates/menu.html", 
    controller: 'AppCtrl' 
    }) 

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

.state('app.tabs.tab1', { 
     url: '/tab1', 
     views: { 
     'tab-tab1': { 
      templateUrl: 'templates/tab-tab1.html', 
      controller: 'tab1Ctrl' 
     } 
     } 
    }) 

.state('app.tabs.tab2', { 
     url: '/tab2', 
     views: { 
     'tab-tab2': { 
      templateUrl: 'templates/tab-tab2.html', 
      controller: 'tab2Ctrl' 
     } 
     } 
    }) 

.state('app.tabs.extras', { 
    url: '/extras', 
    views: { 
     'tab-extras': { 
     templateUrl: 'templates/tab-extras.html', 
     controller: 'AccountCtrl' 
     } 
    } 
    }) 

    .state('app.about', { 
     url: "/about", 
     views: { 
     'menuContent': { 
      templateUrl: "templates/about.html", 
      controller: 'aboutCtrl' 
     } 
     } 
    }); 
    // if none of the above states are matched, use this as the fallback 
    $urlRouterProvider.otherwise('/app/tabs'); 
}); 

E meglio/più chiara da usare ui-sref piuttosto che href nel modello schede - più facile vedere quello che qualcosa stato mappato

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

    <ion-tab title="tab1" icon="ion-man" ui-sref="app.tabs.tab1"> 
    <ion-nav-view name="tab-tab1"></ion-nav-view> 
    </ion-tab> 

    <ion-tab title="tab2" icon="ion-person-stalker" ui-sref="app.tabs.tab2"> 
    <ion-nav-view name="tab-tab2"></ion-nav-view> 
    </ion-tab> 

    <ion-tab title="Extras" icon="ion-heart" ui-sref="app.tabs.extras"> 
    <ion-nav-view name="tab-extras"></ion-nav-view> 
    </ion-tab> 

</ion-tabs> 

Non testato, ma penso che dovrebbe aggiustarlo! Qualche errore nella console BTW?