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的頁面。

項目運行圖