Ionic 3 - Project Structure

Before we start building our application, let’s take a close look at the anatomy of an ionic application. Inside the folder that was created during the scaffold, you have a typical Cordova project structure where you’ll be able to install native plugins and create platform-specific project files.

./src/index.html

src/index.html is the main entry point for the app. Much like the index.html file from angular projects you worked on yesterday, you'll spend very little time in this file while building your application. It's main purpose is to setup script and CSS includes and bootstrap, or start running, our application.

For the app to function, Ionic will look for the <ion-app> tag in your index.html file. Think of this as the root component for your ionic application.

./src/

Inside the src directory, you'll find all your uncompiled code. This is where you'll spend most of your time while building your app. When you run ionic serve, all the code inside of src/ is transpiled into a Javascript version that is supported by most browser.

Adding a Page

Just like with rails and angular, Ionic provide us with a generator to scaffold the most common components to an app. We will be using that to generate a new page.

$ ionic g page calculator




If you take a look at your src/pages/ folder, you'll see that a new folder name calculator has been created.

Every time you created a new page, you need to tell the application about it by importing it in app.module.ts. Open it and add the following line at the top of it

import { CalculatorPage } from '../pages/calculator/calculator'




Then add CalculatorPage to the declarations and entryComponents properties. Next, we also import CalculatorPage in src/pages/tabs/tabs.ts and create a new tab for it.