The code is structured in
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
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
After constructor and inside the class we can write our logic for the page/component in
Style pages are generated by default for each page after executing page generate command, inside the page folder.
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.-