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>