ionic+angulars app启动流程解析

ionic start myApp tabs后会创建一个工程包如下：

1.hooks忽略 、node_modules 依赖包、resources android与ios相关、src 主要的程序包、www为图片或者css或者js

2.config.xml 为工程配置文件，插件的版本等等类似pom.xml文件与web.xml的合体，为工程主要的配置文件

<content src="index.html" />定义首页

看一下index.html里面的内容<ion-app></ion-app> 为ionic的根，是app的开始如下注释：
<!-- Ionic's root component and where the app will load -->

系统会自动调用

app.module.ts 所有的ts，都要在该文件声明

IonicModule.forRoot(MyApp)，这边设置开始的app为MyApp
然后看Myapp 在文件app.component.ts里面声明如下：
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = TabsPage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}
展示界面app.html
内容
<ion-nav [root]="rootPage"></ion-nav> 看到了rootPage，
  rootPage:any = TabsPage;
则继续走了TabsPage.ts
@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

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

  constructor() {

  }
}
然后到界面tabs.html，内容如下：
<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>
然后到about.ts、contact.ts、home.ts，然后看看about.html 、contact.html、home.html