Tabs and stateprovider

ionic-v1
1

Hey guys,

I have a quick question about how tabs work.
In my index.html I have

        <ion-tab title="Home" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline" href="#/tabs/home">
        </ion-tab>

        <ion-tab title="About" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
            <!-- Tab 2 content -->
        </ion-tab>

        <ion-tab title="Settings" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">
        </ion-tab>

    </ion-tabs>

and in my app config I have

.config(['$stateProvider', function($stateProvider) {
                $stateProvider.state('tabs.home', {
                    url: '/tabs/home',
                    templateUrl: 'templates/home.html'
                });
            }]);

Can someone please explain to me why the tabs.home state does not render my template? I have resorted to just using an ng-include directive to include my views, but I would much rather work with the stateProvider.

2

We need more information how you define your $stateProvider
and how a view looks

What i did in my app is following:

$stateProvider
        // Used for views w/o tabs
        .state('main', {
            url: "",
            abstract: true,
            templateUrl: "views/main.html"
        })
        // Container for Tabs
        .state('main.tabs', {
            url: "/tab",
            abstract: true,
            views: {
                'main-content': {
                    templateUrl: "views/tabs.html",
                    controller: "TabController"
                }
            }
        })
        // View within a Tab
        .state('main.tabs.setting', {
            url: "/setting",
            views: {
                'setting-tab': {
                    templateUrl: "views/setting/settings.html",
                    controller: 'SettingsController'
                }
            }
        })
        // View w/o Tabs
        .state('main.settingAbout', {
            url: "/setting/about",
            views: {
                'main-content': {
                    templateUrl: "views/setting/about.html"
                }
            }
        })

And my files looks like this:
main.html:

<ion-pane >
    <ion-nav-bar class="bar-positive avant"></ion-nav-bar>
    <ion-nav-view name="main-content"></ion-nav-view>
</ion-pane>

tabs.html:

<ion-tabs class="tabs-icon-top">

    <ion-tab title="one" icon="ion-ionic" href="#/tab/one">
        <ion-nav-view name="one-tab"></ion-nav-view>
    </ion-tab>

    <ion-tab title="Two" icon="ion-ionic" href="#/tab/two">
        <ion-nav-view name="two-tab"></ion-nav-view>
    </ion-tab>


    <ion-tab title="Settings" icon="ion-ios7-gear-outline" href="#/tab/setting">
        <ion-nav-view name="setting-tab"></ion-nav-view>
    </ion-tab>
</ion-tabs>

and a view looks like this:

<ion-view title="Settings">
    <ion-content has-header="true" scroll="false" >
        // your Content
    </ion-content>
</ion-view>

i hope i could help you

3

Thank you so much!
After playing around with it, I finally got it to work.
My problem was, that I was not naming my views and thus it didn’t know where to load the templates.