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.
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've run into a problem where refreshing an AngularJS page in IE shows the uncompiled AngularJS. I can use ngCloak to hide the uncompiled expressions when loading, but I can't find anything for when the page unloads. I can use ngBind instead of an expression, and then the expressions disappear instead of displaying raw, but I'm hoping for a better solution. Any ideas?
I'm still working on a demo where you can see the issue; I think the iframes used to display results in code snippets and stuff like JSFiddle are preventing me from replicating the problem.
A few tips that may or may not help.
Contrary to common advice, load Angular in head of document. That way when you hit an ng-if during page load, the browser knows what to do with it. If it's in footer ng-if is meaningless until page is loaded and thus elements flash up and then disappear during page load
Use class .ng-cloak as you are doing already.
Use booleans in controller to dictate when to display elements. E.g.
<section ng-if='controller.loading === false'>
you could place some of or your entire markup for a view in such a div to remove elements until they are ready for display
Play with ng-if ng-show and ng-hide, ng-if actually removes elements from the DOM whereas the other two just show or hide. They can produce very different results in terms of smoothness of page loading.
Where you use an expressions on an ng-if, be careful to ensure the expression is very accurate. Don't be sloppy with the expression. Consider what would happen if the var in the expression was undefined. Would your element show when you don't want it to?
Whilst I haven't directly dealt with unloading these same concepts can be applied.
I have a dropdown containing 100+ options in it. Can it be paginated so that when user selects the dropdown it shows only 10 options with pager.Is there any angular plugin to do so.Thanks
I've personally never seen such a widget and i think it's a bit weird to be honest. The user wouldn't expect that behaviour from a dropdown which harm the usability quite a bit.
I would recomment to simply use a normal dropdown instead - if you think of a standard country-dropdown for example (Germany, France, Italy etc.) it holds around 100 entries as well but doesn't do some unexpected behaviour like pagination in it.
The standard select doesn't support this behaviour for sure and i'm not aware of any public widget that does.
So if you really want to do this you will probably have to implement it on your own.
Yes it can, but the pagination should happen a little bit special way. There is a plugin, called ngInfiniteScroll which does the pagination based on where additional content for a web page is appended dynamically to the bottom of the page as the user approaches the end of the content.
You may try to use this, but then you have to have your custom dropdown built. In this way you can achieve a convenient usage of a dropdown without showing 100+ hits on start.
ngInfiniteScroll website: https://sroze.github.io/ngInfiniteScroll/
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?
I have read some articles that said ng-repeat would led to poor performance if there is over 2000 items, because there are too many two way binding to watch. I am new to angularjs and have trouble understanding the relationship between ng-repeat and two-way binding:
Does ng-repeat (like outputting a list of json objects) necessarily create two way binding?
Is there a simple way to do ng-repeat using only one way binding? (preferably do not need external module)
Like user1843640 mentioned, if you are on Angular 1.3, you can use one-time-binding, but, just for clarity, you need to put the :: on all the bindings, not just the repeater. The docs say do this:
<div ng-repeat="item in ::items">{{item.name}}</div>
But, if I count the watchers, this only removed one. To really drop the number of two-way-bindings, place the :: on the bindings within the repeater, like this:
<div ng-repeat="item in ::items">{{::item.name}}</div>
Here are two plunkers that will display the number of watchers:
All Bindings
Repeater Only
Thanks goes out to Miraage for provinding the function to count the watchers https://stackoverflow.com/a/23470578/2200446
For anyone using or upgrading to Angular 1.3 you can now use "one-time binding". For ng-repeat it would look like this:
<div ng-repeat="item in ::items">{{item.name}}</div>
Notice the ::items syntax.
For more information check the Angular documentation for expressions.
This blog post presents some interesting solutions. The end result was:
Upgrade to AngularJS 1.1.5 and use limitTo together with Infinite scrolling. AngularJS ng-repeat offers from version 1.1.4 the limitTo option. I slightly adapted the Infinite Scroll directive to make scrolling within a container possible that does not have height 100% of window.
Basically you limit the number of objects you initially render, then use the Infinite scrolling directive to render more as needed. Since you don't want an external module, just mimic the infinite scroll functionality as needed with your own script.
Note: This should solve your performance problem but it won't remove two-way binding.
what ever is generated by ng-model will be having a watcher on data(model) which reduces the page performance if it crosses 200 watchers.
Refer this for ONE WAY BINDING http://blog.scalyr.com/2013/10/31/angularjs-1200ms-to-35ms/ but make sure you use it properly
Hope it helps!!!