Ionic 2 project structure

Anatomy of the Ionic 2 app. Enter the folder created by the project, there is a typical Cordova project structure, we can install native plugins and create platform definition project files.

./src/index.html

src/index.html is the main entrance of the app, set up scripts and CSS, guide and start our application. For app applications, Ionic looks for <ion-app> tags in HTML.

<ion-app></ion-app>

The code below is near the bottom:

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

• build/main.js
  contains the combined files for Ionic, Angular, and the App's own JavaScript.

• 404 when cordova.js
  is developed locally, it will be injected into your project during the Cordova build process.

./src/

Contains our original uncompiled code in the src directory. It is also our main working directory for writing Ionic 2 apps. When we run Ionic serve, our code in the src directory compiles to the correct JavaScript version that the browser understands (currently ES5). This means that we can use the advanced features of TypeScript, but the compilation will use the lower-level version that the browser needs. src/app/app.module.ts is the entry point of our app, near the top of the file, we can see the following code:

@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 controls the app. This is a lot like Ionic and Angular1's ng-app. This is also where we bootstrap our app using ionicBootstrap.
In this module, we set the component to MyApp in src/app/app.component.ts. This is the first component loaded by our app, usually this is an empty shell for other components to load. In app.component.ts, we set the template of src/app/app.html, let's take a look:

./src/app/app.html

Here is the main template of src/app/app.html in the app:

<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 build an ion-menu as a menu, and then an ion-nav component as the main content area. The [content] property of the ion-menu is bound to the content in the local variable ion-nav, so it knows its action.