How to cut down API requests in AngularJS app
<p>My problem is I'm making too many API requests, which I want to cut down if possible. Below I'll describe the situation:</p>

<hr>

<p>I have three pages, all linked using <code>ngRoute</code>. Like this:</p>

<pre><code>Page A: Teams (list of teams)
  URL: "/teams"
Page B: Team Details (list of players)
  URL: "/teams/team-details"
Page C: Player Details (list of player stats)
  URL: "/teams/team-details/player-details"
</code></pre>

<p>Page A is populated by pulling an array of the teams from an API very easily using a simple <code>$resource.query()</code> request, and using ng-repeat to iterate through them.</p>

<p>Page B is populated by calling an html template and populating specific fields with values from a <strong>separate API request</strong> to the <code>/team-details</code> endpoint, taking the <code>team_id</code> value from the clicked element on Page A.</p>

<p>Page C (as with page B) takes a <code>player_id</code> from the clicked player on Page B and calls the <code>/player-details</code> endpoint using that value. This is <strong>yet another separate request</strong>.</p>

<hr>

<p>This all works fine, but as you can imagine, a single user could quite easily rack up in excess of 100 API requests within an hour. </p>

<p>I have a request limit of <strong>1000/hour</strong>, so if a mere 10 users are online at the same time, it could easily exceed my limit and shut down my API.</p>

<p>If I could access the API as one single master endpoint that outputted all data and subdata in one set, then that would solve my problem, but since I need to request separate endpoints I can't see how to do this.</p>

<p>Is there a better way to approach this? Or are these excessive API requests the only way?</p>

<p>Any help would be appreciated.</p>