Most of the mobile applications starts with welcome page with login and signup buttons. A proper login or signup redirects to application home page and there you can navigate to different pages and finally you can end up with a logout action. Today’s tutorial is all about this. Here I am using AngularJS 4 and Ionic 3. The combination of AngularJS and Ionic in handling login is a straight forward process. This design is already explained in my previous posts using ReactJS navigations. Lets see how to set a starting page using Ionic 3 and AngularJS4 and learn basic understanding of how the navigation works.
Live Demo New Ionic
Ionic 5 and Angular 8: Create a Welcome Page with Tabs Home Pages.
Video Tutorial
Ionic 3 and Angular 4 Create a Welcome Page with Login and Logout.
Install NodeJS
You need node.js to create a development server, download and install the latest version.
Installing Ionic and Cordova
You will find these instructions in Ionic Framework installation document..
$ npm install -g cordova ionic
$ ionic start YourAppName tabs
$ cd YourAppName
$ npm install
$ ionic serve
$ ionic start YourAppName tabs
$ cd YourAppName
$ npm install
$ ionic serve
Open your web browser and launch your application at http://localhost:8100.
Generate Ionic Pages
You have to create a pages for welcome, login and signup models. The following ionic command help you to created automatically.
$ ionic g page welcome
$ ionic g page login
$ ionic g page signup
$ ionic g page login
$ ionic g page signup
app.module.ts
Now got src/app/app.module.ts and import Welcome, Login and Signup pages.
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { Welcome } from '../pages/welcome/welcome';
import { Login } from '../pages/login/login';
import { Signup } from '../pages/signup/signup';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { SignaturePadModule } from 'angular2-signaturepad';
@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
Welcome,
Login,
Signup,
TabsPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
Welcome,
Login,
Signup,
TabsPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { Welcome } from '../pages/welcome/welcome';
import { Login } from '../pages/login/login';
import { Signup } from '../pages/signup/signup';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { SignaturePadModule } from 'angular2-signaturepad';
@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
Welcome,
Login,
Signup,
TabsPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
Welcome,
Login,
Signup,
TabsPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
app.component.ts
Modify root page configuration, just replace tabsPage with Welcome.
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Welcome } from '../pages/welcome/welcome';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:any = Welcome; // Replace tabsPage with Welcome
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
platform.ready().then(() => {
statusBar.styleDefault();
splashScreen.hide();
});
}
}
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Welcome } from '../pages/welcome/welcome';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:any = Welcome; // Replace tabsPage with Welcome
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
platform.ready().then(() => {
statusBar.styleDefault();
splashScreen.hide();
});
}
}
Theme - variables.scss
Go to src -> theme and modify brand colors.
$colors: (
primary: #2A2C43,
secondary: #677077,
lightprimary: #B5B5B7,
light: #f4f4f4,
dark: #222,
energy: #f2b632
);
$toolbar-background: color($colors, primary);
primary: #2A2C43,
secondary: #677077,
lightprimary: #B5B5B7,
light: #f4f4f4,
dark: #222,
energy: #f2b632
);
$toolbar-background: color($colors, primary);
welcome.html
Design welcome page with Ionic components, for more understanding please watch the video tutorial.
<ion-content padding id="welcome">
<img src="assets/imgs/logo.png" class="logo"/>
<ion-grid>
<ion-row>
<ion-col>
<h1>Welcome to Your App</h1>
</ion-col>
</ion-row>
</ion-grid>
<ion-grid >
<ion-row>
<ion-col center text-center>
<button ion-button full color="success" (click)="signup()">Sign up</button>
</ion-col>
</ion-row>
<ion-row>
<ion-col center text-center>
<button ion-button full color="lightText" (click)="login()">Log in</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
<img src="assets/imgs/logo.png" class="logo"/>
<ion-grid>
<ion-row>
<ion-col>
<h1>Welcome to Your App</h1>
</ion-col>
</ion-row>
</ion-grid>
<ion-grid >
<ion-row>
<ion-col center text-center>
<button ion-button full color="success" (click)="signup()">Sign up</button>
</ion-col>
</ion-row>
<ion-row>
<ion-col center text-center>
<button ion-button full color="lightText" (click)="login()">Log in</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
welcome.ts
Controls for login and signup button actions, using this.navCtrl.push redirecting to different pages.
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Login } from '../login/login';
import { Signup } from '../signup/signup';
@Component({
selector: 'page-welcome',
templateUrl: 'welcome.html',
})
export class Welcome {
constructor(public navCtrl: NavController) {
}
login(){
this.navCtrl.push(Login);
}
signup(){
this.navCtrl.push(Signup);
}
}
import { NavController } from 'ionic-angular';
import { Login } from '../login/login';
import { Signup } from '../signup/signup';
@Component({
selector: 'page-welcome',
templateUrl: 'welcome.html',
})
export class Welcome {
constructor(public navCtrl: NavController) {
}
login(){
this.navCtrl.push(Login);
}
signup(){
this.navCtrl.push(Signup);
}
}
welcome.scss
SASS nested for welcome page design.
page-welcome {
#welcome{
background: color($colors, energy);
h1{
font-size: 52px;
margin-top:50px
}
.marginTop{
margin-top:150px;
}
.logo{
height: 100px;
}
}
}
#welcome{
background: color($colors, energy);
h1{
font-size: 52px;
margin-top:50px
}
.marginTop{
margin-top:150px;
}
.logo{
height: 100px;
}
}
}
login.ts
Login page is redirecting to TabsPage, this page is configured with home, contact and about pages.
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { TabsPage } from '../tabs/tabs';
@Component({
selector: 'page-login',
templateUrl: 'login.html'
})
export class Login {
constructor(public navCtrl: NavController) {
}
login(){
// Your app login API web service call triggers
this.navCtrl.push(TabsPage, {}, {animate: false});
}
}
import { NavController } from 'ionic-angular';
import { TabsPage } from '../tabs/tabs';
@Component({
selector: 'page-login',
templateUrl: 'login.html'
})
export class Login {
constructor(public navCtrl: NavController) {
}
login(){
// Your app login API web service call triggers
this.navCtrl.push(TabsPage, {}, {animate: false});
}
}
home.html
Home page with logout buttons.
<ion-header>
<ion-navbar>
<img ion-right src="assets/imgs/bananalogo.png" class="navbarLogo" />
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h2>Welcome to Banana Project</h2>
<button ion-button color="primary" (click)="logout()">Logout</button>
</ion-content>
<ion-navbar>
<img ion-right src="assets/imgs/bananalogo.png" class="navbarLogo" />
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h2>Welcome to Banana Project</h2>
<button ion-button color="primary" (click)="logout()">Logout</button>
</ion-content>
home.ts
Logout action to navigation to Welcome page.
import { Component } from '@angular/core';
import { NavController, App } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController, public app: App) {
}
logout(){
// Remove API token
const root = this.app.getRootNav();
root.popToRoot();
}
}
import { NavController, App } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController, public app: App) {
}
logout(){
// Remove API token
const root = this.app.getRootNav();
root.popToRoot();
}
}
Build iOS App
Following commands for executing Xcode build, watch the video tutorial you will understand more.
$ cordova platform add ios
$ ionic build ios
$ ionic build ios
Build Android App
Open Android build using Android SDK>
$ cordova platform add android
$ ionic build android
$ ionic build android
Video Tutorial
Ionic 3 and Angular 4 Create a Welcome Page with Login and Logout.
Is it ionic 3 or ionic 2?
ReplyDeleteBoth versions are same, latest one is Ionic 3
DeleteWhy not lazy load the pages?
ReplyDeleteI am really curious please, which IDE is this you are using. It's really cool. Kindly share the name of the IDE.
ReplyDeleteVisual Code with Atom Theme
DeleteAmigo, tengo un inconveniente; cuando sierro la sesion la interfaz del tab no se va? que puede ser?
ReplyDeleteconst root = this.app.getRootNav();
root.popToRoot();
Thks man keep it up
ReplyDeletecan I create a ionic PWA from an existing working angular 4 project ? what all the steps ?
ReplyDeleteHi Srinavas, I'm still new with ionic, i've tried to follow the step but I'm not sure why i'm getting this error
ReplyDelete"TS2305:Module ""/Users/james/ionicLearn/src/pages/welcome/welcome" has no exported member 'Welcome'
Can someone explain this to me,
Thank you
Hi Azri, the post is straight-forward the welcome script has an exported class of "welcome " just make sure you have
Deleteexport class Welcome {
constructor(public navCtrl: NavController) {
}
in your welcome.ts file . that should solve the problem.
I think that is the ionic version used in this tutorial, y use ionic 3 and I solve it with change WelcomePage instead of Welcome
Deletenice blog, may i know how i can debug line by line from device using VS code
ReplyDeletehi tamada,
ReplyDeletehaving issue with postman after following all the steps in the video when i click on sends it returns Error message "500 internal server Errors " how can i deal with that please?
Enable mod_rewrite extension for PHP.
DeleteWhen i click the button logout, i found error "co.login is not a function"
ReplyDeletePlease give me answer
I know php, mysql, but angular i'm beginner. Is there a way to pass back the login error of wrong password to Ionic as an alert box? Right now it's just showing the regular php error on the console and runtime error on the app itself
ReplyDeletethank U Brooo <3
ReplyDeleteHi,
ReplyDeleteWhen i run the project using ionic serve in browser, Project is opened in browser but in terminal i got this error message
... Uhoh. Got error write ECONNABORTED ...
Error: write ECONNABORTED
at exports._errnoException (util.js:1020:11)
at Socket._writeGeneric (net.js:711:26)
at Socket._write (net.js:730:8)
at doWrite (_stream_writable.js:331:12)
at writeOrBuffer (_stream_writable.js:317:5)
at Socket.Writable.write (_stream_writable.js:243:11)
at Socket.write (net.js:657:40)
at IO.ondata (internal/streams/legacy.js:16:26)
at emitOne (events.js:96:13)
at IO.emit (events.js:188:7)
Pliz help me out.
Hi,
ReplyDeleteError when installing npm in ionic-3
$ npm install
npm WARN deprecated [email protected]: This plugin has been deprecated since it is now included in the latest versions of cordova-ios
npm WARN deprecated [email protected]: babili has been renamed to babel-minify. Please update to babel-minify
npm WARN deprecated [email protected]: babili has been renamed to babel-minify. Please update to babel-preset-minify
npm WARN deprecated [email protected]: Please update to the latest object-keys
> [email protected] install C:\Users\Dell\Desktop\newrie\node_modules\@ionic\app-scripts\node_modules\node-sass
> node scripts/install.js
Downloading binary from https://github.com/sass/node-sass/releases/download/v4.5.0/win32-x64-57_binding.node
Cannot download "https://github.com/sass/node-sass/releases/download/v4.5.0/win32-x64-57_binding.node":
HTTP error 404 Not Found
sir ionic3 me login and logout php me kese kare
ReplyDeleteHi, Thanks for the useful blog, I'm a learning, whenver i'm clicking on login or signup button, I'm getting error : -
ReplyDeletecore.js:1350 ERROR Error: Uncaught (in promise): invalid views to insert
at c (polyfills.js:3)
at Object.reject (polyfills.js:3)
at NavControllerBase._fireError (nav-controller-base.js:223)
at NavControllerBase._failed (nav-controller-base.js:216)
at nav-controller-base.js:263
at t.invoke (polyfills.js:3)
at Object.onInvoke (core.js:4629)
at t.invoke (polyfills.js:3)
at r.run (polyfills.js:3)
at polyfills.js:3
The same code i've used what u've given here.
Please help me.
Thank you.
I have below problem
ReplyDeleteProperty 'app' does not exist on type 'Home'.
at
logout(){
// Remove API token
const root = this.app.getRootNav();
// const root = this.
root.popToRoot();
}
someone pls help
Does not work that by site_key and is the biggest unnecessary work to test on my own server
ReplyDeleteplease help me solve this problem, everytime i follow your tutorial i always find error
ReplyDeleteunexpected value 'undefined' imported by the module 'appmodule'
thanks
This comment has been removed by the author.
ReplyDeleteawesome tutorial
ReplyDeleteHello Srivinas ! I hope youre having a nice day.
ReplyDeleteBased from this post, may I know what is SignaturePadModule used for ?