Ionic移动app开发：app登录实现完整过程

Ionic移动app开发：登录实现

对于一款App必然会有一个登录界面，下面介绍一下使用ionic创建一个登录的过程：

创建ionic project

ionic start projectname template

安装依赖

–进入project 文件夹
npm install

新增登录页面LoginPage

ionic generate page login

新增服务 userService

ionic generate g provider userService

到目前为止，所有需要使用的文件已经添加完毕，现在进行相关代码的编写

• 第一步、userService作为服务，定义一下方法，分别为login、register、getUserInfo、logout，这些方法将在登录、注册等页面中被调用，现在以登录为例进行说明
  

• 第二步、登录页面的代码
  
  登录界面二个TextBox，分别输入email与password
  二个按钮Button，分别触发登录及注册操作，对应的方法分别为:(ngSubmit)=”login()” (click)=”createAccount()”

• 第三部、实现login 方法与createAccount方法
  

方法需要与远程服务器进行交互，因此需要导入UserService

import { UserServiceProvider } from ‘../../providers/user-service/user-service’;

需要使用NavController, AlertController, LoadingController, Loading, IonicPage

import { NavController, AlertController, LoadingController, Loading, IonicPage } from ‘ionic-angular’;

运行效果
分别为andorid与ios版本的运行效果