基于ionic2 的移动app开发过程《3》

5.项目结构

整体项目目录

以上是ionic2项目打包前的目录，暂时只需要关注src和resources即可.

资源目录

即resources目录，这里面主要放置app中的静态资源，例如软件icon和app启动页所需的图片资源

主要工作目录

src目录是我们的主要工作目录,我们代码主要是在这个文件夹中编写的。运行ionic serve命令的时候，在src/目录下的文件会被转译成浏览器能够解释的JavaScript版本

src子目录结构

• 程序的入口

index.html 是App的主要入口,这个文件主要是用设置css样式和引入js脚本,程序的启动也是在这里进行的，其内容如下

这里引入了几个js文件，其中cordova.js是cordova程序所必需的，在项目打包成app的时候会自动加到项目中，所以在浏览器中调试的时候会有404错误，这个不用管它
Build/main.js 也是自动生成的，用来将typescript转化成普通的javascript
这里的ion-app标签是框架内部固定的，ionic 在启动时会查找这个标签启动我们的程序

• 根模块

根模块定义在src/app/app.module.ts中，每个App都有一个root module来控制应用中其他的部分，app.module.ts的主要内容如下：

各部分的含义如下:
最上面的import类似于Java的import，将需要的依赖引入到组件，这样就可以在这个module中使用了

@ngModule 注解申明当前修饰的是一个模块

declarations声明 属于此模块的视图类。

providers-申明使用到的服务，这里声明之后就可以在应用程序的所有部分访问了

imports 表示这个module 中声明的component所需要的类，这些类是从其他

module中导出的,这里的Ionicmodule.forRoot(MyApp)是将app.component 中的

MyApp 作为根组件

bootstrap表示启动类

• 组件

组件用来控制screen（这里的screen 就是templateUrl 的值
）,本质就是一个类，所以可以有构造器，方法和变量，这些都可以在screen中使用。组件的定义方式如下：

app.component是新建项目时生成的，这里可以不用管。
注意到这个component中定义了rootPage这个变量，在screen（本处是app.html）中可以这样使用

这样就把rootPage绑定到ion-nav的root属性了。

- App的执行流程

• index.html中声明界面渲染的位置，即 <ion-app></ion-app>
• 在app目录下的main.ts中申明根模块的位置

• 根据AppModule中的定义找到根组件

• 找到根组件对应的screen（app.html）的位置（这个screen一般用来放置其他视图）

本处放置的是TabsPage

Tabs视图中有三个tab页，每一个tab就是我们自己的页面