App Structure

BUILT WITH SASS.

The App uses SASS, which is basically CSS with superpowers. Each component has its dedicated sass files structured with independent variables so you can have maximum modularity, flexibility and customizability.

There are four main folder structures in an Ionic 3 app:

  • App: App has all the files needed to bootstrap the app and the main structure we will build the app upon.

  • Pages: Here you can see all the app pages html, js and css.

  • Theme: This folder contains all the superpowers of Sass (variables, mixins, shared styles, etc) that makes super easy to customize and extend the app.

  • Assets: In this folder you will find images, sample data json’s, and any other asset you may require in your app.

Note: If you want more information, please refer to Ionic Getting Started pages.

APP

app.component.ts

It is the main entry point of our app. It defines the basic structure and initial navigation of the app.

In our case we have a combination of tabbed navigation and side menu navigation. In this file we define which page would be the first one and the options and navigation of the side menu.