Ionic Application Structure

In our previous tutorials we discussed about Ionic Framework introduction and key components and how to Setup your development environment to build Ionic apps.

In this tutorial we will discuss what the typical architecture of an Ionic application looks like. We will also explain in regular words what each of those pieces of the application architecture are and how to use them.

In the our Setup your development environment to build Ionic apps we show how to install all the required dependencies to start building Ionic apps, and also how to create your first Ionic app. Let’s now go through the anatomy of an Ionic app.

Inside the src directory we find our raw, uncompiled 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.

Inside src folder -in a typical Ionic app- there are three main folder structures.

• App: has all the files needed to bootstrap the app and the main structure we will build the app upon.
• Pages: here goes all the app pages html, js and sass/css (Templates, Components and styles).
• Theme: this folder contains all the superpowers of Sass (variables, mixins, shared styles, etc) that makes super easy to customize and extend the app.

And there are other secondary but also important folders

• Services: here goes all the models and services to access remote (backend API’s) data, etc.
• Assets: in this folder you will find images, sample data json’s, and any other asset you may require in your app.

App Folder

app.component.ts

It defines the basic structure and initial navigation of the app. In our case we have a side menu navigation. In this file, we define which page would be the first one and the options and navigations of the side menu.

Here, we will also get notified when the platform is ready and our plugins (cordova and native stuff) are available. That enables you to do any higher level native things you might need.

app.html

Here we define the navigation and it’s root. 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.

app.module.ts

This file is the entry point for our app. It includes the main Angular module (NgModule) of our app. It is also the place where we should declare the vast majority of our dependencies (such as pages, custom components, services, etc) and ‘teach’ the main module how to use them.

app.scss

This is the main entry point for our app sass files/styles. Here is the place you should include your app shared imports and global sass you may use and apply globally. Additionally, this file can be also used as an entry point to import other Sass files to be included in the output CSS. This is NOT the place to include shared Sass variables. You have to define, adjust, add those in "theme/variables.scss".

main.ts

This is an ionic auto-generated file and it takes care of the bootstrapping of the app.

Pages Folder

Each page has its own folder. Within that folder you will find every related file for that page. This includes the html for the layout, sass for the styles and the main page component.

Theme Folder

Here you will find all the variables, mixins, shared styles, etc, that will make your app customizable and extendable.

Maybe you don’t know Sass? Briefly, it is a superset of css that will ease and speed your development cycles incredibly.

common

Under the theme/common folder you will find (classified by component/functionality) all the shared styles, this way we encourage code reuse and prevent DRY.

variables.scss

This is the predefined ionic file where you should include all the variables you may use in your app. For example, all the colors used within the app. Having those in variables, will enable you to play around and try different color schemes easily.

Services Folder

This folder is for all the services you will use to access the data that will be presented in the app.

In this first part we will only focus on the local data json files.

Assets Folder

All the images you may use in your app as well as other assets, go here.

Modules

They help organize an application into cohesive blocks of functionality by wrapping components, pipes, directives, and services.

In particular, Ionic has two kind of modules, both using the implementation of Angular NgModule:

• IonicModule: handles the bootstrapping of an Ionic App. We import this into our root module (app.module.ts). By doing that and passing a root component (typically defined in our app.component.ts), IonicModule will make sure that all components, directives, and providers from the framework are imported. This way we don’t need to manually import all of the Ionic specific stuff every time we want to use them.
• IonicPageModule: handles the bootstrapping of a child IonicPage in order to set up routing. IonicPages are optional and are used to provide deep linking functionality to our app. In this post you can learn more about deep links

Components

They are the most basic building block of a User Interface, and the main way we build and specify elements and logic on the page.

A component contains two important things: the view and some logic.

• We define the application logic (what it does to support the view) inside a class which also handles all the interaction with the view through an API of properties and methods architectured by Angular.
• Using the Angular @Component decorator we provide additional metadata that determines how the component should be processed, instantiated and used at runtime. For example, we set the html template related to the view handled by the component.

In order to be usable by another component or application, a component must belong to an NgModule. To specify that a component is a member of an NgModule, you should list it in the declarations field of that NgModule.

One side note on the importance of components from the software architecture principles point:

It is determining and recommended to have separate components, and here’s why:

• Imagine we have two different UI blocks in the same component in the same file. At the beginning they may be small, but each could grow. We are sure to receive new requirements for one and not the other. Yet every change puts both components at risk and doubles the testing burden without benefit. If we had to reuse some of those UI blocks elsewhere in our app, the other one would tag along for the ride.
• That scenario violates the Single Responsibility Principle. You may think this is only a tutorial, but we can still do things right. Moreover, doing them right is easy and we learn how to build Angular/Ionic apps in the process.

Ionic Framework encourages this principle by having each page under a separate folder and with its own component.

Templates

They are used to define a component view. A template looks like regular HTML, with typical HTML element tags, but it also has some differences.

Code like *ngFor, {{person.name}}, (click), and [person] uses Angular's template syntax to enhance HTML markup capabilities. Templates can also include custom components in the form of non-regular html tags. These components mix seamlessly with native HTML in the same layouts.

Services

Almost anything can be a service, any value, function, or feature that your application needs. A service is typically a class with a narrow, well-defined purpose. It should do something specific and do it well. The main purpose of Angular Services is sharing resources across components.

Take Component classes: they should be lean. Component's job is to enable the user experience (mediate between the view and the application logic) and nothing more. They don't fetch data from the server, validate user input, or log directly to the console.

They delegate such tasks and everything nontrivial to services. Services are fundamental to any Ionic application, and components are big consumers of services as they help them being lean.

The scenario we’ve just described has a lot to do with the Separation of Concerns principle. Angular doesn't enforce these principles, but it helps you follow these principles by making it easy to factor your application logic into services and make those services available to components through dependency injection.

External resources

Databases, API’s, etc, are fundamental as they will enable our app to interact with the outside world.

There’s much more to cover about the basic building blocks of Ionic applications like Dependency Injection, Data Binding, Directives, etc.

Now that you learned how is an ionic project structure and which are the building blocks of ionic apps, you are ready to build your first Ionic real app. In that tutorial we will map the project structure to the app’s architecture, so we can fully comprehend how all the pieces interact with each other.

We also have more beginners tutorials you may find super useful during your learning journey.