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


#1

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>

#2

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>

#3

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?


#4

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.


#5

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


#6

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


#7

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

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