<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<title>Ionic Framework Example</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"/>
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<ion-nav-view animation="slide-left-right"></ion-nav-view>
</div>
</body>
</html>
var app = angular.module('myApp', ['ionic']);
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('index', {
url: '/',
templateUrl: 'home.html'
})
.state('music', {
url: '/second',
templateUrl: 'second.html'
});
$urlRouterProvider.otherwise('/');
});
app.controller('MainCtrl', function($scope) {
});
<ion-view>
<ion-header-bar class="bar-header">
<h1 class="title">Main Page</h1>
</ion-header-bar>
<ion-content has-header="true" padding="true">
<a class="button icon-right ion-chevron-right" href="#/second">Go to the music page!</a>
</ion-content>
</ion-view>
<ion-view>
<ion-header-bar class="bar-header">
<h1 class="title">Second Page</h1>
</ion-header-bar>
<ion-content has-header="true" padding="true">
<a class="button icon-left ion-home" href="#/">Go back!</a>
</ion-content>
</ion-view>