i’m getting started with Ionic, and i’m training myself with the multiple views. But i have a little problem, here’s the code:
Here’s the index.html file:
<html>
<head>
...
</head>
<body ng-app="app">
<ion-nav-view></ion-nav-view>
</body>
</html>
app.js
(function(){
'use strict';
angular.module('app', ['ionic'])
.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('home',{
abstract : true,
url : '/home',
templateUrl: 'app/home.html'
})
.state('home.views', {
url: "/views",
views:{
'view1' : {template:'<h3>view1</h3>'},
'view2' : {template:'<h3>view2</h3>'},
'view3' : {template:'<h3>view3</h3>'}
}
})
$urlRouterProvider.otherwise("/home/views");
})
})()
home.html
<h1>Views</h1>
<ion-nav-view name='view1'></ion-nav-view>
<ion-nav-view name='view2'></ion-nav-view>
<ion-nav-view name='view3'></ion-nav-view>
But when i try to test this app running it on localhost, what i see is only the last view. If i delete from html the last , then the second one is showed, and so… I have really no idea how to fix it, can someone help me?