Ionic 3 and Angular 4:Create a Welcome Page with Login and Logout.
Wall Script
MailxEngine
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.


Live Demo


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

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 platform add ios
$ ionic build ios

Build Android App
Open Android build using Android SDK>
cordova platform add 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


20 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
  4. Amigo, tengo un inconveniente; cuando sierro la sesion la interfaz del tab no se va? que puede ser?

    const root = this.app.getRootNav();
    root.popToRoot();

    ReplyDelete
  5. can I create a ionic PWA from an existing working angular 4 project ? what all the steps ?

    ReplyDelete
  6. Hi 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

    "TS2305:Module ""/Users/james/ionicLearn/src/pages/welcome/welcome" has no exported member 'Welcome'

    Can someone explain this to me,

    Thank you

    ReplyDelete
    Replies
    1. Hi Azri, the post is straight-forward the welcome script has an exported class of "welcome " just make sure you have

      export class Welcome {
      constructor(public navCtrl: NavController) {
      }
      in your welcome.ts file . that should solve the problem.

      Delete
    2. 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

      Delete
  7. nice blog, may i know how i can debug line by line from device using VS code

    ReplyDelete
  8. hi tamada,
    having 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?

    ReplyDelete
  9. When i click the button logout, i found error "co.login is not a function"
    Please give me answer

    ReplyDelete
  10. 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

    ReplyDelete
  11. Hi,
    When 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.

    ReplyDelete
  12. Hi,
    Error 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

    ReplyDelete

Make in India