Project Structure

The myApp project folder structure should look like this :


The most important folders and files are :

• node_modules : this contains all modules that Ionic needs to work. When uloading to github or compressing your project, you should empty this folder. Later on, you can restore it with npm install
• package.json : this is where all dependencies are managed (see npm install)
• platforms : this is the folder where Android and IOS projects are created. You might encounter some platform specific problems during development that will require these files, but you should leave them intact most of the time.
• plugins : this folder contains Cordova plugins. When you initially create an Ionic app, some plugins will be installed.
• resources : this folder is used for adding resources like icon and splash screen to your project.
• src : the main working folder for Ionic developers. When this folder is opened, you will find the following sub-folders :
  • app : this is where most of the work takes place
  • assets : fonts, icons and images
  • pages : the different screens in your project
  • theme : variables.scss is where you create a look and feel for your Ionic App by updating the $colors map and by overriding Ionic's Sass variables
• www : this is where the output of the build process is generated. It contains the runnable project. When this folder is opened, you will find the following sub-folders :
  • assets : fonts, icons and images
  • build : the generated CSS and JavaScript files
  • index.html as a starting point to your app. This contains the <ion-app></ion-app> tag
  
  
  

  Within the src directory, these are the most important files :

  • app.module.ts : the entry point for our app. Every app has a root module that essentially controls the rest of the application. This is where we declare all the pages in the app, import all modules, bootstrap our app using ionicBootstrap and declare all providers.
    
    

        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 {}
    
       

    
    
  • app.html : the main structure of the app
  
  When the Ionic framework application is generated as a blank template it always comes with one existing page (component) HomePage. We can always add more pages with :
  
  
  ionic generate page pageName
  
  Each page comes with it's own html, ts and scss file. The .ts file is where the code for the class lives. For example, the contact page :
  
  

  import { Component } from '@angular/core';
  import { NavController } from 'ionic-angular';
  
  @Component({
    selector: 'page-contact',
    templateUrl: 'contact.html'
  })
  export class ContactPage {
  
    constructor(public navCtrl: NavController) { }
  }
  

  
  Note how the NavController class is injected into the constructor of the ContactPage class. The NavController is used for navigating from and to other pages. You can learn more about it here.