I have a ionic project which starts a user-intro page. I'll go to Main page after click start button.
app.js:
angular.module('app', ['ionic',
'app.intro'
])
app/intro/intro.js:
angular.module('app.intro',['app.intro.controller'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('intro', {
url: '/',
templateUrl: 'app/intro/index.html',
controller: 'IntroCtrl'
})
.state('main', {
url: '/main',
templateUrl: 'app/main/index.html'
});
$urlRouterProvider.otherwise('/');
});
IntroCtrl (app/intro/controller.js):
angular.module('app.intro.controller',[])
.controller('IntroCtrl',function($scope,$state,$ionicSlideBoxDelegate) {
$scope.startMain = function() {
$state.go('main');
};
});
But if the user is not logged-in I want to show login page instead.What should I do? Sorry, I'm new to ionic and angular. Thanks
What about the default state's controller simply using $state.go to one state if you are logged in and another if you are not?
Related
I am using the Iconic 4 framework and I'm trying to use the FirebaseUIAuth feature within my application but I am facing an issue when the user signs in.
Issue: When the user logs in, the sign in buttons disappear for the web & ios rendering of the application on my localhost (this is good), but I am having issues with the Android rendering. After logging in, the login/sign in buttons remain visible in the android rendering (not good...womp womp).
I have tried changing the signInFlow parameter to 'redirect' but the extent of my knowledge with the Ionic Framework has me a bit stumped since I am confused on how to get the login buttons redirect the user to a new view.
[app.module.ts file with firebaseUI config only]
const firebaseUiAuthConfig: firebaseui.auth.Config = {
signInFlow: 'popup', /*tried using 'redirect' to fix android rendering*/
signInOptions: [
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
{
scopes: [
'public_profile',
'email',
'user_likes',
'user_friends'
],
customParameters: {
'auth_type': 'reauthenticate'
},
provider: firebase.auth.FacebookAuthProvider.PROVIDER_ID
},
{
requireDisplayName: true,
provider: firebase.auth.EmailAuthProvider.PROVIDER_ID
}
],
tosUrl: '/terms',
privacyPolicyUrl: '/privacy',
credentialHelper: firebaseui.auth.CredentialHelper.NONE
};
[home.page.html file with firebaseui tag]
<ion-content padding>
<firebase-ui></firebase-ui>
<h1 *ngIf="afAuth.auth.currentUser">Welcome {{afAuth.auth.currentUser.displayName}}!</h1>
<ion-button *ngIf="afAuth.auth.currentUser" (click)="signOut();">Sign Out</ion-button>
</ion-content>
[home.page.ts file with signout method]
import { Component } from '#angular/core';
import { AngularFireAuth } from '#angular/fire/auth';
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor(public afAuth: AngularFireAuth,) {
}
signOut() {
this.afAuth.auth.signOut().then(() => {
location.reload();
});
}
}
I expected that the android rendering will only display:
Welcome some user!
But it also displays the sign in buttons that are configured with the firebaseui (google, facebook, email)
I am currently working on an Ionic app and I understood that Ionic recently became Ionic 3. In the past, I worked with Ionic 2 and there was app.js.
When I created a new project and I wanted to remove sidemenu for my login page, I couldn't find the app.js.
Ionic 2 code
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
controller: 'loginCtrl',
templateUrl: 'login.html'
});
app.controller('loginCtrl', function($scope, $state,$ionicSideMenuDelegate) {
$ionicSideMenuDelegate.canDragContent(false);
});
May I know how does this work now in the new Ionic?
You can do it this way, In your login page:
LoginPage.ts
import {MenuController} from 'ionic-angular';
export class LoginPage {
constructor(private menu : MenuController){}
ionViewDidEnter()
{
// Disable the root left menu when entering this page
this.menu.enable(false);
}
ionViewWillLeave()
{
// enable the root left menu when leaving this page
this.menu.enable(true);
}
}
I create modal in which I create a button that open child state named menu.friend
that I defined it like that:
app.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('menu', {
url: '/menu',
abstract: true,
templateUrl: 'views/menu.html'
})
.state('menu.friend', {
url: '/map',
views: {
'menuContent': {
templateUrl: 'views/map.html'
}
}
})
In my ion-modal-view, I put this button code:
<button ui-sref="menu.friend">
Add event
</button>
But nothing is displayed. Any help please.
Hi i Think your code is working fine. Thing is modal has a z-index whicch is more than a view so it is sitting on top of the new view.
so do something like this
<button ui-sref="menu.friend" ng-click="modalClose()">
Add event
</button>
Also I prefer more cleaner state urls , something like this
app.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('menu', {
url: '/menu',
abstract: true,
templateUrl: 'views/menu.html'
})
.state('menu.friend', {
url: '/menu/friend',
views: {
'menuContent': {
templateUrl: 'views/map.html'
}
}
})
I am trying to set up an app with multiple screens and some screens should have sub screens. the tabs are working fine and linking up with the correct template but the subpages are not working. i cant even browse to the set urls. when i click on the icons it goes to the default i have set in the otherwise method.
APP JS File
$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.aboutApps', {
url: '/aboutApps',
views: {
'tab-aboutApps': {
templateUrl: 'templates/tab-aboutApps.html'
}
}
})
.state('tab.aboutApps.pricing', {
url: '/aboutApps/pricing',
views: {
'detail-pricing': {
templateUrl: 'templates/detail-pricing.html'
}
}
})
.state('tab.aboutApps.features', {
url: '/features',
views: {
'detail-features': {
templateUrl: 'templates/detail-features.html'
}
}
})
HTML
<ion-item class="text-wrap" href="#/tab/aboutApps/features">
<p>Features</p>
<ion-nav-view title="Features" name="detail-features" class="text-wrap"</ion-nav-view>
</ion-item>
<ion-item class="text-wrap" href="#/tab/aboutApps/pricing">
<p>Pricing</p>
<ion-nav-view title="Pricing" name="detail-priceing" class="text-wrap"></ion-nav-view>
</ion-item>
i am new to ionic and dont see why this wont work. i am thinking that there is a problem in creating the path or url
Where you are using:
href="#/tab/aboutApps/pricing"
on your ion-item,
change this to:
ui-sref="tab.aboutApps.pricing"
This is a directive that binds a link to a state.
You can read more about it here:
http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref
How to make tabs in ionic framework as a child on a single page. I want create home page , when i fire next button in home page , it will direct to tabs page. Here is the parent of tabs page {tabs page is child of login.html page}, here is login.html page :
<ion-view view-title="Login">
<ion-content >
<p>
<a class="button icon ion-home" href="#> Home</a>
</p>
</ion-content>
</ion-view>
Here is my app.js :
// 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'])
.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);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleLightContent();
}
});
})
.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('login',{
url: '/login',
templateURL: "templates/login.html"
})
.state('tab', {
parent: 'login',
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
// Each tab has its own nav history stack:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.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.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash');
});
I think you are pretty close. In login.html set the href attribute to /tab. Make sure that all the templates mentioned in your code exists, otherwise angular will fail. Maybe you could also change url in $urlRouterProvider.otherwise('/tab/dash'); to /login so the user will see the login page by default when your app opens.