Ionic4.x 项目结构简单分析

2019-05-29 17:03:59 阅读：197 来源： 互联网

标签：文件项目 Ionic4 app json 简单 import ionic angular

新建项目

e2e:端对端测试文件 
node_modules :项目所需要的依赖包
resources :android/ios 资源(更换图标和启动动画)
src:开发工作目录，页面、样式、脚本和图片都放在这个目录下
www:静态文件，ionic build --prod 生成的单页面静态资源文件
platforms:生成 android 或者 ios 安装包需要的资源---(cordova platform add android 后 会生成)
plugins:插件文件夹，里面放置各种 cordova 安装的插件 config.xml: 打包成 app 的配置文件
package.json: 配置项目的元数据和管理项目所需要的依赖 ionic.config.json、ionic.starter.json:ionic 配置文件 angular.json angular 配置文件
tsconfig.json: TypeScript 项目的根目录，指定用来编译这个项目的根文件和编译选项 tslint.json:格式化和校验 typescript

Ionic4.x src 下面文件分析

app:应用根目录 (组件、页面、服务、模块...) 
assets:资源目录(静态文件(图片，js 框架...) 
theme:主题文件，里面有一个 scss 文件，设置主题信息。 
global.scss:全局 css 文件
index.html:index 入口文件
main.ts:主入口文件
karma.conf.js/test.js:测试相关的配置文件
polyfills.ts: 这个文件包含 Angular 需要的填充，并在应用程序之前加载

app.module.ts 分析

//文件：根模块  告诉ionic如何组装应用


//ionic angular的核心文件
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

//ionic打包成app以后配置启动画面 以及导航条的服务  （不用管）
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

//引入路由配置文件
import { AppRoutingModule } from './app-routing.module';

//引入根组件
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],  //申明组件
  entryComponents: [], //配置不会在模板中使用的组件
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],   //引入的模块 依赖的模块
  providers: [  //配置服务
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

app-routing.module.ts 分析

import { NgModule } from '@angular/core';
//路由相关配置
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
//路由配置
const routes: Routes = [
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
  { path: 'button', loadChildren: './button/button.module#ButtonPageModule' }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

标签：文件,项目,Ionic4,app,json,简单,import,ionic,angular
来源： https://www.cnblogs.com/loaderman/p/10944802.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Ionic4.x 项目结构简单分析