Anoop Anoop - 3 months ago 23
AngularJS Question

Page is not displaying [Ionic]

I am a beginner in Ionic and AngularJS. I am trying to display the locations file in my Ionic app but the content on this page is not displaying; but the URL is changing. Thanks in advance.

Call to Location file

<a class="item item-icon-left " href="#/tab/locations">
<i class="icon ion-search"></i>
Near Places
</a>


App.js

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {

if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);

}
if (window.StatusBar) {

StatusBar.styleDefault();
}
});
})

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

$stateProvider

.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})


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

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

.state('tab.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'templates/tab-chats.html',
controller: 'ChatsCtrl'
}
}
})
.state('tab.chat-detail', {
url: '/chats/:chatId',
views: {
'tab-chats': {
templateUrl: 'templates/chat-detail.html',
controller: 'ChatDetailCtrl'
}
}
})

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


$urlRouterProvider.otherwise('/tab/dash');

});



File name: tab-locations.html


<ion-view view-title="location">
<ion-content>
<div class="list list-inset">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Search">
</label>
</div>
</ion-content>




Tabs.html

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

<!-- Dashboard Tab -->
<ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash">
<ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>

<!-- Chats Tab -->
<ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/chats">
<ion-nav-view name="tab-chats"></ion-nav-view>
</ion-tab>

<!-- Account Tab -->
<ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/account">
<ion-nav-view name="tab-account"></ion-nav-view>
</ion-tab>


</ion-tabs>

Answer

In order to make tab.locations state to work, you need to add new tab Location in templates/tabs.html. Additionally it should also have name="tab-locations" so that tab.locations would place template in it.

<ion-tab title="Locations" icon-off="ion-ios-gear-outline" 
 icon-on="ion-ios-gear" href="#/tab/account">
    <ion-nav-view name="tab-locations"></ion-nav-view>
</ion-tab>