AngularJS websites: single SPA vs multiple SPA apps/components [closed]

Question

This question has been bugging me for some time now.

If you are building a website with multiple functionality using Angular, is it better to build a huge SPA or break down the website into functional "apps" and build an SPA for each app?

For example, we have a social media website with notification feed, user profile, reporting, and groups. Would you build all these features into a single SPA, or build 4 different SPAs and let a backend framework route to the correct SPA?

e.g.

www.mywebsite.foo#/profile/12345/education

vs

www.mywebsite.foo/profile/12345#/education

I'm personally more in favour of the latter method because it reduces the size of the apps, but it does require the page to reload when navigating between apps.

Answer 1

Mark Collings has talked about a thing at your article:

https://markwillcollins.silvrback.com/7-things-i-wish-i-knew-about-angularjs

"3. Structure is critical..."

He suggests to plan each page before init the job.

And then, I believe, you will discover what best approach for your specific need.

I prefer to isolate in small services, because I don't see advantage to share small bits of javascript in a complex hierarchy of load, using require.js or similar approach.