摘要：在编译过后，实际上只有一个网页，它是一个单页面应用。所以在移动盛行的今天，单页面应用也是一种大势所趋。

上一次我们完成了一个新页面的创建
可能你被乱七八糟的概念搞得心烦意乱
不过你那么聪明又那么好看
我相信你肯定花了点时间就把他们搞懂了

我们先看看手里有几个页面？

AboutPage

ContactPage

HomePage

TestPage

我们要做什么？
在HomePage上放一个页面，点击之后跳转到TestPage.

怎么做？
可谓非常简单，只需要完成三步。

文件：pages/tabs/tabs.ts

上一次我们为了观察新创建的TestPage，直愣愣把首屏的HomePage给替换掉了，我们先把他恢复原状：

将 tab1Root 重新指向 HomePage

删除 TestPage 的 import 语句

import { Component } from "@angular/core";

import { AboutPage } from "../about/about";
import { ContactPage } from "../contact/contact";
import { HomePage } from "../home/home";

@Component({
  templateUrl: "tabs.html"
})
export class TabsPage {

  tab1Root = HomePage;
  tab2Root = AboutPage;
  tab3Root = ContactPage;

  constructor() {

  }
}

直接serve运行本地服务器，一切又完好如初，画面太美不敢看。

文件: pages/home/home.html

把原来 ion-content 里的内容删除，加入这一个这样的按钮

喜欢我就点我呀

没错是你熟悉的那个button标签
ion-button 是一个内置指令
让按钮在视觉上呈现出与操作系统相符的效果

文件: pages/home/home.ts

引入 TestPage

在 HomePage 类中定义 testPage 属性;

在构造函数中农将 testPage 指向 TestPage，以便模板可以使用。

import { Component } from "@angular/core";
import { NavController } from "ionic-angular";

import { TestPage } from "../test/test";

@Component({
    selector: "page-home",
  templateUrl: "./home.html"
})
export class HomePage {

  testPage;

  constructor(public navCtrl: NavController) {
      this.testPage=TestPage;
  }

}

文件：pages/home/home.html

为button加上 [navPush] 指令

喜欢我就点我呀

这时我们切换到浏览器，点击Home页面上的按钮，发现页面流畅地切换到了Test上去了。

刚才，我们通过了 [navPush] 指令，让模板中的按钮“超链接”到了一个新页面。但是在更复杂的场景中，这样简单的链接可能不能符合我们的需求。比如我们需要在用户点击按钮时，进行一些业务处理，再跳转到下一个页面，这时候就可以利用NavController中的push方法来实现，同样也只有三步：

ionic把app的众多交互封装成了若干个controller，其中NavController就是用来管理和导航页面的一个controller。由于几乎每一个页面都会用到NavController，我们发现在HomePage中已经有了引入语句了。

import { NavController } from "ionic-angular";

此外，类的构造函数定义了一个NavController类型的参数，以告诉angular在创建页面时，需要传入（注入）一个NavController的实例.

constructor(public navCtrl: NavController){
}

在类中编写一个方法，我们就叫它pushTestPage吧，调用navCtrl对象的push方法，将页面导航到TestPage上

pushTestPage(){
      this.navCtrl.push(TestPage);
  }

此时文件 home.ts 的完整代码

import { Component } from "@angular/core";
import { NavController } from "ionic-angular";

import { TestPage } from "../test/test";

@Component({
    selector: "page-home",
  templateUrl: "./home.html"
})
export class HomePage {
  
  constructor(public navCtrl: NavController) {
  }

  pushTestPage(){
      this.navCtrl.push(TestPage);
  }

}

在home.html中，为button元素绑定click事件

喜欢我就点我呀

为什么不是 onclick="pushTestPage()" 因为 pushTestPage 不是一个全局函数，它是 TestPage 组件中的一个方法，经过封装之后早已对外不可见，不过可以通过使用(click) 指令来直接调用组件内的方法。

这样我们就可以在pushTestPage里添加更加复杂的业务逻辑，以满足我们的需求。

有时我们完成了一个页面上的业务之后，要把相关的数据传给下一个页面处理，这时候就需要向被push的页面传入相关的参数。NavController的push方法的第二个参数接收一个对象。

假设我们要为TestPage传入一个标题，用来显示到页面上，我们为push方法传入一个对象。

 pushTestPage(){
      this.navCtrl.push(TestPage,{
          title:"没有人可以比我帅"
      });
  }

利用NavParams的get方法，可以将传进来的页面参数读取出来。
切换到 test.ts，完成三个步骤
1.引入NavParams并，并在构造函数添加注入语句
2.为TestPage类添加title属性，读取参数并赋给title
3.将title输出到模板中

文件 test.ts

import { Component } from "@angular/core"

import { NavParams } from "ionic-angular" //step1

@Component({
    selector: "page-test",
    templateUrl:"./test.html"
})
export class TestPage {

    title:string; //step2

    constructor(public params:NavParams){ //step1
        this.title=this.params.get("title"); //step2
    }
}

文件 test.html

如果很多场景的模板引擎，在模板中利用双花括号 {{ }} 将组件的属性输出到界面上。

  
    
      Test
    
  


  
  
{{title}}

如同进入页面，我们在退出页面的时候，除了用户点击返回按钮外，也有可能在完成了业务之后，自动返回上一个页面，这时候可以使用NavController的pop方法来实现。

文件 test.ts

import { Component } from "@angular/core"

//注意这里
import { NavController, NavParams } from "ionic-angular"

@Component({
    selector: "page-test",
    templateUrl:"./test.html"
})
export class TestPage {

    title:string;

    //注意这里
    constructor(public navCtrl:NavController,public params:NavParams){
        this.title=this.params.get("title");
    }

    //新方法
    popPage(){
        this.navCtrl.pop();
    }
}

文件 test.html

在模板中添加返回按钮

  
    
      Test
    
  


  
{{title}}
  返回

过往我们在网页上进行页面之间的链接，是通过标签来实现的。而我们现在制作的 web APP，虽然使用了前端技术，但页面的概念跟之前却所有不同。

ionic APP在编译过后，实际上只有一个index.html网页，它是一个单页面应用。你所看到的页面之间的切换，实际上都是利用 js 来替换界面上的元素，并不是传统意义上的网页之间的跳转。因为传统的网页跳转，是需要向服务器发送请求并下载资源的，即便再快的网速都会有一定的响应时间。这在浏览器上非常正常，但如果是在手机APP上，这样的响应时间会严重影响操作的流畅性。而单页面已经加载了基础的资源，在操作过程中，只需要替换部分的内容，请求部分的资源，配合一些交互设计，让操作没有卡顿感。所以在移动web盛行的今天，单页面应用也是一种大势所趋。

ionic APP中的页面实质上是一个栈的结构（实际上多数原生应用也是这样的），但从当前页面上引入一个新页面时，浏览器（或操作系统）会加载新页面的资源，然后把它添加到栈顶。在界面上的表现就是，新页面“遮住了”原有的页面，下层页面的内容和资源依旧在内存中。

而上层页面被pop掉的时候，上层页面弹出栈，相应的内存被释放（在图中栈顶由C变成了B），在视觉表现上就是上面的页面被“移开”了，下层的页面“暴露了出来”。

所以APP中的页面是有层级关系的，用户在首页一层一层地进入了新页面（A->B->C），回到首页时就得一层一层退出来（C->B->A），所以我们在设计页面的时候，脑海中有明确这样的层级关系，如果栈的层次过多了（超过了5层），就会给用户体验带来困扰。

最后提一下TabsPage，TabsPage可以被理解层一个特殊的页面，这个页面中又包含了若干个页面栈（Tab），每个页面栈相互独立，通过Tab按钮来相互切换。一个页面栈中的push和pop不会影响到其它栈的表现，也就是当你在不同的tab中切换时，看到的响应的栈顶页面。