基于ionic的Angular 4与Express之间通信框架的

ionic中的前后台通信架构与Clever中写的大同小异，有些方言改一改就好。

1. 登录页设计，是在ionic官方提供的网址拖出来的，设计好之后下载下来，体现POST提交方式。

<ion-header>
    <ion-navbar>
        <ion-title>
        登录
        </ion-title>
    </ion-navbar>
</ion-header>
<ion-content padding id="login">
    <form id="page4-form1">
        <ion-list id="page4-list2">
            <ion-item id="page4-input1">
                <ion-label>
                用户名
                </ion-label>
                <ion-input #loginname type="text" placeholder=""></ion-input> // Angular 4 风格的数据绑定
            </ion-item>
            <ion-item id="page4-input2">
                <ion-label>
                密码
                </ion-label>
                <ion-input #loginpass type="password" placeholder=""></ion-input>
            </ion-item>
        </ion-list>
        <ion-item id="page4-checkbox1">
            <ion-label>
                Remember me
            </ion-label>
            <ion-checkbox></ion-checkbox>
        </ion-item>
        <button id="page4-button1" ion-button color="stable" block (click)="loginAction(loginname.value, loginpass.value)" > // Angular 4 风格的数据绑定
        登录
        </button>
        <div class="spacer" style="height:40px;" id="page4-spacer1"></div>
        <button id="page4-button2" ion-button clear color="positive" block href-inappbrowser="/signup" on-click="goToRegister()">
        注册账户
        </button>
    </form>
</ion-content>

2. home页设计，体现GET提交方式。

<ion-header>
    <ion-navbar>
        <button ion-button menuToggle>
            <ion-icon name="menu"></ion-icon>
        </button>
        <ion-title>
            Home
        </ion-title>
    </ion-navbar>
</ion-header>
<ion-content padding id="page1">
    <ion-list id="home-list4">
        <ion-item color="none" *ngFor="let item of data"> // Angular 4 语法
            {{item.name}} // Angular 4 风格的数据绑定
        </ion-item>
    </ion-list>
</ion-content>

3. 其它

都跟Clever中的一样，比较都是Angular 4 的东西，只是在ionic中的跳转是这么写的：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { HomePage } from '../home/home';
import { RegisterPage } from '../register/register';
import { SubmitService } from '../../providers/submit.service'

@Component({
    selector: 'page-login',
    templateUrl: 'login.html'
})
export class LoginPage {
    errorMessage: string;
    constructor(public navCtrl: NavController, private submitService: SubmitService) {
    }
    goToHome(params){
        if (!params) params = {};
        this.navCtrl.setRoot(HomePage);
    }
    goToRegister(params){
        if (!params) params = {};
        this.navCtrl.push(RegisterPage);
    }
    loginAction (loginname: string, loginpass: string) {
        let respData = '';
        if (!loginname || !loginpass) {return; }
        const loginUrl = '/login/login';
        const params = {
            loginName: loginname,
            loginPass: loginpass
        };
        this.submitService.postSubmit(loginUrl, JSON.stringify(params))
        .then(
            responseData  => respData = responseData,
            error =>  this.errorMessage = <any>error)
        .then(() => {
            const x = JSON.parse(respData);
            if (x === '1') {
                this.navCtrl.setRoot(HomePage);
            }else {
                alert('登录失败！');
            }
        });
    }
}

其中，this.navCtrl.setRoot(HomePage)和this.navCtrl.push(HomePage)前者是将后页设为根，后者是后页设为前页的下级页，在后页中会显示返回按键的。