I have nested views inside the main.html template that are not showing the h1 message.
this is my routes
.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
.state('login',{
url: '/',
templateUrl: 'templates/login.html',
controller:'loginController'
})
.state('main', {
url: 'main',
templateUrl: 'templates/main.html'
})
.state('main.categories', {
url: '/categories',
views: {
'main-categories': {
templateUrl: 'templates/main-categories.html',
controller: 'categoriesController'
}
}
})
.state('main.products', {
url: '/products',
views: {
'main-products': {
templateUrl: 'templates/main-products.html',
controller: 'productsController'
}
}
})
.state('main.tickets', {
url: '/tickets',
views: {
'main-tickets': {
templateUrl: 'templates/main-tickets.html',
controller: 'ticketsController'
}
}
})
})
the state main has child views of main.categories, main.products and main.tickets. This is my main.html template holding the child views
<div class="bar bar-header">
<button class="button button-icon icon ion-navicon"></button>
<div class="h1 title">Header Buttons</div>
<button class="button button-clear button-positive">Edit</button>
</div>
<!--categories-->
<div class="col-20">
<ion-nav-view name="main-categories"></ion-nav-view>
</div>
<!--products-->
<div class="col-60">
<ion-nav-view name="main-products"></ion-nav-view>
</div>
<!--tickets-->
<div class="col-20">
<ion-nav-view name="main-tickets"></ion-nav-view>
</div>
</div>
this is what i have in the main-categories child view
<h1>categories</h1>
this is what i have in the main-products child view
<h1>products</h1>
this is what i have in the main-tickets child view
<h1>tickets</h1>
i want those 3 child views to diplay child when i go to the /main url. what am I doing wrong ?