Multiple views in a single page show only last


#1

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?