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 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
import
import
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
import
import
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
