Let's suppose there's a page implemented with AngularJS. Ideally the frontend (Angular app) and backend (Web services/API/ call it whatever you like) should be 100% separated from each other which means that frontend project doesn't have access to database at all. And that's what I want to achieve.
Let's say we're rendering product list. The workflow is:
- request and render HTML template (including JS code)
- Angular app runs
- Angular loads dynamic data (products data to show the list) and put it into the template.
We've made 2 requests so far (excluding js/css/images etc.) which is fine. Simple, effective, just great. And that's what more or less is shown in tutorials/guides. But that's not the reality. What I'm wondering is what about small pieces of data that are rendered across whole app layout but have to be retrieved from database.
Exmaples of such data are:
- usename of logged in user in top right corner
- menu with categories on the side bar
<select>options in forms are often loaded from database (categories again for example)
For me it doesn't make sense to make a request to backend for each of these pieces of data because it makes a lot of http requests to make on every page refresh/init
How to deal with it?