创建sidemenu项目的命令： ionic start myApp sidemenu ，创建了一个带有侧边栏的myApp项目。
在项目中，我们主要看src目录，这个目录就是我们开发的主要目录：
1、src/index.html
index.html 是 Ionic应用的主入口文件，其目的是设置脚本和CSS引导，然后开始运行我们的应用程序。这是我们项目的加载入口： （说白了就是，我们项目的所有页面都会在这个<ion-app>的容器里）
跟组件，应用加载入口
<ion-app></ion-app>主要的脚本引用，自动生成
<script src="cordova.js"></script>
<script src="build/polyfills.js"></script>
<script src="build/vendor.js"></script>
<script src="build/main.js"></script>2、src/app
入口文件夹
/app.component.ts
应用入口文件，每个应用程序都有一个根组件，用于控制应用程序的其余部分。
app.component.ts是项目的根组件，组织、管理其它组件，它的模板文件是app.html，在这个带有侧边菜单的项目中，app.html页面是：
app.component.ts中：
在这个模板中，我们设置了一个 ion-menu 作为侧面菜单，然后一个 ion-nav 组件作为主要内容区域。 ion-menu 菜单的 [content] 属性绑定到了我们 ion-nav 的本地变量 content 上。所以我们知道哪里会发生动作变化。
从以上代码可以看出，项目的rootPage设置的是HomePage，（HomePage的“容器”就是ion-nav这个组件，ion-nav这个组件跟ion-menu相当于同级，点击侧边菜单栏的按钮转换页面，但是页面的“容器”都是此页面的ion-nav组件）。
3、修改默认项目
当然，在一个完整的项目中，可能会有登录、注册页面，所以项目一启动跳转的应该是登陆页面，而登录页面是不需要有侧边菜单栏的，此时，我们可以修改代码。
当页面加载app.html页面时，只给此页面一个ion-nav组件承载页面，
在app.component.ts文件中设置rootPage为登录页面（或者是自己想要的页面）,
this.rootPage = LoginPage;
当登录成功时，我们可以重新设置当前路由的根页面，例如在login.ts中，当登录成功，我们可以执行：
import { Component } from '@angular/core';
import { App, NavController } from 'ionic-angular';
import { AuthorizationServiceProvider } from '../../providers/authorization-service/authorization-service';
import { MainPage } from '../main/main';
@Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {
constructor(
public navCtrl: NavController,
public app: App,
) {
}
model = {
userName: null,
password: null,
client_type: 2
};
ionViewDidLoad() {
console.log('ionViewDidLoad LoginPage');
}
onSubmit (form) {
this.authService.authorize(this.model)
.subscribe(
token => {
this.app.getRootNav().setRoot(MainPage); //获取到当前的路由栈，设置根为MainPage(登录之后跳转的页面)
},
error => {
console.error(error)
})
}
}这样，MainPage此时就是当前app的根页面，
main.html
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #myNav #content></ion-nav>main.ts
import { Component, ViewChild } from '@angular/core';
import { App, NavController, Nav } from 'ionic-angular';
import { Keyboard } from '@ionic-native/keyboard';
import { HomePage } from '../home/home';
import { ListPage } from '../list/list';
@Component({
selector: 'page-main',
templateUrl: 'main.html',
})
export class MainPage {
pages: Array<{title: string, component: any}>;
rootPage;
@ViewChild('myNav') nav: Nav
constructor(
public navCtrl: NavController,
public app: App
) {
this.pages = [
{ title: 'Home', component: HomePage },
{ title: 'List', component: ListPage }
];
this.rootPage = HomePage;
}
ionViewDidLoad() {
console.log('ionViewDidLoad LoginPage');
}
openPage(page) {
this.nav.setRoot(page.component);
}
}可以如此理解：
在app.html的<ion-nav>相当于是一个父级路由栈，一开始承载的是login.html页面，此路由栈的根就是LoginPage，然后登录成功我们利用this.app.getRootNav().setRoot(MainPage)重新设置app.html中的<ion-nav>的根为MainPage，此时main.html页面又出现一个子路由栈，
main.html页面的<ion-nav>跟此页面的<ion-menu>是同级的，侧边栏里的页面的直接承载者就是此<ion-nav>,在子路由栈中可以设置根页面，