在AngularJS中异步加载数据的正确方法

Question

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 (eg lazy loading , $q service ), but I wonder which one is closer to be the most reliable in serving data asynchronously.

Answer 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.

Answer 2

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.