initial data loading in angularjs

Question

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.

Walczak

this topic is important for me too so i wrote some Q&A , may be it will be useful for you: #18098423 – Bolen

@Cherniv: The "A" on the linked page is helpful, but the "Q" is a duplicate of this one. Better to answer this question directly on this page. If the question could be improved to make it clearer, feel free to edit the existing question. – Diorite

@EdwardBrey please note , i'm already asking specifically about working with routes , this part is absolutely missing in bigblind's question. – Bolen

@Cherniv: Thanks for clarifying the distinction between the questions. It's helpful, if you would, to include a few words about the distinction in both your question and your comment linking to it. Most importantly, choose a title for your question that highlights how it differs. – Diorite

Answer 1

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.

Pope

yes, but fetching initial data seams to be an unnecessary roundtrip, which is not too bad if it's just one, but if you need data from several resources in your application, it seams easier to gather them on the server, and send them along with the javascript or html source. – Walczak

@Walczak That is exactly the one big difference between pure client-side web frameworks such as AngularJS and (ROCA-style)[roca-style.org) applications. And the reason why Twitter stepped back from it again. – Callaway

Answer 2

Would it be best to couple Angularjs with an HTTP Client in the backend like Zend_Http_Client or Guzzle to let the server fetch the data. Then, pass the data as json to javascript upon render.

I know Angularjs is designed for Single Page applications. That's why it makes sense that it lazy loads the data.

However, if we're going to move to the approach where we still render the page dynamically and still delegate the task of organizing the content to Angularjs. What framework will be suitable to contain the AngularJS views. Right now, project templates like angular-seed are all static..

That is, the idea is the server serves a page with the embedded json object. Then angular, takes over in the client side, Fetching additional content where needed.

So instead of just a single page of contact (e.g: index.html), we would have several pages like profiles.html, products.html. The help of the backend would be particularly helpful say you have a section which doesn't change often like your username on the top right side of the page. For me, I just think it's better to have these data preloaded in your page and not have to ask the server after the page has been loaded.

As bigblind have noticed, this seems to be the way sites like facebook, gmail, twitter does it. They contain the data embedded on page load. Then, load additional content via services afterwards.

The idea is something like below:

Webservice <---------- Backend------------> Frontend
     <------------------------------------------

Backend delegates the task of querying the webservice to provide initial data in the rendered page to the client. Then client, can directly connect to webservice to fetch additional content.

Using the above setup.. What is the ideal development stack?

Eyeleteer

Answer 3

One way to do it is to create a directive that handles the initialization before binding happens. For example:

app.directive('initdata', function() {
    return {
        restrict: 'A',
        link: function($scope, element, attrs) {
            if ( attrs.ngBind !== undefined)
            {
                $scope[attrs.ngBind] = attrs.initdata ? attrs.initdata : element.text();
            }
        }
    };
});

This directive takes either the attribute value as initial value for the bound $scope property, or the textvalue of the element.

Example usage:

<div initdata="Foo Bar" ng-bind="test1"></div>
<div initdata ng-bind="test2">Lorem Ipsem</div>

Working example on http://jsfiddle.net/6PNG8/

There's numerous way to elaborate on this; for example parsing the initdata as json and merging it with the scope, and making it work for more complicated binds, like $root.someprop. But the basis is remarkably simple.

Cilurzo

Answer 4

According to the answers on this question, a JSON object in a script tag on the page seems to be the way to go. If ayone comes up with a better idea, I'll accept your answer.

Walczak