Multiple page app, slide animation and back buttons. No tabs

I have started using ionic last week, i love the styles and clean UI feel, but i am having trouble trying to get my app to use the slide animation and show back buttons with no luck.

I have read the tutorial and on the forums, and it says somewhere not to use ngRoute, but to use the stateProvider (new to angularJS as well). After doing this, i can get the slide animation, and my pages animate one to another, but no back button appears?

I have my code in separate html pages as i like to keep them separate so its easier to find my code, and the examples and tutorial seem to load the code in scripts where ng-template is set. I am not using this.

Also, the content seems to go behind the navigation bar? Maybe this is a bug? Would really appreciate it if someone could help me. banging my head against a wall here.

Code below is for app.js, index.html, home.html, settings.html.

app.js

var app = angular
.module('myApp', ['ionic', 'ngRoute', 'myApp.controllers'])
.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        // device ready
    });
})

.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state("home", {url:"/home", templateUrl: "partials/home.html", controller:"homeController"})
        .state("settings", {url:"/settings", templateUrl: "partials/settings.html", controller: "settingsController"})

    $urlRouterProvider.otherwise("/home");
}]);

Index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My App</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

<link type="text/css" rel="stylesheet" href="lib/ionic/css/ionic.css">

<script type="text/javascript" src="lib/ionic/js/ionic.bundle.js"></script>

<!-- Needed for Cordova/PhoneGap (will be a 404 during development) -->
<script type="text/javascript" src="cordova.js"></script>

<!-- AngularJS -->
<script type="text/javascript" src="lib/ionic/js/angular/angular.js"></script>
<script type="text/javascript" src="lib/ionic/js/angular/angular-animate.min.js"></script>
<script type="text/javascript" src="lib/ionic/js/angular/angular-route.min.js"></script>
<script type="text/javascript" src="lib/ionic/js/angular/angular-resource.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers.js"></script>
</head>
<body ng-app="myApp">
<ion-nav-bar class="nav-title-slide-ios7 bar-positive"></ion-nav-bar>
<ion-nav-view animation="slide-left-right">
    <!-- Center content -->
</ion-nav-view>
</body>
</html>

Home.html

<ion-view title="Home">
<ion-content >
    <div class="list list-inset">
    <div class="available-header">Available items to add</div>
    <div class="list">
        <a ng-repeat="link in availableList" class="item item-icon-right" href="#/add/{{link.id}}">
            <p class="name">{{link.name}}</p>
            <p>{{link.description}}</p>
        </a>
    </div>
    </div>
</ion-content>
<ion-footer-bar class="home-footer">
    <table class="home-table">
        <tr>
            <td>
                <button class="button button-block button-positive">Help</button>
            </td>
            <td>
                <a class="button button-block button-positive" href="#/settings">Settings</a>
            </td>
            <td>
                <a class="button button-block button-positive" href="#/existing">Saved Data</a>
            </td>
            <td>
                <button class="button button-block button-energized">Upload</button>
            </td>
        </tr>
    </table>
</ion-footer-bar>
</ion-view>

Settings.html

<ion-view title="Settings">
<ion-content>
    <div class="list list-inset">
        <p>This is my settings screen</p>
        <label class="item item-input">
            <input type="text">
        </label>
        <label class="item item-input">
            <input type="text">
        </label>
        <button class="button button-block button-positive">Setup my device</button>
    </div>
</ion-content>
</ion-view>

For a back button to appear, you now have to explicitly add it to your ion-nav-bar.

<ion-nav-bar class="nav-title-slide-ios7 bar-positive">
   <ion-nav-back-button class="button-icon ion-arrow-left-c"></ion-nav-back-button>
</ion-nav-bar>

Thanks for the response. Goods news and bad news.

Good news if your example works.

Bad news, your example is loading the ion_view using the script tag. I would like to do this in separate pages.

If i use your code, but keep the ion_view in separate pages, then i get no back button and the content goes behind the headers. If i put the ion-view within a script tag (using ng-template) then it works…

Is this a bug or do i need to do something extra to keep the views in separate html pages?

This should better fit your example, as the files are kept separate. If you want to keep your views in a view folder, then just adjust the path to them in your js. Look at my script.js file.

Thank you! Dont know why mine didnt work, but copied and pasted your version and all fine. Thanks again

Well in your example, you’re trying to load ionic.bundle.js as well as a whole bunch of angular files. The bundle js file is a combination of all those file so theres no need to add the addition ones

Your first module statement should not reference ngRoute - ui.router is included in the bundle:

var app = angular
.module(‘myApp’, [‘ionic’, ‘myApp.controllers’])