Develop Reference

Adding hardware Back button to Home for Ionic in android

Ionic has a different navigation when press a function from side menu. When you press a back button from handset, it will straight away exit.
I refer to this tutorial and make the changes to my app.js but it unable to back to home page but exit the app.
The code suppose to (which is what I needed):
1.if not at home page, it will back to previous page if press hardware back button
2.if it is at home page, press hardware back button will show pop up to confirm if user really want to exit.
app.js
angular.module('myapp', ['ionic', 'myapp.controllers', 'myapp.factories'])
.run(function($ionicPlatform,$state,$ionicHistory,$ionicPopup) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
$ionicPlatform.registerBackButtonAction(function (event) {
event.preventDefault();
if ($state.current.name == "app.home") {
var confirmPopup = $ionicPopup.confirm({
title: 'Exit',
template: 'Confirm Exit'
});
confirmPopup.then(function (res) {
if (res) {
navigator.app.exitApp();
}
});
} else {
$ionicHistory.nextViewOptions({ disableBack: true });
$state.go('app.home');
}
}, 100);//registerBackButton
});
})
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'menuCtrl'
})
.state('app.home', {
url: '/home',
views: {
'menuContent': {
templateUrl: 'templates/home.html',
controller: 'homeCtrl'
}
}
})
.state('app.personalitem', {
url: '/personalitem',
views: {
'menuContent': {
templateUrl: 'templates/personalitem.html',
controller: 'personalitemCtrl'
}
}
})
.state('app.pStock', {
url: '/pStock',
views: {
'menuContent': {
templateUrl: 'templates/pStock.html',
controller: 'pStockCtrl'
}
}
});
angular.module('myapp.factories', []);
angular.module('myapp.controllers', []);
How shall I do with my code so that I can get the hardware back button work?

Can you try:
menu.ts openPage(page) {
this.nav.setRoot(page.component);
}
menu.html <button class="menuList" menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
app.component.ts pages: any[] = [
{ title: 'Welcome', component: IntroPage },
{ title: 'Home', component: TabsPage },
]

Using $state.go() with onResume()

I am trying to redirect to my login page each time my application comes from background to foreground but I get that error :
Uncaught TypeError: $state.go is not a function
So I obviously did something wrong, but I can't get what.
Here is some parts of my code in my app.js :
// Ionic Starter App
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('resetLogin', {
url: '/resetLogin',
templateUrl: 'templates/resetLogin.html',
controller: 'ResetLoginCtrl'
})
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
});
$urlRouterProvider.otherwise('/login');
})
.run(function($ionicPlatform, $state) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
function onDeviceReady() {
}
});
document.addEventListener("resume", onResume, false);
function onResume($state){
$state.go('login');
}

Juste move your function in the block run and remove $state in the onResume.
Only angular function are injectable. In fact you're probably getting an event object in your case but surely not the $state.
.run(function($ionicPlatform, $state) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
function onDeviceReady() {
}
document.addEventListener("resume", onResume, false);
function onResume(){
$state.go('login');
}
});

Ionic framework redirect to home on start

I'm building a mobile app with ionic, I'm facing a strange problem ..
If I reload the page ( F5 ) from, let say "/tabs/connected/channel/edit" I'm always redirected to "/tabs/home" ( after the state resolving ).
PS : The resolve phase is correclty executed and I never reject it. And then on promise resolving I'm always redirected to /tabs/home.
Here is my config block :
.config(function($stateProvider, $urlRouterProvider) {
var userResolve = function(user, $q, $auth) {
if (!$auth.isAuthenticated()) {
return $q.resolve();
}
if (user.loaded) {
return $q.resolve();
}
return user.blockingRefresh();
};
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('tabs', {
url: '/tabs',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tabs.home', {
url: '/home',
views: {
'home-tab': {
templateUrl: 'templates/home.html',
controller: ''
}
}
})
.state('tabs.account', {
url: '/account',
views: {
'account-tab': {
templateUrl: 'templates/account/account.html',
controller: 'AccountController'
}
},
resolve: {
userData: userResolve
}
})
.state('tabs.login', {
url: '/account/login',
views: {
'account-tab': {
templateUrl: 'templates/account/login.html',
controller: 'AccountController'
}
}
})
.state('tabs.register', {
url: '/account/register',
views: {
'account-tab': {
templateUrl: 'templates/account/register.html',
controller: 'RegisterController'
}
}
})
.state('tabs.connected', {
url: '/connected',
abstract: true,
views: {
'account-tab': {
templateUrl: "templates/connected.html"
}
},
resolve: {
userData: userResolve
}
})
.state('tabs.connected.channel-create', {
url: '/channel/create',
templateUrl: 'templates/channel/create.html',
controller: 'CreateChannelController'
})
.state('tabs.connected.channel-edit', {
url: '/channel/edit',
templateUrl: 'templates/channel/edit.html',
controller: 'EditChannelController'
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tabs/account');
})
Here is tabs.html :
<ion-tabs class="tabs-assertive tabs-icon-top">
<ion-tab title="Home" ui-sref="tabs.home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Account" ui-sref="tabs.account" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
<ion-nav-view name="account-tab"></ion-nav-view>
</ion-tab>
I must precise that I never use $state.go('/tabs/home') I'm my code at all. I'm sure of that.
My goal is to stay on the same route even if I reload the app. ( This problem does not occurs on some state and I don't know why because they doesn't do anything different than the problematic ones .. )
Thank you !

I also got this type of error in Angular Ui-Router.
Below solution is work for me.
Just change it too
.state('tabs.connected.channelcreate', {
url: '/channelcreate',
templateUrl: 'templates/channel/create.html',
controller: 'CreateChannelController'
})
url should be
"/tabs/connected/channeledit"
And it will work.

Ionic view name not working

I have an ionic app that I'm trying to build some views for. However, for some reason when I create a unique view-name name, my view doesn't work and it redirects to #/tab/home. The view I'm trying to create is called login, it should be accessed by going to #/tab/login.
Here's my full app.js file.
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ui.rCalendar'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
// Each tab has its own nav history stack:
.state('tab.home', {
url: '/home',
views: {
'tab-home': {
templateUrl: 'templates/tab-home.html',
controller: 'HomeCtrl'
}
}
})
.state('tab.feed', {
url: '/feed',
views: {
'tab-feed': {
templateUrl: 'templates/tab-feed.html',
controller: 'FeedCtrl'
}
}
})
.state('tab.login', {
url: '/login',
views: {
'tab-login': {
templateUrl: 'templates/tab-login.html',
controller: 'LoginCtrl'
}
}
})
.state('tab.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'templates/tab-chats.html',
controller: 'ChatsCtrl'
}
}
})
.state('tab.chat-detail', {
url: '/chats/:chatId',
views: {
'tab-chats': {
templateUrl: 'templates/chat-detail.html',
controller: 'ChatDetailCtrl'
}
}
})
.state('tab.events', {
url: '/events',
views: {
'tab-events': {
templateUrl: 'templates/tab-events.html',
controller: 'EventsCtrl'
}
}
})
.state('tab.cart', {
url: '/cart',
views: {
'tab-cart': {
templateUrl: 'templates/tab-cart.html',
controller: 'CartCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/login');
});
I've got a file called tab-login.html. When I change the view-name from tab-login to anything else that already exists like tab-feed, when I go to #/tab/login it works fine. So it works when it looks like this:
.state('tab.login', {
url: '/login',
views: {
'tab-feed': {
templateUrl: 'templates/tab-login.html',
controller: 'LoginCtrl'
}
}
})
It works just fine...which makes no sense to me. What am I doing wrong? And why is it redirecting to home when I have it set to default to login?

Ionic how to go back state programmatically

I have a go back button that when i hit the ng-click='goBack()'. i can see the url in the browser that changes from http://app:8888/#/main/payments to http://app:8888/#/main/products/7 which is the right path that I want to go back to but the problem is that the view doesn't transition there.
I have to hit refresh button in order to go there or do a window.location.reload after the $ionicHistory.goBack();.
I don't want to reload the whole page I want to transition that view to the previous one.
this is my html
<div class="row">
<div class="col col-25">
<button ng-click="goBack()" class="button button-large button-block button-royal">Go Back</button>
</div>
</div>
this is my controller
.controller('paymentsController', function($scope, $localStorage, $log, $state, $window, $ionicHistory){
$scope.goBack = function(){
$ionicHistory.goBack();
}
})
this is my app.js I don't know if this would help.
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngStorage'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider){
//$ionicConfigProvider.views.transition('none');
$urlRouterProvider.otherwise('/');
$stateProvider
.state('login',{
url: '/',
templateUrl: 'templates/login.html',
controller: 'loginController'
})
.state('main', {
url: '/main',
templateUrl: 'templates/main.html',
controller: 'mainController',
abstract: true
})
.state('main.categories', {
url: '/categories',
views: {
'categories': {
templateUrl: 'templates/categories.html',
controller: 'categoriesController'
}
}
})
.state('main.products', {
url: '/products/:productId',
views: {
'products': {
templateUrl: 'templates/products.html',
controller: 'productsController'
}
}
})
.state('main.payments', {
url: '/payments',
views: {
'payments': {
templateUrl: 'templates/payments.html',
controller: 'paymentsController'
}
}
})
})

Call this from your controller where you want to go back..
var backCount = 1;
$rootScope.$ionicGoBack();
$rootScope.$ionicGoBack = function(backCount) {
$ionicHistory.goBack(backCount);
};

Use $state to redirect to particular view:
$state.transitionTo('main');
here 'main' is your view name that you have defined into your urlrouterprovider.
OR
You can also use $location
$location.path('main');
don't forget to add $state or $location into your controller's parameter.