ionic教程（3）--ionic3项目构成部分简析

目录

 

1、目录结构分析

2、src/app/app.module.ts讲解

---

1、目录结构分析

 

node_modules 项目依赖存储目录
platforms 生成的android和ios项目以及安装包目录，可以用Android Studio 调试运行
plugins 通过cordova plugin add|rm name 增加的cordova插件，实现原生功能扩展
resources 项目图标icon.png 和启动界面splash.png 自动生成适配尺寸存放目录
src 我们最常用到的，写代码的地方，页面编码都在这里
src/app 应用根目录，项目启动时最先启动的目录
src/assets 存放静态资源文件
src/components 自定义的组件目录
src/pages 页面文件，所有页面的存放目录
src/services 服务存放目录
src/theme 主题文件，有全局css样式文件，在里面写的样式全局有效

www ionic build 自动编译生成的文件
package.json 依赖包定义文件

2、src/app/app.module.ts讲解

这个文件很重要，我们以后会经常用到

//根模块，告诉ionic如何组装项目
//引入一些ng ionic系统模块
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';

//ionic 打包成app以后配置启动画面 以及导航条的服务，有需要再改
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  //声明要用到的页面，经常会改
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  //引入的模块 依赖的模块，经常会改
  imports: [
    BrowserModule,
    ComponentsModule,
    IonicModule.forRoot(MyApp)
  ],
  //启动的模块，一般不用改
  bootstrap: [IonicApp],
  //配置不会在模块中使用的页面，经常会改
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  //配置服务，，一般不用改
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}//暴露这个类，一般不要改