Scribd
Upload
52 views

01 Ionic Project Structure

The Ionic project structure organizes files into folders for core app files, assets, themes, and environments. The src/app folder contains the main app structure including pages, which are added using a generate command to create component files like HTML, TS, and SCSS. Route configurations are also automatically updated when new pages are added.

Uploaded by

UMAIRAH BINTI ABDUL KADIR
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
52 views

01 Ionic Project Structure

The Ionic project structure organizes files into folders for core app files, assets, themes, and environments. The src/app folder contains the main app structure including pages, which are added using a generate command to create component files like HTML, TS, and SCSS. Route configurations are also automatically updated when new pages are added.

Uploaded by

UMAIRAH BINTI ABDUL KADIR
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

IONIC PROJECT STRUCTURE

The majority of the app will be developed in the src/app/ directory

 App: has all the files needed to bootstrap the app and the main

structure we will build the app upon.

 Assets: in this folder you will find images, sample data json’s, and any

other asset you may require in your app.


 Theme: this folder contains all the superpowers of Sass (variables,

mixins, shared styles, etc) that makes super easy to customize and

extend the app.

 Environments : this folder contains the base configuration

file, environment.ts, which provides a default environment. You can

add override defaults for additional environments, such as production

and staging, in target-specific configuration files.

Getting started.

Check a getting started file to see how to start developing your app.
You must have your project folder ready before you can read the
following notes.
Adding a new page/screen into the project

Ensure that you are in your project folder. In this example, my


project folder is A212.
Please read Getting Started Note to create a new project!

By default when you have created a new app, a page called home
page will be created automatically.

However, if you want to create a new page, use generate command


as above. Here a new page called about will be created.
You can see that, there are two folders will be created as shown
below.
1. home
2. about

Check the changes at app-routing.module.ts that was made


automatically when you had added a new page into the project.
Example:
app-routing.module.ts

import { NgModule } from '@angular/core';


import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes =


[
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then( m =>
m.HomePageModule)
  },

  {
    path: 'about',
    loadChildren: () => import('./about/about.module').then( m =>
m.AboutPageModule)
  },

  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },

];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }
In this example, we only have one screen and we named it as home.
Check home’s directory.
We have 6 files altogether.

Let’s check the purpose of these files.


home-page.html
<ion-app>
  <ion-header>
    <ion-toolbar  color="warning">
      <ion-title>Header</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content class="ion-padding">
    <h1>Main Content</h1>
  </ion-content>

  <ion-footer>
    <ion-toolbar color="primary">
      <ion-title>Footer</ion-title>
    </ion-toolbar>
  </ion-footer>
</ion-app>

Result
home-page.scss
#container {
  text-align: center;

  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

#container strong {
  font-size: 20px;
  line-height: 26px;
}

#container p {
  font-size: 16px;
  line-height: 22px;

  color: #8c8c8c;

  margin: 0;
}

#container a {
  text-decoration: none;
}

home-page.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor() {}

}
Home-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomePage } from './home.page';

const routes: Routes = [


  {
    path: '',
    component: HomePage,
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HomePageRoutingModule {}

You might also like