IONIC V3 | INTRODUCTION OF STRUCTURE | IONIC BASICS

Share the post
introduction_of_structure

Ionic src folder Tree Structure :

src

|

|

|-app |–app.component.ts

| |–app.html

| |–app.module.ts

| |–app.scss

| |–main.ts

|-assets|–icon

| |–imgs

|-pages

|-theme |–variable.scss

|-index.html

In source folder —

app folder —

app.component.ts & app.html–>

app.html & app.component.ts is related with each other.as we set our root page in app.html as follows

Ionic app HTML
Ionic app component

We will set our app’s launch page here

Now the role of app.module.ts is to include modules that require an application, compile the application & launch it.

Ionic app module

app.module.ts file contains declaration,imports,bootstrap,entry components,providers.

declaration contains directives, pipes & components using our application

imports contain Ionic Module which set to root module as discuss earlier

bootstrap contains the configuration of components. Inside that, you can see IonicApp component is nothing but an index HTML selector of ion-app

In entryComponents same module are declare which declares in declarations as compiler starts with entryComponent,

Angular can compile app fastly.

providers basically a dependency injection of service. Services are used in any component in our app. We will use one common provider for loader, HTTP calls, all alerts. assets folder contains all icons & images used in our app. Also if you want to add some sound files or any text file you can place them here. pages folder contains all your application pages theme folder contains variable. SCSS file which contains all common designing of application. we will discuss it later.

index.html is launched first as we all know.

Ionic app HTML

Leave a Comment