1

I'm working on an Angular app where some sites may not share the same structure/layout as others. So for example the main page will display a centered multi-step form that takes the user through a quote process.

Then I have another page which is meant for administrative users to view status on orders and one to view some statistics and so on.

My problem is that I'm finding it hard to do it in one Angular app. The main reason being that the layout of the different pages are not very similar. So basically the form differs a lot from the other pages. For example it has a progress bar that should not be displayed on any other pages and the styling differs as well.

Should I really divide this up into multiple Angular apps? It makes sense to group the statistics/order status pages as they can share the same main layout (navbar etc.) with centered content differering, so that's one "app" and then I could have main form app as its own.

At the moment I'm finding my css and structure to be a mess as I need to hide/show stuff all the time.

Does it make sense to divide the site into multiple angular apps, or should I be able to make what I have now work?

Improve this question

1 Answer 1

Reset to default
3

You should ask yourself this question : do I want to have different URLs or domain names for every part of my application ?

If the answer is yes, then create several applications. If the answer is no, create a complete and complex Angular application, with routing, lazy loading, and everything you need to have a production-ready application.

Since Angular is made to create SPA, there is absolutely no constraint on its side. Only on yours. This means that if your code is a mess, this isn't because you should make different Angular applications, but rather because you didn't code properly.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

When you say different URLs do you mean on different domains, or just different URLs altogether?. For example I want the main form to be displayed with mainsite.com/en/productId (linked from another page). Then I want the statistics page to be displayed with mainsite.com/en/dashboard (behind login) and the order status page on mainsite.com/en/track/orderId.
Then you should have a single application. In your case, it's only a route change in Angular's point of view.
Ok fine and even if these pages differ totally in their appearance/structure, it should still work? My mistake was to put too much in the appcomponent.html that related to the main form like a progressbar and centered div. So with all other components such as the dashboard and status page it got caught up in this design and I had to programatically remove the progress bar. So my "solution" is really to make the appcomponent.html close to empty so different components can have their completely different styles and if necessary I can group components under parent components if they share design?
It should totally work ! This is the most common use-case of Angular, so yes it should work :) You just have to split your application into multiple, distinct modules. Think like one component should have one module and every child module of a module should be in the folder of the parent module. This will split your application without you even noticing. This means that in your case, the progress bar should have a module inside your form module, and your dashboard and status page should be on other routes. If they share design, you can create common style sheets and use them in styleUrls
Thanks for your help.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.