[Ionic] 로그인 기능 구현하기

07 Aug 2018 in Dev on Frontend, Ionic

프로젝트 생성

$ ionic start sample blank

로그인 페이지 생성

$ ionic g page login

HTML 작성하기

Generated template for the LoginPage page.
src/pages/login/login.html

<ion-header>
  <ion-navbar>
    <ion-title>login</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
<ion-list>
  <ion-item>
    <ion-label fixed>Username</ion-label>
    <ion-input type="text" [(ngModel)]="username"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label fixed>Password</ion-label>
    <ion-input type="password" [(ngModel)]="password"></ion-input>
  </ion-item>
</ion-list>

<button ion-button (click)="login()">제출</button>

<ion-list >
  <ion-item *ngIf="isValidString(username)">
    <p>username: </p>
  </ion-item>
  <ion-item *ngIf="isValidString(password)">
    <p>password: </p>
  </ion-item>
</ion-list>
</ion-content>

페이지 동작 정의

Generated class for the LoginPage page.
src/pages/login/login.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {

  username:string;
  password:string;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  isValidString(strVal){
    console.log(strVal);
    if(strVal!=undefined && strVal.length>0){
        return true;
    }
    return false;
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }

  login(){
    console.log("username:"+this.username);
    console.log("password:"+this.password); 
  } 
}

페이지 모듈 추가

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { LoginPageModule } from '../pages/login/login.module';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    LoginPageModule,
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

컴포넌트 추가

src/app/app.components.ts

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 { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = LoginPage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

앱 실행

$ ionic serve

타입스크립트는 자바스크립트로 변환되어 브라우저의 자바스크립트 엔진에서 수행되며 변환된 자바스크립트 파일은 www/build/main.js 이다.