Page Vs Component in Ionic-Angular Project

If you code in angular, you will be familiar with the components, and today I want to write about components and pages.

When I started to work on ionic, I was a little bit confused between pages and components. Then after working for some time I learned and got some clarifications. 

Components

So let's get started. You can find multiple definitions over the internet, so let's skip that and see the functionality.

You can generate component in Angular and Ionic both:

Angular

> ng generate component component-name

>ng g c component-name


Ionic

> ionic generate component component-name

>ionic g c component-name

So, there is no difference between component creation and including files in the ionic and angular.

Page

Next, about Pages, Pages are nothing but components which are structured with both routing-module and module in ionic.

you do not have any concept of “page” in Angular. If you try to generate, you will find the error.

But ionic gives you the page concept, you can generate the pages in ionic by below commands

> ionic generate page page-name

>ionic g page page-name

[Note: ionic g p {name}, this command will generate pipe, not page]

So if you see the above page creation and component creation, you will find the only difference is, presence of two extra files in page (routing.module.ts and module.ts). So you can lazy load the individual page as well as normal routing. Lazy loading is by default there. Lazy loading of the individual component is optional.

[Note: Components can be also structured like pages in ionic.]

For a detailed understanding of components: https://angular.io/guide/component-overview

https://ionicframework.com/docs/angular/testing#pages-and-components

 

Hope you have found this blog helpful, Thank you.

 

Add comment