I am trying to develop an app and I think that my project has many folders of pages. This is the structure of my project:
private-pages/
--post (create and edit post)
--post-view (viewing single post)
--feed (viewing multiple posts)
--group (create and edit group)
--group-view (view single group)
--group-list (viewing multiple groups)
--profile (view profile)
--profile-edit (edit profile)
--tabs
public-pages/
--login
--register
--forgot-password
I tried researching and have found and two ideas seems that seems to be promising. Ngif and components.
Using ngif, I will try to merge pages such as post and post-view in one page depending on navParams which I am currently using in post(create and edit post). Something like
post/add
post/edit/1
post/view/1
all this points to post module. Now my problem here is the code in post.page.html will be too long since there will be three ngif’s which leads me to the next idea.
Using components, again using a single page, I will generate three components such as add, edit, and view posts and ngif them again. While this will shorten the code on post.page.html, I am not sure this is the most practical way. And where should I save the components? Should I create components folder or inside the post folder?
I have also read that components are shareable to different pages. Are components only limited to this and not to one-to-one scenario such as mine?
So going to back my main point, am I doing this correctly? Or is there a more practical way on doing this?
This is a hard question without a definitive answer, so I’m not declaring anything to be gospel here.
Generally, when I have an add/edit/view situation, I find I can share a good deal of code without giant *ngIf blocks, simply by disabling form controls in the “view” situation and changing some wording in the “add” situation. So I would first think hard about whether you can design post.page.html without it really looking like three pages jammed into a single template.
This I think is probably not a fruitful road to go down, because:
Technically, there is no such requirement. Logically, though, I think it’s a bad idea to separate a component that is only used in one place, because it makes the code harder to read by spreading things out that a reader would assume are together. You will also be tempted to break encapsulation on your component, in order to take advantage of properties and methods in the parent page. Then you will end up writing basically pointless binding points of entry and exit from the component just to do this, and finally you’ll scrap the component and put the functionality back in the page.
At least I myself have followed that pattern more times than I care to admit.