> For the complete documentation index, see [llms.txt](https://enappd.gitbook.io/ionic-4-carpool-app-starter/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-4-carpool-app-starter/how-to-use-this-template-1/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://1109726588-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqjTu_FacKM9vIF7shQ%2F-MB4Kz7nWgLzBcJFA73Z%2F-MB4LNiHFcnjJpOVTc7U%2FScreen%20Shot%202020-06-30%20at%206.40.08%20PM.png?alt=media\&token=f4053808-eada-4651-918d-8bf2d937493d)

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

![](https://1109726588-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqjTu_FacKM9vIF7shQ%2F-LqkOlmd_76bpjgs8by7%2F-LqkRmWdPYBFzdfiqhJ-%2FScreen%20Shot%202019-10-09%20at%205.46.27%20PM.png?alt=media\&token=791ede19-9ae7-4e34-ab07-8e7ae316bb47)

## **Styling** 

![](https://1109726588-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqjTu_FacKM9vIF7shQ%2F-LqkOlmd_76bpjgs8by7%2F-LqkRv7pvR7ngeyQ0zdW%2FScreen%20Shot%202019-10-09%20at%205.46.52%20PM.png?alt=media\&token=03031ea1-37d6-4ca4-af5f-19d675b24639)

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

## **Navigation Code Structure**

![](https://1109726588-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqjTu_FacKM9vIF7shQ%2F-LqkOlmd_76bpjgs8by7%2F-LqkS2vfHCtTj010V-vc%2FScreen%20Shot%202019-10-09%20at%205.47.36%20PM.png?alt=media\&token=fb40e0b6-4f12-42fa-a893-6796d9317cb9)

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