> For the complete documentation index, see [llms.txt](https://enappd.gitbook.io/ionic-5-food-ordering-template/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://enappd.gitbook.io/ionic-5-food-ordering-template/how-to-use-this-template/modifying-code.md).

# Modifying Code

How to navigate and modify the code

## **Screen / View’s Code Structure**

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

![](https://2208669250-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqyzgzOgrLqoeN3iFfy%2F-M9iH7EP5Ndl_yOUPGth%2F-M9iLA9fEZdBvZff2v_0%2FScreen%20Shot%202020-06-13%20at%209.12.17%20PM.png?alt=media\&token=64148a1d-04ba-4d6a-9847-cf85b38f1c85)

## **Overall Folder Structure**

There are broadly **20+** pages in this template. All pages are shown in the src/app folder above. Mostly, 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` 

![](https://2208669250-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqyzgzOgrLqoeN3iFfy%2F-M9iH7EP5Ndl_yOUPGth%2F-M9iLp-Nd616NS2hUMT8%2FScreen%20Shot%202020-06-13%20at%209.14.21%20PM.png?alt=media\&token=691c3d8e-3f4f-4b0f-9c74-5fea02bacecd)

## **Styling** 

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

![](https://2208669250-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqyzgzOgrLqoeN3iFfy%2F-M9iH7EP5Ndl_yOUPGth%2F-M9iLsdyS_R23G4AmcT8%2FScreen%20Shot%202020-06-13%20at%209.14.29%20PM.png?alt=media\&token=b78bd139-cc99-480f-b0a8-cba08205ab8a)

## **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.

![](https://2208669250-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqyzgzOgrLqoeN3iFfy%2F-M9iH7EP5Ndl_yOUPGth%2F-M9iLzWLeLfv5buEVwas%2FScreen%20Shot%202020-06-13%20at%209.14.41%20PM.png?alt=media\&token=6cc7cfb4-bc76-445a-8e25-13875852f640)

## **Tabbed navigation**

Navigation for the Tabs is defined in `tabs/tabs.router.module` file. All the children of tabs are inside the tab navigation as well

![](https://2208669250-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqyzgzOgrLqoeN3iFfy%2F-M9iH7EP5Ndl_yOUPGth%2F-M9iMEpzaQuv7nysb5P9%2FScreen%20Shot%202020-06-13%20at%209.14.58%20PM.png?alt=media\&token=27e67d69-f8de-4e32-b809-dd25dcf2dcf2)

## **Nested Segment navigation**

![](https://2208669250-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqyzgzOgrLqoeN3iFfy%2F-M9iH7EP5Ndl_yOUPGth%2F-M9iMAJwx0Mq37PhFCIS%2FScreen%20Shot%202020-06-13%20at%209.16.40%20PM.png?alt=media\&token=a8d4ac7c-91d9-4fc1-a07d-52780a9312a5)

Controls the navigation of Segments (2 Segment buttons in the **Offers** page). This is detailed in `src/app/offers`folder. All the settings of Segment Navigation can be controlled from here.