5

I would like to know what is the proper way to get data from backend when I want to use angularJs (or similar) in my web app?

The only way I see is to render html (static html with js scripts - e.g. angularjs) with no data from backend and then download data via ajax requests from my backend API. But I think this solution is not good because of many HTTP requests:

For example I have blog website, I want to show a post, comments, and the related posts on the sidebar. So probably I need to make at least 3 HTTP requests to get the data unless I will prepare API to get all I need in one request.

I can also imagine websites that could have much more HTTP requests. Is it a proper way to do this? Doesn't it overload a server? Or my way of thinking is so wrong?

Emissary
  • 9,954
  • 8
  • 54
  • 65
latata
  • 1,703
  • 5
  • 27
  • 57
  • I don't think this question has anything to do with AngularJS. It just happens to be the framework you use. – Etherealone Nov 10 '13 at 12:31
  • 1
    Not sure how close to reality your example of a blog website is but why would you want to use Angular for something like that anyway? In a case like that it sounds like you're using Angular for the sake of using Angular, not because it solves a problem you actually have. – Matijs Nov 10 '13 at 13:06
  • ajax driven apps will always have more http requests than static content page. Payload of those requests is way smaller than serving a full page, especially non cached page through a CMS. Lots of requests that slow down initial page load is one thing (UX and SEO), requests for data based on user input is another. WHat baseline are you working from? – charlietfl Nov 10 '13 at 16:36

2 Answers2

1

It is either websockets or HTTP requests. Preparing API to get all in one request is one option. Another two options are XMLHttpRequest/iframe streaming which is a method of a technique known as Comet.

I would go with websockets since it is supposed to solve the problem that was previously solved with weird applications like iframe streaming. There are libraries that properly handles fallbacks if the browser does not support websockets:

web-socket-js ( this needs a websocket server )

Socket.IO ( this has a node.js module and also implements a kind of unnecessary protocol on top of websocket protocol )

If you choose the old methods there will be many problems waiting for you on the road like XmlHttpRequest.responseText while loading (readyState==3) in Chrome

Community
  • 1
  • 1
Etherealone
  • 3,488
  • 2
  • 37
  • 56
1

I think you have to distinguish two cases:

  1. You render the page for the first time.
  2. You update parts of your page when something changes

Of course in the second case it makes sense to fetch only parts of the page via individual HTTP requests. However, in the first case you can simply serialize your complete model as one JSON object and embed it in the page like this: 

<script type="text/javascript">
  var myCompleteModel = { /* Here goes your model */ };
<script>

The controllers of the components on your page can then access this global variable to extract the parts being relevant for them. You can also wrap access to the initial model in a service to avoid accessing a global variable in all your controllers.

lex82
  • 11,173
  • 2
  • 44
  • 69
  • Is this a good way for doing that? I read somewhere that I shouldn't pass data directly to scripts. – latata Nov 11 '13 at 08:44
  • I admit that this solution is not perfect in so far that model data is transferred to the client in different ways which adds complexity. However, I don't see a big problem apart from that. It is also good from a UX perspective because your page appears to load faster. If you find again what you read about this issue, please post it here. – lex82 Nov 11 '13 at 09:11