CODEWITHSUNDEEP
angularjs
lokers
lokers

Reputation: 2198

AngularJS: single view app, large data and memory issue

I have single view application that has let's say two columns side by side. On the left you have list of orders, when you click on one, you see the details of it on the right hand side.. You can change quantity and add some details (textfield).. whenever you do that the left column is affected immediately by the change, good.

The app is using one main controller and one service. The orders are stored in $localStorage and passed to $scope by controller when you init the page. The view uses ng-repeat loop on the left column and ng-show on the right. All new orders are pushed from external server to the app (controller updates the $localStorage and $scope on each received update).

The problem starts when the list of orders get big, it's noticeable from 50+, the typing on keyboard (in textarea) is getting slower the more orders are in $scope... I understand ordering and filtering might by memory consuming, but is this something I should expect or maybe my approach is wrong?

How would you separate your app logic when you need to deal with big data? (let's say 500+ orders at the same time).

Thanks in advance for all the input, suggestions and your help...

Upvotes: 0

Views: 342

Answers (1)

Jonathan Rowny
Jonathan Rowny

Reputation: 7588

ng-repeat creates lots of watches. Lots of watches = poor performance. How important is the immediate binding to the ng-repeat list? You could create a directive that does what the ng-repeat does with less watches and maybe only updates when you've saved the order.

Also checkout this library... even if it doesn't help you it has a good description of what you're running into and maybe you can figure out a way around it. https://github.com/Pasvaz/bindonce

And what do you mean you're using ng-show to show the orders? That mean you're actually inserting DOM for all the orders "detail view" and then just showing them with ng-show? Because that'd be another huge lag. I'd just have one single "order" partial, perhaps a directive with an isolated scope which can two-way bind to the "selected" order.

It's kinda hard to tell exactly what's going on without any code, but hopefully this helps.

Upvotes: 1

Related Questions