initial loading of data in angularjs


When building a web app where every page depends on many data sources, what's the best way to fetch the initial bits of data? When I look at twitter, I see the tweets that are visible on page load are in the HTML source, and more tweets are loaded in using AJAX as you scroll down. But there's no convenient way to get data that's already in the DOM to be inserted into the model.

Making a request for the initial data, immediately after page load seams stupid, because you've just made a lot of roundtrips to the server to fetch css, html and javascript. Would it be a bad idea to insert the data into a javascript tag on the page, so a javascript function can add the initial data?

I'm specifically asking for angularjs, but if there's an general technique, please let me know as well.

You'll be referencing your controller anyway on page load, so you won't have to have an inline script tag.

You can either set a default model and use the attribute ng-bind on initial load, or call a function to pass back data.

It's pretty typical to fetch data on load in angularjs.