Is nesting pages an anti-pattern?

Ionic Framework ionic-v3
1

Hello there,

I have several ‘views’ of content that need to be nested into a page. What are the arguments for/against using components vs pages as containers for those views? Its unclear to me what to base this decision on.

As far as I understand pages allow for lazy loading, but besides that I don’t see clear differences.

Thanks!

1 Like
2

In Ionic, I don’t consider nesting pages even possible. The way I draw the distinction is that components can be embedded in things, whereas pages interact with the nav system. This definition will likely change with Ionic 4.

1 Like
3

But this is certainly possible:

<ion-header></ion-header>

<ion-content>
 
(stuff here)

<ion-nav [root]="'AnotherPage'"></ion-nav>

</ion-content>

<ion-footer></ion-footer>

‘AnotherPage’ is a nested Page.

The alternative would could be

<ion-header></ion-header>

<ion-content>
 
(stuff here)

<another-page-component></another-page-component>

</ion-content>

<ion-footer></ion-footer>

What are the benefits/drawbacks of these two alternatives?

4

I would definitely stay away from the former example. You’d wind up with NavController's all over the place, and while I can’t point to anything in particular that just seems to be asking for trouble.

The latter example also would fit in well with general Angular/Ionic philosophy.

1 Like
5

Right, thanks for the response.

So what I’m taking away from this is to use a NavController if I need animations between views within the nested component, and if that is not the case, to just use a plain component.

What I’m still unclear about is when to use Pages and when to use Components. The Header/Content/Footer template is possible for both…