Project Structure

Improve this doc

Let’s walk through the anatomy of an Ionic 2 app. Inside of the folder that was created, we have a typical Cordova project structure where we can install native plugins, and create platform-specific project files.

./src/index.html

src/index.html is the main entry point for the app, though its purpose is to set up script and CSS includes and bootstrap, or start running, our app. We won’t spend much of our time in this file.

For your app to function, Ionic looks for the <ion-app> tag in your HTML. In this example we have:

<ion-app></ion-app>

And the following scripts near the bottom:

<script src="cordova.js"></script>
<script src="build/main.js"></script>

• build/main.js is a concatenated file containing Ionic, Angular and your app’s JavaScript.

• cordova.js will 404 during local development, as it gets injected into your project during Cordova’s build process.

./src/

Inside of the src directory we find our raw, uncompiled code. This is where most of the work for an Ionic 2 app will take place. When we run ionic serve, our code inside of src/ is transpiled into the correct Javascript version that the browser understands (currently, ES5). That means we can work at a higher level using TypeScript, but compile down to the older form of Javascript the browser needs.

src/app/app.module.ts is the entry point for our app.

Near the top of the file, we should see this:

@NgModule({
  declarations: [MyApp,HelloIonicPage, ItemDetailsPage, ListPage],
  imports: [IonicModule.forRoot(MyApp)],
  bootstrap: [IonicApp],
  entryComponents: [MyApp,HelloIonicPage,ItemDetailsPage,ListPage],
  providers: []
})
export class AppModule {}

Every app has a root module that essentially controls the rest of the application. This is very similar to ng-app from Ionic and Angular 1. This is also where we bootstrap our app using ionicBootstrap.

In this module, we’re setting the root component to MyApp, in src/app/app.component.ts. This is the first component that gets loaded in our app, and it typically is a empty shell for other components to loaded into. In app.component.ts, we’re setting out template to src/app/app.html, so let’s look in there.

./src/app/app.html

Here’s the main template for the app in src/app/app.html:

<ion-menu [content]="content">

  <ion-header>
    <ion-toolbar>
      <ion-title>Pages</ion-title>
    </ion-toolbar>
  </ion-header>
  
  <ion-content>
    <ion-list>
      <button ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<ion-nav id="nav" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

In this template, we set up an ion-menu to function as a side menu, and then an ion-nav component to act as the main content area. The ion-menu’s [content] property is bound to the local variable content from our ion-nav, so it knows where it should animate around.

Next let’s see how to create more pages and perform basic navigation.