Modifying Code
How to navigate and modify the code
Last updated
How to navigate and modify the code
Last updated
Screen / View’s Code Structure
4.2 Overall Folder Structure
There are broadly 30+ 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
This will create a folder of page name containing four files as -
In the case of Ionic 4, pages are generated with lazy loading by default which means a page has its own module.
enappd.html: contains UI components for the page.
enappd.scss: contains sass styles to style your page.
enappd.ts: contains TypeScript code
Components are kept in separate folder src/app/components
Services are kept in separate folder src/app/services
4.3 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
4.4. Styling Code Structure
Style pages are generated by default for each page after executing page generate command, inside the page folder.
4.5. 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.-
4.6 Nested Segment navigation
Controls the navigation of Segments (3 Segment buttons in the app). This is detailed in src/app/home/home.page.ts. All the settings of Segment Navigation can be controlled from here.
