0

Let us consider the following scenario: some data (in JSON format) needs to be shown to the end user. The usual way of doing this (or at least my own way) is to use an Angular factory to return the data, include the factory in the controller and display the data using a loop statement / directive.

However, the data is growing bigger day by day (from dozens to thousands) and some fancy animations are added to the views causing the load times of the views to reach the sky.

Usually, there are many ways of loading data (e.g. lazy loading, $q service), but I wonder which one is closer to be the most reliable in serving data asynchronously.

Improve this question
6
  • So you're question is how to display the data, not how to load it, right ? Commented Jan 20, 2016 at 13:44
  • Indeed, but I suppose it needs to be loaded first, doesn't it? Commented Jan 20, 2016 at 13:45
  • Have you considered paging? (via the server) Commented Jan 20, 2016 at 13:46
  • Paging, and or, loading only the data which you haven't got yet, so by using a createdon field in the back end to determine new data in relation to the view? Commented Jan 20, 2016 at 13:47
  • You can use something like sroze.github.io/ngInfiniteScroll tied to a pagination function on your backend. Commented Jan 20, 2016 at 13:48

2 Answers 2

Reset to default
1

If I understand your question correctly your problem is that you have a ton of data to display, this can go wrong in 2 places:

Issue 1: Loading the data

In order to keep the loading quick you can build something with pagination, this will split the data up in smaller pages to keep the loadtimes quick.

Issue 2: $$watchers count

When displaying a ng-repeat your $$watchers count can increase very quickly, this will slow down your $digest cycle drastically, making your UI unresponsive, in order to overcome this you can use something that uses virtualization, such as UI-grid, this will only render a part of the data on the screen untill scrolled and unrenders everything outside of your view.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

In addition to Martijn Welker answer, here are few more points which might help you.

1.First thing, always get the big data after you have loaded the page. You can get small data like global stats when you are loading the page(using the resolve thing but the data in the table should always come after the page is loaded). Give user a loading icon on table portion while you do this.

2.Do you directly show the data as JSON to the user (like a JSON file)? You can improve that by incrementally showing the data(something which JSONblob.com does). It shows top level keys, on clicking a key, it gives next level keys. Your backend can also be designed in such a way that you can give different request for different level and keys. Or you can have headers like:

user > profile > eduction

and show the data for this key, while making the headers clickable.You can also store previous details(small data) in case user wants to return back.

3.Try using pagination(backend or frontend your choice). If you are not doing any sorting/filtering stuff with your data and its readonly, you can use one way binding (Angular 1.3+) which removes the watches from your list. Even though, I don't know where you will need pagination for showing json :). Other than that, you can use plainJs to create this list.

Improve this answer

1 Comment

Thanks for the answer!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.