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 },
]
Related
I have an issue that i don't know how to solve it. My localNotification is working great with a button but what I need is when the page open, call the notification function automatically, how do I do that?
angular.module('starter', ['ionic', 'ngCordova', 'starter.controllers'])
//enter code here
.run(function($ionicPlatform, $rootScope) {
$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);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
$rootScope.$on('$cordovaLocalNotification:schedule',
function (event, notification, state) {
console.log("SCHEDULE");
console.log('event', event);
console.log('notification', notification);
console.log('state', state);
});
$rootScope.$on('$cordovaLocalNotification:trigger',
function (event, notification, state) {
console.log("TRIGGER");
console.log('event', event);
console.log('notification', notification);
console.log('state', state);
});
$rootScope.$on('$cordovaLocalNotification:update',
function (event, notification, state) {
console.log('UPDATE');
console.log('event', event);
console.log('notification', notification);
console.log('state', state);
});
$rootScope.$on('$cordovaLocalNotification:cancel',
function (event, notification, state) {
console.log('CANCEL');
console.log('event', event);
console.log('notification', notification);
console.log('state', state);
});
});
})
.controller('SampleController',
function ($scope, $cordovaLocalNotification, $ionicPlatform) {
$ionicPlatform.ready(function () {
$scope.scheduleInstantNotification = function () {
$cordovaLocalNotification.schedule({
id: 1,
text: 'Instant Notification',
title: 'Instant'
}).then(function () {
alert("Instant Notification set");
});;
};
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templatesInfo/menu.html',
controller: 'AppCtrl'
})
.state('app.search', {
url: '/search',
views: {
'menuContent': {
templateUrl: 'templatesInfo/search.html'
}
}
})
.state('app.browse', {
url: '/browse',
views: {
'menuContent': {
templateUrl: 'templatesInfo/browse.html'
}
}
})
.state('app.playlists', {
url: '/playlists',
views: {
'menuContent': {
templateUrl: 'templatesInfo/playlists.html',
controller: 'PlaylistsCtrl'
}
}
})
.state('app.single', {
url: '/playlists/:playlistId',
views: {
'menuContent': {
templateUrl: 'templatesInfo/playlist.html',
controller: 'PlaylistCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/playlists');
});
View:
<ion-view view-title="Information">
<ion-content>
<div class="list card" >
<div class="item item-avatar" >
<h2>Dr. Therese Ouellet</h2>
<p>Agriculture and Angri food Canada</p>
</div>
<div class="item item-body">
<img class="full-image" src="img/therese.jpg">
<p>
This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
the content is from a card-body consisting of an image and paragraph text. The footer
consists of tabs, icons aligned left, within the card-footer.
</p>
</div>
</div>
<button class="button button-block button-positive" ng-click="scheduleInstantNotification()">
Instant
</button>
</ion-content>
</ion-view>
You can use $ionicView.enter event in your $scope to run specific code right after the view/page has fully entered and is now the active view.
This event will fire, whether it was the first load or a cached view
Your new SampleController:
.controller('SampleController',
function ($scope, $cordovaLocalNotification, $ionicPlatform) {
$ionicPlatform.ready(function () {
$scope.scheduleInstantNotification = function () {
$cordovaLocalNotification.schedule({
id: 1,
text: 'Instant Notification',
title: 'Instant'
}).then(function () {
alert("Instant Notification set");
});;
};
$scope.$on("$ionicView.enter", function(event, data){
// handle event
$scope.scheduleInstantNotification();
});
});
})
Checkout full details here: ionView
This is my index.html:
<body>
<div ui-view></div>
</body>
This is my app.js:
angular.module('sample', [
'auth0',
'ngRoute',
'sample.home',
'sample.header',
'sample.login',
'ui.router',
'angular-storage',
'angular-jwt'
])
.config(function myAppConfig($stateProvider, $urlRouterProvider, $routeProvider, authProvider, $httpProvider, $locationProvider,
jwtInterceptorProvider) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'login/login.html',
controller: 'LoginCtrl'
}).state('root', {
url: '/',
abstract: true,
views: {
'header': {
templateUrl: 'home/header.html',
controller: 'HeaderCtrl'
},
'footer': {
templateUrl: 'home/footer.html'
}
},
data: {
requiresLogin: true
}
}).state('root.home', {
url: '/',
views: {
'#': {
templateUrl: 'home/home.html'
}
},
data: {
requiresLogin: true
}
})
$urlRouterProvider.otherwise('/');
authProvider.init({
domain: AUTH0_DOMAIN,
clientID: AUTH0_CLIENT_ID,
loginUrl: '/login'
});
jwtInterceptorProvider.tokenGetter = function(store) {
return store.get('token');
}
$httpProvider.interceptors.push('jwtInterceptor');
})
.run(function($rootScope, auth, store, jwtHelper, $location, $state, $stateParams) {
$rootScope.$on('$locationChangeStart', function() {
if (!auth.isAuthenticated) {
var token = store.get('token');
if (token) {
if (!jwtHelper.isTokenExpired(token)) {
auth.authenticate(store.get('profile'), token);
} else {
$location.path('/login');
}
}
}
});
})
.controller('AppCtrl', function AppCtrl($scope, $location) {
$scope.$on('$routeChangeSuccess', function(e, nextRoute) {
if (nextRoute.$$route && angular.isDefined(nextRoute.$$route.pageTitle)) {
$scope.pageTitle = nextRoute.$$route.pageTitle + ' | Auth0 Sample';
}
});
})
If I do login & the root that's commented out, everything works fine. But I need to put in a header and footer (the files are correct) and when I try the root + root.home, I get a blank screen with no errors on the browser's console either.
I'm trying to go off of a few examples from online (such as this one) but none are working out so I don't know what I'm doing wrong.
Right now my header/footer.html just say header/footer.html while home has a button on it.
Added the full app.js in case that helps. Each html (footer/header/home) just has
<h1>Home</h1>
<div ui-view></div>
Edit: index.html
<body>
<div ui-view="header"></div>
<div ui-view></div>
<div ui-view="footer"></div>
</body>
app.js
.state('root.home', {
url: '/',
views: {
'#': {
templateUrl: 'views/home.html',
controller: 'HomeCtrl'
}
},
data: {
requiresLogin: true
}
})
I believe your issue here is your route is looking for a view named container not a class.
<div ui-view="container"></div>
Since it can't find a view named that it does not insert anything in the view.
Or you can just change your view route to be:
views: {
'#': {
templateUrl: 'home/home.html'
}
Which will tell it to insert that HTML in the first unnamed view it finds.
You can find a break down of how nested views work with UI-Router here
Assuming your home.html looks like this:
<div ui-view="header"></div>
<div ui-view="footer"></div>
your route should be something like
views: {
'header#home': {
templateUrl: 'home/header.html',
controller: 'HeaderCtrl'
},
'footer#home': {
templateUrl: 'home/footer.html'
}
},
data: {
requiresLogin: true
}
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?
I am having issues with Ionic/Angular. I am new to ionic, and need some help. Most of the stuff online is for splash screens, so I came here for further assistance.
I want the app to default land on to the "welcome" page. What do I need to write? My code is as follows.
angular.module('starter', ['ionic', 'starter.controllers'])
.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) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.welcome', {
url: "/welcome",
views: {
'menuContent': {
templateUrl: "templates/welcome.html"
}
}
})
.state('app.bulletin', {
url: "/bulletin",
views: {
'menuContent': {
templateUrl: "templates/bulletin.html"
}
}
})
.state('app.lunch', {
url: "/lunch",
views: {
'menuContent': {
templateUrl: "templates/lunch.html"
}
}
})
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise("/app/welcome");
});
I think you need to remove the }); above the $urlRouterProvider since you have to define the otherwise() inside of the config;
app.config(function($urlRouterProvider){
// if the path doesn't match any of the urls you configured
// otherwise will take care of routing the user to the specified url
$urlRouterProvider.otherwise('/index');
})
Currently, we have a 'Portfolio' tool in beta. Once a user logs in to the main app, if they have been given access to the beta, they can navigate to the Portfolio tool directly, without any additional login. If not, they should be redirected to a Portfolio login page (state is called portfolio.login) where they can login or contact support/sales etc. Right now I have the check in the resolve block, however $state.go('portfolio.login') seems to fetch the right partials, but doesn't render them on screen or navigate to the appropriate URL.
Code:
angular.module('portfolio.manager').config(function ($logProvider, $stateProvider) {
'use strict';
$stateProvider
.state('portfolio.manager', {
url: '/manager',
resolve: {
CheckLoggedIn: function ($state, loggedIn) {
var _loggedIn = loggedIn.checkUser();
if (!_loggedIn) {
$state.go('portfolio.login');
console.log('not authorized');
}
},
portfolioAuthService: 'portfolioAuthService',
User: function(portfolioAuthService){
return portfolioAuthService.getUser();
},
Portfolios: function (User, portfolioManagerService) {
return portfolioManagerService.getPortfolios();
}
},
views: {
'main#': {
templateUrl: 'app/portfolio/manager/portfolio-manager.html',
controller: 'PortfolioManagerCtrl'
},
'no-portfolios#portfolio.manager': {
templateUrl: 'app/portfolio/manager/partials/no-portfolios.html'
},
'create#portfolio.manager': {
templateUrl: 'app/portfolio/manager/partials/create.html'
}
}
})
I ran in the same problem days ago. Instead of using resolve, I check if the user is logged when state changes, defining run module and listening $stateChangeStart event, then check if the current state required authentication. If so, check if the user is logged in.
angular.module('portfolio.manager').config(function ($logProvider, $stateProvider) {
'use strict';
$stateProvider
.state('portfolio.manager', {
url: '/manager',
resolve: {
portfolioAuthService: 'portfolioAuthService',
User: function(portfolioAuthService){
return portfolioAuthService.getUser();
},
Portfolios: function (User, portfolioManagerService) {
return portfolioManagerService.getPortfolios();
}
},
data: {
requiredAuthentication: true
},
views: {
'main#': {
templateUrl: 'app/portfolio/manager/portfolio-manager.html',
controller: 'PortfolioManagerCtrl'
},
'no-portfolios#portfolio.manager': {
templateUrl: 'app/portfolio/manager/partials/no-portfolios.html'
},
'create#portfolio.manager': {
templateUrl: 'app/portfolio/manager/partials/create.html'
}
}
})
})
.run(run);
run.$inject = ['$rootScope','$state','loggedIn'];
function run($rootScope,$state,loggedIn){
$rootScope.$on('$stateChangeStart',function(e,toState){
if ( !(toState.data) ) return;
if ( !(toState.data.requiredAuthentication) ) return;
var _requiredAuthentication = toState.data.requiredAuthentication;
if (_requiredAuthentication && !loggedIn.checkUser() ){
e.preventDefault();
$state.go('portfolio.login', { notify: false });
console.log('not authorized');
}
return;
});
};