AngularJS Single Page Application Architecture

Question

So I have started developing a single page web application using AngularJS. To give you an idea of the size of this application, it will have around 20-30 APIs and 100's of endpoints. The biggest advantage of using this approach is that complete app gets downloaded in the beginning and calls are made to back-end later to populate data in different screens (similar to a mobile app). While the overall experience is very good, I am starting to wonder if this is the right approach for a website of this scale. My main concerns are:

• Will this approach increase initial load time drastically as all templates, javascript and css is downloaded in the beginning?
• What happens if I update a template or javascript on server and users keep using the downloaded app which will not be compatible with the back-end? Should I add a client version and always compare it to server's version just like for mobile apps to check if an update is required? In this case a simple refresh will update the app but I need to know when to refresh the app.

I would greatly appreciate if people with SPA experience can give their feedback on the above points. Thanks in advance!

Answer 1

I have the same situation. For your first concern i use ocLazyLoad.

I load the basic files at the beginning, but only load the files i really need, when the user needed.

With a lazy load, i think i solve the second concern, because ocLazyLoad can reload the file. Setting the cache property to false.

How to reload resources (HTML/CSS/JS) on version change