阅读排行

ionic 实现登录界面与验证

环境配置

ionic start async-login blank

一、登录与登出界面

1. 使用命令行生成界面

ionic generate page login
ionic generate page logout

2. 注册登录与登出界面

3. 登录界面

<ion-header>

  <ion-navbar>
    <ion-title text-center>登录</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <form #f="ngForm" (ngSubmit)="onLogin(f)">
    <ion-list>
      <ion-item>
        <ion-label floating>用户名</ion-label>
        <ion-input type="text" ngModel name="username" required></ion-input>
      </ion-item>

      <ion-item>
        <ion-label floating>密码</ion-label>
        <ion-input type="password" ngModel name="password"></ion-input>
      </ion-item>
    </ion-list>
    <button ion-button full type="submit" [disabled]="!f.valid">登录</button>
  </form>
</ion-content>

4. 登录界面控制

import { Component } from ‘@angular/core‘;
import { NavController, NavParams } from ‘ionic-angular‘;
import { NgForm } from "@angular/forms";

import { HomePage } from ‘../home/home‘;

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

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

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

  onLogin(form: NgForm) {
    console.log(form.value);
  }

}

调试，控制台会输出用户名与密码

技术分享

二、实现服务

ionic generate provider Auth

1. 在src目录下新建services目录

2. 在services目录下新建auth.ts文件

export class AuthService {
  login(username: string, password: string) {
    console.log(username);
    console.log(password);
  }
}

3. 在app.module中provider中注册服务

4. 在 login模块中导入且在construct中声明

5. 在login模块中onLogin方法传递值

  onLogin(form: NgForm) {
    // console.log(form.value);
    this.authService.login(form.value.username, form.value.password);
  }

文章来自：http://www.cnblogs.com/elewei/p/7190461.html