Project Structure

Improve this doc

Let’s walk through the anatomy of an Ionic 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 scripts, 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:

<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>

<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>

<!-- The vendor js is generated during the build process
     It contains all of the dependencies in node_modules -->
<script src="build/vendor.js"></script>

<!-- The main bundle js is generated during the build process -->
<script src="build/main.js"></script>

These scripts are all generated by the build system, so no need to worry about them.

./src/

Inside of the src directory we find our code. This is where most of the work for an Ionic 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: [BrowserModule, IonicModule.forRoot(MyApp)],
  bootstrap: [IonicApp],
  entryComponents: [MyApp, HelloIonicPage, ItemDetailsPage, ListPage],
  providers: [StatusBar, SplashScreen, {provide: ErrorHandler, useClass: IonicErrorHandler}]
})
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 1 and AngularJS. 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 typically it’s an empty shell for other components to be loaded into. In app.component.ts, we’re setting our 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 [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.