在app/app.html中,我们看到了这样一行代码
<ion-nav #content [root]="rootPage"></ion-nav>
注意 [root] 属性的绑定,它声明了 ion-nav 控制的root页面:当导航控制器被加载后, rootPage 组件中声明的页面将会被当作root页面.
在 app/app.js中,根组件MyApp在它的构造器中做了如此声明
import {App, IonicApp, Platform} from 'ionic/ionic';
import {HelloIonicPage} from './hello-ionic/hello-ionic';
import {ListPage} from './list/list';
class MyApp {
constructor(app: IonicApp, platform: Platform) {
// set up our app
this.app = app;
this.platform = platform;
this.initializeApp();
// set our app's pages
this.pages = [
{ title: 'Hello Ionic', component: HelloIonicPage },
{ title: 'My First List', component: ListPage }
];
// make HelloIonicPage the root (or first) page
this.rootPage = HelloIonicPage;
}
...
}
此处,设置了HelloIonicPage为nav控制器被加载时显示的第一个页面.
创建一个页面
接下看,让我们看下引入的这个HelloIonicPage,你可以在app/hello-ionic/文件夹下找到hello-ionic.js
这儿我们会看到命名规则:在hello-ionic/文件夹下面有三个文件hello-ionic.js
, hello-ionic.html
, and hello-ionic.scss.
然后你会看到如下代码,它定义一个了一个HelloIonicPage类并且导出.它创建了一个Angular组件--Page,并且配置好了这个组件运行所需的一切,指令.
import {Page, NavController} from 'ionic/ionic';
@Page({
templateUrl: 'app/hello-ionic/hello-ionic.html'})
export class HelloIonicPage {
constructor(nav: NavController) {
this.nav = nav;
}
}
注意到,此处我们传入了.nva对象,并且在构造器中把它设置成了一个属性
每一个页面中都会有一个类已经和这个类绑定的页面模板,让我们来看下
这个Page绑定的hello-ionic.html
打开app/hello-ionic/hello-ionic.html
<ion-navbar *navbar>
<a menu-toggle>
<icon menu></icon>
</a>
<ion-title>
Hello Ionic
</ion-title>
</ion-navbar>
<ion-content padding class="getting-started">
<h3>Welcome to your first Ionic app!</h3>
<p> This starter project is our way of helping you get a functional app running in record time.
...
</p>
</ion-content>
<ion-navbar *navbar>声明这个标签内的数据,是给导航bar调用的 当我们打开这个页面的时候,导航栏内的数据将会被更新:
导航栏中的按钮(button)数据被更新为ion-nav-items(这里具体指的是i?????吧,可以自己试试,原文是ion-nav-content)
导航栏的标题(title)被更新为 <ion-title>
其他部分都是ionic的标准写法,它定义了内容区域,在这里输出了一个欢迎信息.
创建其他的页面
要创建另一个页面,我们只需要正确设置了导航栏上需要显示的标题和其他内容即可.
让我们看一下app/list/list.js的内容,这儿定义了一个新的页面
import {IonicApp, Page, NavController, NavParams} from 'ionic/ionic';
@Page({
templateUrl: 'app/list/list.html'
})
export class ListPage {
constructor(app: IonicApp, nav: NavController, navParams: NavParams) {
this.nav = nav;
...
}
...
itemTapped(event, item) {
console.log('You selected', item.title);
}
}
这个js文件会创建一个基本的列表页,它包含了许多items.注意到这里我们定义了一itemTapped方法,这个方法会输出你选中的item
现在让我们看一下这个方法是怎么被调用的,打开app/list/list.html,我们会看到
<ion-item *ng-for="#item of items" (click)="itemTapped($event, item)">
这将添加到列表中的每一个项目,并且给每个项目添加一个click触发器,当这个项目被点击,将会调用itemTapped方法--这个方法会在console中打印出对应项目的标题.
参考来自adding_pages
来源:oschina
链接:https://my.oschina.net/u/2535480/blog/538033