Ionic 3 and Angular 4:Create a Welcome Page with Login and Logout.
Wall Script
Follow Me:
Monday, June 12, 2017

Ionic 3 and Angular 4:Create a Welcome Page with Login and Logout.

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.

Ionic 3 and Angular 4:Create a Welcome Page with Login and Logout.



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


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 {}

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();
   });
 }
}

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);

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>

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);
  }
}

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;
    }
}
}


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});
  }

}

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>

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();
  }
}

Build iOS App
Following commands for executing Xcode build, watch the video tutorial you will understand more.
$ cordova add platform ios
$ ionic build ios

Build Android App
Open Android build using Android SDK>
cordova add platform android
ionic build android

Video Tutorial
Ionic 3 and Angular 4 Create a Welcome Page with Login and Logout.
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


6 comments:

  1. Replies
    1. Both versions are same, latest one is Ionic 3

      Delete
  2. Why not lazy load the pages?

    ReplyDelete
  3. I am really curious please, which IDE is this you are using. It's really cool. Kindly share the name of the IDE.

    ReplyDelete

Make in India