Ionic2 src文件夹分析

在Ionic2中src文件夹是我们主要的工作区域，我们看下这个文件夹的结构：

1. app
2. assets
3. pages
4. theme

一共四个文件夹。其中主要的两个文件夹就是app和pages

app是ionic 应用的根目录，pages则是子组建。
我们先看app下面的五个文件。
app.scss用于设置全局css样式，一般我们都不用，所以没啥好说的。
app.module.ts 我们称为根模块，除非你已经牛逼到可以写超大型应用，一般情况只有唯一一个根模块，所有的模块都会注入到这个模块里。我们先分析这里面都有些什么鬼？

上面就是全部架构；

我们首先在Angular2的核心库中引入NgModule和ErrorHandler模块用于，Angular2的正常工作和错误处理机制。
然后在Ionic2的核心库中引入IonicApp,IonicModule,IonicErrorHandler三个模块，用于IonicApp,模块，错误处理机制。

引入根组件

引入子组件

注意上图，这是在ionic-native也就是ionic2中的原生库（自带）中引入status-bar和splash-screen服务，这个知识点会在其他文章中细说。

在上面我们已经说了，这个文件是一个根模块，在上面我们也已经引入了angular2的NgModule机制.什么意思？也就是所有引入的根模块/子模块/服务都得注入进来。否则，一切都都白忙活，这就如同一个插线板。
declarations和entryComponents数组内部一模一样，把你的根组件和子组件（Component）都注入进来。
imports告诉IonicModule这个Ionic根模块你这个应用的根组件是哪个？这个案例的根组件就是MyApp.bootstrap是告诉你的Angular2哪个是你Ionic的根组件。这个案例中就IonicApp. 所以这个逻辑就是 MyApp < IonicModule < IonicApp < Angular2.

providers用于服务注入，把我们刚才引入进来的那几个服务包引入进来就好了。

好了，到了这里我们一个完整的根模块就已经完成了，我们只需把这个AppModule根模块通过class暴露出去就好了。那么问题来了，这是暴露给谁的？答案就是main.ts这个文件。

这个文件只有三行代码，它引入了angular2中的platformBrowserDynamic这个模块，告诉angular2AppModule是所有一切的核心。

到了这里我们应该能弄清我们自己的应用同Ionic以及Angular2之间的关系了，我就回到我们这个应用本身。

无论是angular2还是Ionic2应用的根组件的名称都是app.component.ts。下面就是这个文件内部的代码：

还是一行行的分析：

我们分别从angular2核心库引入components模块，ionic核心库中引入Platform平台服务，以及从ionic原生库中引入状态条和开场白服务，我在这里说下，这两个服务都是IOS和android原生的功能，Ionic的服务是一种模仿原生应用。

引入子组件TabsPage,其实就是导航条组件，没啥好说的。其他文章会细说。

我们在@Component中声明模板是app.html，下面就是app.html

这里，很多人估计就懵了，什么鬼？为什么一个根组件的模板里只有一个<ion-nav>标签？[root]又是什么鬼？这其实都是ionic中的自带api，在这里暂时记住这就是一个导航条的外壳，里面包着rootPage这个值就好了。

在这里我们就可以将整个app的根组件打包出去了，rootPage这个值的类型可以是any,它就是我们上面引入的TabsPage这个子组件。这样我们在TabsPage这个子组件中建立的导航功能就可以渲染到了根组件中，也就是无论什么时候在这个应用中这个导航永远存在。

constructor函数是我们要讲的一个重点，它类似于angular1中controller的回调函数，也就是说当MyApp这个根组件在被外部调用后，它所注入的服务项都会挨个运行。

platform.ready()表示ionic全部加载完毕，平台已经就位。在then()函数的回调函数中，状态条进入默认样式状态，而那个打开应用画面就会隐藏。

好了，到这里，有关于ionic2的src文件夹中的文件就全部讲解完毕。
至于pages目录里的文件和app文件夹中的根组件基本一样，可以自行了解。