The src folder

As mentioned earlier, this folder consists of our Ionic app, the HTML, CSS, and JS codes. If we open the src folder, we will find the following file structure:

. . 
├── app 
│   ├── app.component.ts 
│   ├── app.html 
│   ├── app.module.ts 
│   ├── app.scss 
│   ├── main.ts 
├── assets 
│   ├── icon 
├── declarations.d.ts 
├── index.html 
├── manifest.json 
├── pages 
│   ├── home 
├── service-worker.js 
├── theme 
    ├── variables.scss

Let's look at each of these in detail:

• app folder: The app folder consists of the environment specific initializing files. This folder consists of app.module.ts where the @NgModule module is defined. app.component.ts consists of the root component.
• assets folder: This folder consists of all the static assets.
• pages folder: This folder consists of the pages that we are going to create. In this example, we already have a sample page named home. Each page is a component, which consist of the business logic - home.ts, the markup - home.html and the component related styles - home.scss.
• theme folder: This folder consists of variables.scss, overriding which will change the look and feel of the Ionic components.
• index.html: This is where everything starts from.

This completes our tour of the blank template. Before we scaffold the next template, let us take a quick peek at the src/app/app.component.ts file.

As you can see, we are creating a new app/root component. The @Component decorator needs a template or templateUrl property to correctly load the Ionic 2 application. As part of the template, we add the ion-nav component.

Inside the class definition, we have declared a rootPage and assigned it to the home page, and inside the constructor, we have the platform ready callback, which will be called when the platform is ready.

This is a very simple and basic Ionic app. So far you must have worked on Angular code related to the web. But when you are dealing with Ionic, you would be working with scripts related to device features as well. Ionic provides us services to make these things happen in a more organized fashion.