0

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

Improve this question

1 Answer 1

Reset to default
1

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.

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

3 Comments

hi Jonathan, Thank you for your answer, it puts a lot of light on my issue... The library you pointed me to is something that will definitely help, I don't need to bind everything in my views that's true.... So, can you confirm, it's not really the size of $scope, it's the amount of watchers that run through it each time change is detected? You mentioned "directive with isolated scope", what do you mean exactly by isolated, can I have few separated scopes? Let's say one that provides only the data I need, the other one that I can bind two-way to?
Correct me if I am wrong, everything I pass to the view via $scope is by default watched by angular, right?
Yes, that's correct. It's a problem with watchers. Anything that ends up in the view creates a watcher. Each digest runs through them, when you get too many, it freaks out. Other frameworks solves this by making binding explicit, but in Angular is automagic.

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.