Ionic_Project Structure

Project Structure

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. The bulk of our application lives inside the app folder, and so we are going to spend most of our time there.

/www/index.html

www/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/js/app.bundle.js"></script>

• build/js/app.bundle.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.

./app/app.js

Inside of the app directory we find our pre-compiled 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 app/ is transpiled into the correct Javascript version that the browser understands (currently, ES5). That means we can work at a higher level using TypeScript and ES6+, but compile down to the older form of Javascript the browser needs.

app/app.js is the entry point for our app.

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

@App({
  templateUrl: 'build/app.html'
})
class MyApp {
  constructor() {
  }
}

Every app has a root component that essentially controls the rest of the application. To specify a root component with Ionic, we use the @App decorator.

In this component, we set the template to be the file at build/app.html, which is a compiled version of app/app.html.

./app/app.html

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

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

  <ion-toolbar>
    <ion-title>Pages</ion-title>
  </ion-toolbar>

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

</ion-menu>

<ion-nav id="nav" [root]="rootPage" #content swipe-back-enabled="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.

./app/pages/

Within the pages folder are all of the app pages. Each page has its own folder, consisting of a page template (page.html), class (page.js) and style (page.scss).

Template:

<ion-navbar *navbar>
  <ion-title>
    Tab 1
  </ion-title>
</ion-navbar>

<ion-content class="page1">
Hello World!
</ion-content>

Template defines the layout (UI) of the page.

Class:

import {Page} from 'ionic-angular';

@Page({
  templateUrl: 'build/pages/page1/page1.html'
})
export class Page1 {
  constructor() {

  }
}

Class contains the logic for the page. By using the export keyword we are declaring this class importable within other files by using the following line of code:

import {Page1} from './pages/page1/page1'

Style:

.page1 {

}

Style is a custom CSS for this page.

Conclusion

Comparing Ionic and Android project structures, although I know I just scratched the surface, but the Ionic project structure looks much more intuitive to me and I started adding content to the Ionic app in no time. Comparing it to Android where I'm not really sure where or how to start just yet.

References

• http://ionicframework.com/docs/v2/getting-started/tutorial/project-structure/