Ionic 3 项目实战------项目开发目录

在之前的文章中有提到项目的源码全部存放在项目根目录的src文件夹，我们之后所有的代码开发也是在该目录进行

app文件夹

1、app.component.ts 根组件

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

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

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = TabsPage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

 

平时所说的视图，主要定义了app整体的视觉表现，比如根页面、状态栏、启动界面等等。

2、app.html APP的根界面

<ion-nav [root]="rootPage"></ion-nav>

 

相当于Android的MainActivity界面显示的内容

3、app.module.ts 根模块文件

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

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

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

 

ionic是基于angular的，而angular是完全模块化的。配置项目中使用到的模块、组件、服务、管道、指令等。

4、app.scss 全局样式文件

5、main.ts 入口文件

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

 

在最初接触到网页开发时，都是用到一个js，就在HTML中增加一个<script/>标签，现在只需要调用入口文件，然后由入口文件去引入其它依赖的文件。

assets文件夹

存放项目中使用到的各种资源

pages文件夹

存放APP中用到的所有界面，其下的一个文件夹就是独立的一个界面

每一个界面文件夹下存放三个文件，分别是界面、模板样式和业务处理逻辑（用TypeScript---JavaScript的超级 语法编写）

theme文件夹

APP主题样式文件