I am getting 5000 list of user and their details from server and am trying to show those records . Records are displayed but am seeing continues loading.. and after loading am not able to do anything. Is there any solution to load 5000 records without loading and crashing?
The problem with loading 5000 records isn't (only) that you're receiving a lot of data, but that Angular has to process all that in the digest cycle. I'll bet that if you do a profiling in the browser, you'll find most of the CPU time is spend in the digest loop.
To avoid that you have to only allow a limited number of DOM elements on the page at a time. As suggested, one way of doing this is using paging.
Another way, where you still load your 5000 records, is to use a concept called virtual repeat/scroll, where you have a directive that only shows the elements that can fit in your viewport (i.e. on the users screen) and then whenever the user scrolls, the directive adds more elements below, while removing elements that goes out of view. This can be done seamless and can have a huge impact on performance.
Virtual repeat/scroll can be a difficult task to create on your own, but fortunately there are several different implementations available. I have experience with Angular Virtual Scroll ngRepeat directive but there are others out there that work just as well.
It is not advised to load 5000 records at once and try to display the same in the browser. You need to do use paging. You cannot load some heavy data onto browser. It might crash or does not respond. Use paging to bring only 10/20/30 records at a time and provide paging buttons , so user can click and navigate to the desired page.
An article on how you can do paging: http://www.c-sharpcorner.com/article/server-side-pagination-using-angularjs-web-api-and-sql-server/
--If you are using WebAPI
Related
Background:
I have built a tool using angularjs. The user is able to view a dynamic page based on the data. The page can be really long with lots of various types of fields within it. There are many and various angularjs components used within the app.
Issue:
If a user has got lots of data (which is shown within various input fieds/date fields etc; around 500 fields ) then the page takes around 3 minutes to load in IE browser (IE11 is my browser). The same page loads within 20 seconds on chrome and firefox. I have tried now almost a month to find the issue ..but still no luck.
I am very desperate for a solution. I coudn't find any tool that would show me what is causing my page to take so long to load.
Well, first things first, you'll need to profile what is actually taking so long. I suggest you check out
https://github.com/angular/batarang
to do this. A good article that goes over it's use is available at http://daginge.com/technology/2013/08/11/debugging-performance-problems-in-angularjs-with-batarang/ -
It's too long to include in this answer, but the general flow of resolving this is probably going to involve streamlining the watchers involved in each of those component fields etc - rendering 500 fields at once seems somewhat unnecessary - pagination would probably be an easy fix. Limit the data to maybe 50 fields per page? You'll need to track if it's the actual queries you're running to get the data that is taking so long, although based on the difference betweeen IE and Chrome, I would guess it's going to be something in the browser. It could also be that IE is being forced to use some polyfills for the functionality that Chrome and FF are supplying natively. Maybe link to your repo for us to have a look at?
i am working on the single page web application using angularJs.In My application when i go to each and every page cpu memory increased consistentely.I try with $destroy , Remove console and unbind the window event.but till i get the same error.How to resolve it?
you probably got some leak and its not related to angularjs.
$destroy is the right event to clean things up like window/document level bindings as you wrote, but you probably have other issues.
look in chrome profilers tab in the developer tools. it has ability to record what actions took most cpu, where memory is at and so on... very good tool.
you could use that to compare to runs of the same navigation to see what was added to the second run compared to the first.
I am working on a grid that users may load xml file and do editing via grid panel. It works well with around 200 rows. However some users may want to load 50000 records at a time.
When I try to load a file with 10k records, firefox crashes and chrome waits too much. After some debugging I realized that rendering the data to panel requires too much time. for every new row I need to refresh the grid which requires too much time again.
One important point is, the xml file never comes to the serverside, we read it with extjs and load to the grid.
Is is possible to load whole data to store but request a certain amount of data to render the panel view?
I tried inifinite grid but cannot make it work since my data source is a string. What do you offer to manage 50k data.
I've had a similar issue with ExtJS in the past while trying to load very large grids. Let me just say at the outset that it's certainly not their fault - 50,000+ records is just way too much data. To get around this problem I resorted to using paging.
Have a look at their documentation for a paging toolbar.
Here is an example.
My only other suggestion would be to use an infinite grid, but write a file conversion wrapper over your XML data to convert it to JSON.
I have read the AngularJS documentation doc page but I am still not clear on what exactly happens. How does the compiler run? I mean is the compiler a piece of Javascript that is triggered on page load to run and inspect the DOM. If that is the case then is there much overhead every time the page is loaded?
I also have read that you should never change the DOM inside your controller. Why is that and could someone give me a simple example of what I should not do.
You should do a walkthrough of the mobile phone tutorial on the site. The directions are clear and it will show you how to set up your app and where the proper code should be. As Arun said, DOM manipulation should be handled mainly in your directives. Controllers handle the logic, the template handles data binding and incorporates directives to accomplish DOM manipulation. As you work through the tutorial, you will start to see Angular as a different way of thinking.
As far as compilation goes, the index.html page is rendered, the scripts are then loaded, and then Angular gets to work looking for the attributes to include the view template based on the routing and controllers. The template is then parsed with variables bound and watched, and then displayed to the user. Of course, there is a slight delay, as you can see on http://builtwith.angularjs.org/ . On the top right, you see "75 neat things built with AngularJS". If you refresh the page, you notice 75 is replaced with a ? until the page loads (less than a second later). Honestly, unless your controllers and views are incredibly complex, rendering time will never be very long at all. Personal example, I am generating a reports page with 12 columns of data 144 rows long, by parsing and looping through a JSON object multiple times and running calculations and creating a new object, all in the controller when the template is called. The page appears blank for about a quarter of a second before the data appears, templated, formatted, and with the appropriate callbacks.
Again, try it out, see for yourself.
I've a radiantQ gantt control and 20.000 data recived from wcf service to display. When less data to display it works like a charm. But i need to diplay 20.000 records and all browsers crash-freeze. Is there any way to solve this problem? Increasing isolated-storage may works?
thanks.
#halil ibrahim,
Please contact RadiantQ Technical Support and we will provide you hints on how to optimize gantt usage with large amounts of data.
Does application crash in rendering mode (when you display data on UI)? - You can use virtualization mode. You can try create one more thread (task or use background worker) and display parts of data to UI in "stack" mode. Do not load all data on first step. It should work. I tried do it: load of 1000+ data items from service and display it on UI.
Does application crash in process of receiving data from service (when you call a service method)? - You should configure your service. Increase max receive message size, etc. It depend on service, which you use.