在Ionic2中src文件夹是我们主要的工作区域,我们看下这个文件夹的结构:
- app
- assets
- pages
- 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文件夹中的根组件基本一样,可以自行了解。