I downloaded the “ionic-angular-cordova-seed-master” and tried to alter it.
I wanted to see if I could have 5 tabs in the bottom nav <ion-tab>
. I renamed the “adopt” tab to “tabtwo” and the “about” tab to “tabthree” in the template/tabs.html and changed their icons as well, and I created new templates for the renamed tabs in the template folder: tabtwo.html and tabthree.html. I altered app.js to reflect the name changes.
I didn’t mess with the pets tab, (the first tab) or its content since it has a pet detail sub tab that involves ui-router in a way I don’t understand yet.
So anyway, that all worked fine. I then tried to add more tabs:
I added the additional <ion-tab>
s in tabs.html. Call them “tabfour” and "tabfive"
with new ionic icons. I created template pages for them, and copied and added <ion-tab>
and <ion-nav-view>
code like the second and third tabs had, renaming as appropriate. So that worked and it looks great. So the first three tabs work great: pet, tab two, and tab three. Pet tab saves state if a pet detail has been selected and you navigate away and come back, it is on the right pet detail. Okay, so tab four and five look great but don’t work, since I haven’t updated app.js
So when I update app.js and add
.state('tab.tabfour', {
url: "/tabfour",
views: {
'tabfour-tab': {
templateUrl: 'templates/tabfour.html',
}
}
})
to app.js, copying from the working third tab, the app train wrecks, since now when it loads, it is blank.
Clearly, there is something about this use of ui-router or ion-tab that I don’t understand. Does the added code need a controller? (grasping at straws) the pet has one, but the adopt and about didn’t.
Any help on this question or pointing me to a version of the seed that works with five tabs would be great. I did find something on code pen that someone posted with ionic with 5 tabs, but it didn’t work, and had repeated tabs (not unique tabs pointing to unique templates) so that doesn’t help me.