Am using angular in this simple search results page and instead of adding jquery masonry for layout and deal with timing issues I decided to give this directive a try since it plays nicely with the ng-repeat.
Unfortunately when I have a large dataset and the ng-repeat takes a second or two, the page gets all screw up and all items render on top of each other. Someone claimed that it has something to do with the last element in the ng-repeat not being loaded by the time the layout is created through the plugin.
Someone else recommended a timeout to create a delay, this option works but the user can see the layout being built, which is not the best solution.
Anyone out there that has use this directive to create a masonry layout with a large dataset?
Related
Generally ng-repeat is used to represent the objects and arrays in the view from the controller.It is used for repeating each element in the group of data.Here I want to know the alternate way for representing the group of data in the view without using ng-repeat.
Although the answer is dependent on situation in which you provide solutions anyway,
As per my development experience ng-repeat is good if you data is very less.and if data is heavy the performance of ng-repeat reduces considerable amount.
Inorder to solve above problem we can go for custom directives
Here are some of the directives which you can look for getting some idea
AngularJS ng-repeat Alternative Approach
This document will give all step by step approach to create custom directives.
This is about alternative approach to ng-repeat to handle heavy data
binding with better page performance. This article will provide
insights of how to replace particular ng-repeat with particular data.
AngularJS directive for much more quicker lists rendering
A custom directive you can add and you can customize based on your requirements with following features
Shallow list watch (ngRepeat uses deep watch)
Animations support
Special service to cause list render outside of digest cycle
Smooth scrolling even on heavy compited lists (check example)
About 200% performance boost
Still hesitating? Try to scroll page with ng-repeat list and a page with quick-ng-repeat
Apart from this i can go for some solutions such as pagination lazy loading etc to improve performance
ng-repeat is good to use when you don't have a large amount of data. There is an advantage using ng-repeat, whenever you use track by $index, it will do some hashing, and when it encounters a similar kind of element as you update the model properties, it won't recalculate the layout for that particular element.Behind the scenes, ngRepeat adds a $$hashKey property to each task to keep track of it.
But ng-repeat is not the right thing to use when you have large datasets as it involves heavy DOM manipulations. And you should consider using ng-repeat with pagination.
You can consider using transclusion inside a custom directive, to achieve the behavior you are looking for without using ng-repeat.
I am using Angular with Node to create a Web-APP. The back-end will be building a standard JSON RESTful API, and that is going normally. As for the front end, I am running into a little bit of problems. So my website is designed in a way where there are essentially TWO main displays. Eg. Two windows inside the website that can change frequently. I have NO IDEA how I should implement this! So far I have split my website into directives, eg each "display window" is its own directive, and I was thinking maybe use $localStorage and just have a bunch of ng-ifs inside each HTML file for each directive, switching the view depending on some value in $localStorage. Eg. Person clicks a button, some value in local storage changes to 10, an ng-if inside the directive displays the correct "view" inside the display because the value 10 represents some view. The problem is that I will have to put ALL my HTML in one file, and Im not even sure if this will work! Any suggestions? Any help appreciated!
PS. The two "main displays" can change without the other one changing, hence why I didnt want to group them into 1 view. They are separate entities, and programatically it makes more sense to split them up! They are also physically seperated on the screen (bottom right and top right, seperated by a bar)
For displaying two separates views in the same page, you have to use AngularUI Router because the native ngView directive only supports one.
I created a kind of TabControl, in which I activate Pages and depending on the PageNumber I show a table (ng-repeats). This table is an own directive (a selfmade Grid-Directive).
Now I experience, that if I have less tabpages, the application is faster than if I have more tabpages - although all pages use ngIf and are not rendered until the according PageNumber is set.
I believe, it is because ngIf Compiles it's content eventhough it shouldn't but I can't quite get to the point of it when using a profiler. I just see, that "compileNodes" gets called a lot.
Does anyone experience the same? Is there an idea for a workaround?
Edit:
what's also interesting is, that the first time I go to the tabcontroll (link inside a single-page-application) it's faster and the following times it's slower. As if something is remembered although the whole tabbed-control gets deleted when navigated to another content.
Edit 2:
I'm still trying to figure it out. It could even be the ngRepeat as I'm showing my TabControl inside another TabControl which I do with ngRepeat. Interestingly enough: The first time I visit my Page it is fast, then I click to another Page and when I come back it is slow! Does ngRepeat keep some things in cache?? The Browser-Profile tells me that there are some things in jQuery's data_user -> cache which aren't free'd (in Chrome up to 9MB of Data on every click!!)
Since its a tab view use ng-switch instead of ng-if because it has to run through all the cases to display the tab rather jumping to the tab to display.
I'm required to populate my bootstrap powered left navigation based on permissions stored in database.
Permission based menu data set will be fed from web api
So i tried to extend http://jsfiddle.net/kmussel/evXFZ/ directives to change my static menu to dynamic menu .
Everything goes well except collapse functionality is not working as expressions for dynamic ids for data-target is not evaluated somehow.
I have created http://jsfiddle.net/jaimini/gKnJ2/1/ ti mimic the issue I'm facing.
data-target="{{node.id}}"
is not evaluated and hence expand/collapse is not working.
I have also added hardcoded IDs in 2nd menu to show that my approach will work if the expression is evaluated as required.
Manage to solve the issue by removing target attribute from parent link.
updated the fiddle and now its working as per my need.
please note that for proper functioning of bootstrap collapse plugin
data-target="{{\'#navigation\'+node.id}}"
would be required.
This jsfiddle is like yours, it use recursive ng-repeat. The googgle discussion about rendering tree like structure is here.
The different between ng-if ng-switch to ng-show ng-hide is, ng-if will not render the html
if the condition not met rather than render those elements that is hidden but taking up
resources. It is not evident for menus because there are not alot of binding/watches use. But
imagine you have render 5 - 6 tabs with lots of form data.
I'd like to implement a result list with multiple types of display (line, grid, detailed or not, etc, ...)
What is the best approach to do this?
I was thinking of using ng-show but I'm wondering about performances, do hidden elements are processed in a way or is it ok to have like 4 or 5 types of layout and display one at a time using ng-show?
You can use ng-switch instead. The difference is that it only renders elements that meet the condition. But then again, if you pre-load them initially and just show/hide, the switches between them will be fast while the initial load will be longer (slightly). While with ng-switch you will have a certain rendering time for each display.
I would say that it's OK to use ng-show unless you have a lot of data. Try it out and see what works better for you.
Even ng-view could be an option.