Structure of an Ionic App

tutorials
1

A blog post that breaks down the basic structure of an Ionic Hybrid app and how each piece is used to build amazing apps.

Special thanks to @maxlynch for a technical review of this post to make sure everything was factually correct. :slight_smile:

4 Likes
2

Hey,

thank you and nice images in the overview section.

But are you sure that this is truly a tutorial about ionic app structure?
Sounds more like: here are the main parts of an angularApp.
And how to use ui-router instead of default routing service.

The only ionic-dependend part is your usage of ion-view and ion-content in the first code example.

Under that title i would expect something like:

  • main app layout (ion-header, ion-content, ion-footer)
  • how to use the ion-views, what happens with the title-attribute
  • layout with a sidemenu
  • layout with a navbar
  • or how you can structure your dirs and files

Maybe you can think about it :wink:

3

Valid points.

However, this is only the first of what I hope to be many posts though, so it was more meant to be a introduction to the architecture of an Ionic-based app, and therefore a Angular app.

Understanding the architecture is a very first important step before learning about the specifics of the framework. (headers, footers, sidemenys, etc).

4

Hi Andrew,

Great blog post. I recently posted this topic and was wondering if you had any thoughts on alternative app structures such as the one proposed in ngBoilerplate. Possible to use ngBoilerplate type structure with ionic app?

Thanks.

5

Very interesting idea!

I haven’t personally tried that, but I see no reason that it shouldn’t work.