templateUrl not loading in named view

ionic-v1
1

Hi,

I’m currently working on multiple named views in my app. I’ve managed to get the routes working but the template is not showing up. Below are my codes:

HTML:

<body ng-app="app">

    <ion-header-bar align-title="left" class="bar-energized">
        <h1 class="title">Misa</h1>
    </ion-header-bar>

    <ion-tabs class="tabs-stable">
        <!-- Featured Tab -->
        <ion-tab title="Featured" href="#/featured">
            <ion-nav-view name="tab-feat"></ion-nav-view>
        </ion-tab>

        <!-- Search Tab -->
        <ion-tab title="Search" href="#/search">
            <ion-nav-view name="tab-search"></ion-nav-view>
        </ion-tab>

        <!-- Favorites Tab -->
        <ion-tab title="Favorites" href="#/favorites">
            <ion-nav-view name="tab-fav"></ion-nav-view>
        </ion-tab>
    </ion-tabs>

</body>

JS:

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

    $stateProvider

    .state('featured', {
        url: '/featured',
        views: {
            'tab-feat': {
                templateUrl: 'featured.html',
                controller: function($scope) {
                    console.log("AAAAAAAAAAAAAAAAAA");
                }
            }
        }
    })

    .state('search', {
        url: '/search',
        views: {
            'tab-search': {
                template: '<h1>SEARCH</h1>'
            }
        }
    })

    .state('favorites', {
        url: '/favorites',
        views: {
            'tab-fav': {
                template: '<h1>FAVORITES</h1>'
            }
        }
    });

    $urlRouterProvider.otherwise('/featured');
});

I can see the routes change appropriately and I can also see the console log when the route changes to /featured but I can’t see anything in the view. The featured.html file contains <h1>FEATURED</h1>. Can anyone help?

Thanks!

2

You have to use the relative template path from your index.html

E.g.

app/
    templates/
        - features.html
index.html

then your templateUrl is app/templates/features.html

3

Found out what the problem was. I apparently need to to put everything in my template inside the <ion-content> tag for it to show.