# Modifying Code

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

### **Overall Folder Structure**

![](https://1925830933-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqtxN3m30k544CBSZb_%2F-MABiJrKBrQGNTCTbjxN%2F-MABkS3F8kmgbwRh-UqD%2FScreen%20Shot%202020-06-19%20at%206.55.43%20PM.png?alt=media\&token=51de9eaa-e91d-4be6-bf51-d31606bd84f6)

There are broadly **15**+ 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://1925830933-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqtxN3m30k544CBSZb_%2F-Lqu3JzqDF5yKByWdI0M%2F-Lqu9LAA0Y7wsL4hf8GP%2FScreen%20Shot%202019-10-11%20at%203.01.33%20PM.png?alt=media\&token=29f026f5-e865-449d-ad47-72d114bc96b7)

## **Styling** 

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

![](https://1925830933-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqtxN3m30k544CBSZb_%2F-Lqu3JzqDF5yKByWdI0M%2F-Lqu9ek0yDgrnNuZVbau%2FScreen%20Shot%202019-10-11%20at%203.01.41%20PM.png?alt=media\&token=a591380c-aae7-44d0-af31-6db61acd0e61)

## **Navigation Code Structure**

On creating a project in Ionic4 a file named `app-routing.module.ts` gets generated by default where all the navigation codes get done.

![](https://1925830933-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqtxN3m30k544CBSZb_%2F-Lqu3JzqDF5yKByWdI0M%2F-Lqu9buDb1xkvv0KN5i6%2FScreen%20Shot%202019-10-11%20at%203.03.13%20PM.png?alt=media\&token=b6b55b3e-9f4e-4e65-82e0-1f745dcc1b6b)

We use the path name of a particular page to navigate from one page to another.-

## **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://1925830933-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqtxN3m30k544CBSZb_%2F-Lqu3JzqDF5yKByWdI0M%2F-Lqu9UZQCoH7MKU55CE6%2FScreen%20Shot%202019-10-11%20at%203.02.07%20PM.png?alt=media\&token=816c6c78-55ef-480f-a9cf-d27e0a2a5181)

## **Nested Segment navigation**

![](https://1925830933-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqtxN3m30k544CBSZb_%2F-Lqu3JzqDF5yKByWdI0M%2F-Lqu9NuRpB5BYFBv2kAP%2FScreen%20Shot%202019-10-11%20at%203.01.54%20PM.png?alt=media\&token=34fcf210-bd9d-4458-b3af-6aa12ebfcfd0)

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