Ionic routing to sub-page - angularjs

Question

I'm having trouble setting up ionic to do proper routing. Want it to upen another page and have the back button displayed.
routes.js
angular.module('app.routes', [])
.config(function($stateProvider, $urlRouterProvider) {
// Learn more here: https://github.com/angular-ui/ui-router
$stateProvider
.state('records', {
url: '/records',
templateUrl: 'templates/records.html',
controller: 'RecordsCtrl'
})
.state('records-newRecord', {
url: '/records/newRecord',
templateUrl: 'templates/newRecord.html',
controller: 'newRecordCtrl'
})
$urlRouterProvider.otherwise('/records')
});
records.html
<ion-view title="Records" id="main">
<ion-nav-bar>
<!-- ADD BUTTON-->
<ion-nav-buttons side="primary">
<button class="button button-icon ion-plus-circled" href="#/records/newRecord"></button>
</ion-nav-buttons>
<!--SEARCH BUTTON-->
<ion-nav-buttons side="secondary">
<button class="button button-icon ion-search" ng-click="toggleSearchBar()"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content padding="true" class="has-header">
<!-- SEARCH BAR -->
<div ng-show="showSearchBar">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="">
</label>
</div>
<!-- LIST OF RECORDS -->
<form class="list">
<ion-item class="item-thumbnail-left">
<img src="img/pQqcmU4fR8GSvP092hQN_Lockreal72.jpg">
<h2>Temp. Logger PC4</h2>
<p>SN C001517 A</p>
</ion-item>
</form>
</ion-content>
</ion-view>
The problem is that it does not redirect.
I had another version that did, but it didn't show the back button or if it did then the header was empty. So changed the code to what it is now.
What am I doing wrong here?
BTW: Is there a way to prompt the user if the back button is pressed. Like prompting and asking "Sure you wanna leave?"

Answer 1

On the new Record page try adding the ion-nav-back-button markup in ion-nav-bar that should add a backbutton you can also check the docs for ways to customise the button
<ion-nav-bar>
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
and about adding a prompt you will need to use the custom method instead
Template
<ion-nav-bar ng-controller="MyCtrl">
<ion-nav-back-button class="button-clear"
ng-click="myGoBack()">
<i class="ion-arrow-left-c"></i> Back
</ion-nav-back-button>
</ion-nav-bar>
Controller
function MyCtrl($scope, $ionicHistory, $ionicPopup) {
$scope.myGoBack = function () {
$ionicPopup.confirm({
title: 'Leaving',
template: 'Are you sure you want to leave?'
}).then(function (res) {
if (res) {
$ionicHistory.goBack();
} else {
console.log('You are not sure');
}
});
};
}

Answer 2

I found the that using the ui-sref= is a simple solution from this post.
<ion-view view-title="Records" id="main">
<ion-nav-bar class="bar-stable">
<!-- ADD BUTTON-->
<ion-nav-buttons side="primary">
<button class="button button-icon ion-plus-circled" ui-sref="newrecord"></button>
</ion-nav-buttons>
...
Made the routes.js more simple
angular.module('app.routes', [])
.config(function($stateProvider, $urlRouterProvider) {
// Learn more here: https://github.com/angular-ui/ui-router
$stateProvider
.state('records', {
url: '/records',
templateUrl: 'templates/records.html',
controller: 'RecordsCtrl'
})
.state('newrecord', {
url: '/newrecord',
templateUrl: 'templates/newRecord.html',
controller: 'newRecordCtrl'
})
$urlRouterProvider.otherwise('/records')
});