Modifying Code

How to navigate and modify the code

Screen / View’s Code Structure

The code is structured in app -> pages | components | models | services

Overall Folder Structure

There are broadly 40+ pages in this template. All pages are shown in the src/app/pages folder above. Each page’s code is kept in a separate folder. Folder names are self-explanatory. You can create a page by executing the command

$ ionic cordova generate page your_page_name

This will create a folder of page name containing four files as -

In the case of Ionic 5, pages are generated with lazy loading by default which means a page has its own module.

├── enappd.html
├── enappd.module.ts
├── enappd.scss
└── enappd.ts

• enappd.html: contains UI components for the page.

• enappd.scss: contains sass styles to style your page.

• enappd.ts: contains TypeScript code

Layout File Code Structure

The layout file has the structure shown in the image.

• imports are written on the top.

• @component is the decorator that marks a class as an Angular component and provides configuration metadata that determines how the component should be processed, instantiated, and used at runtime.

• A constructor is used for dependency injections.

When the app loads the constructor gets called first then ngOnInit.

After constructor and inside the class we can write our logic for the page/component in page.ts

Styling

Style pages are generated by default for each page after executing page generate command, inside the page folder.

Navigation Code Structure

On creating a project in Ionic 5 a file named app-routing.module.ts gets generated by default where all the navigation codes get done. We use the path name of a particular page to navigate from one page to another.-