ionic3学习之目录结构分析

ionic3目录结构

新建工程

在要建立项目的目录下使用命令：

ionic start myApp tabs

若是不熟悉搭建环境的同窗，能够去看下 ionic3学习之环境搭建

工程图示

工程目录说明:

• hooks： 编译 cordova 时自定义的脚本命令， 方便整合到咱们的编译系统和版本控制系统中
• node_modules ： node 各种依赖包，程序开发时须要的依赖包
• resources ： android 或者 ios 资源（更换图标和启动动画相关）
• src： 开发工做目录， 页面、 样式、 脚本和图片都放在这个目录下（咱们开发主要是在这里）
• platforms： 生成 android 或者 ios 安装包路径（platforms\android\build\outputs\apk： apk所在位置）
  执行 cordova platform add android 后会生成
• www： 静态文件
• plugins： 插件文件夹， 里面放置各类 cordova 安装的插件
• config.xml: 打包成 app 的配置文件
• package.json: 配置项目的元数据和管理项目所须要的依赖
• tsconfig.json: TypeScript 项目的根目录， 指定用来编译这个项目的根文件和编译选项
• tslint.json： 格式化和校验 typescript

src 目录说明

• app： 应用根目录
• assets： 资源目录（静态文件(图片， JS 框架))，本人用到最多的是图片资源
• theme： 主题文件， 里面有一个 scss 文件， 设置主题信息。

src 下面文件说明

app 目录：

• main.ts ：为文件的入口文件
• app.module.ts ：根模块，告诉 ionic如何组装应用。这个和 angular2 以上是一致的
• app.component.ts ：根组件

pages目录：

• tabs ：就是界面底部的tab切换配置界面
• tabs之外 ：就是对应于不一样的界面组件（也能够叫作页面），(能够看下项目运行图)

Tabs 分析

打开 app.component.ts 能够看到代码

导入了 TabsPage 这个页面，而且设置为了根页面

import { TabsPage } from '../pages/tabs/tabs';

rootPage:any = TabsPage;

接着咱们打开 src/pages/tabs/tabs.ts

import { Component } from '@angular/core';

import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

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

  constructor() {

  }
}

这个 TabsPage，就表明了应用最下面的三个 TabBar的页面。

项目运行图