I've got some nested directives inside ng-repeats, they consist of directive that got ng-repeat.
It renders very ugly.
I want to show the content when its finished drawing.
Ive tried to use directives events things like scope.$last, or timeouts but the problem is these elements are created but the browser havent rendered them yet. How to deal with that?
no wonder, you ran into the same problem as me, it's caused by AngularJS dirt checking, it's a cost you using it, but there is not official solution to it yet, there is link has a temp solution you can use, please check on http://tech.small-improvements.com/2013/09/10/angularjs-performance-with-large-lists/ hope this helps!
Related
I have an angularjs application and I am trying to improve its perceptual perfomance on load.
One annoying thing is that the page starts off as a blank page and seems to load everything before page slowly fades in.
I would much rather have some html load and let the xhr data subsequently populate as it comes.
Here's a visual of what I mean:
https://youtu.be/b1GxGJ0BUQU
I checked for the term cloak anywhere in the app and I could not find it. I also checked if there were any resolve attributes on the route and found nothing.
Any advice on improving this perceptual performance would be greatly appreciated!
This fade-in has to be coded somewhere, and we cannot help you find it without the code. You need to understand what triggers that fade-in, so that you could remove it to immediately display the page.
If the code is too big to be understood, one option is to stop the code execution as soon as it starts - for instance add a debugger; statement before the rest - and then use your browser developper tools to inspect the HTML: most likely there is a component full size and plain white on top of the rest, which gets removed at some point. Track its id or class names to find where it is dealt with in your code.
Again these are just advices but we cannot really help you understand a code/HTML that we can't see.
Is there an equivalent directive for angular thats similar to collection-repeat for ionic? I'm looking for ways to do infinite scroll without taking too much of the dom. Tried the ngInfiniteScroll and the angular ui/ui-scroll.
Are you looking for directives that handle very large collections with decent performance?
I think what you're looking for is called Virtual Scroll. There are a few libraries that do it. I haven't used any yet, but check out angular-virtual-scroll or angular-vs-repeat.
So, it's hard to build long, infinitely scrollable lists with lots of bindings without compromising performance. There are many ways to overcome that, but I noticed one particular problem I have no idea how to solve.
Basically if you have long ng-repeat with lots of items and whenever you append or change the data - UI blocks horrendously. The more data you update - longer the freeze.
you can see it on that jsBin - everytime you click the button UI freezes
Is there a way around that?
upd: I thought maybe I should try React and studied this popular post about using React with Angular - seems React won't solve this problem, see this plunker
I'm new to angular and been following the basic tutorials from their official site but I haven't see any tutorial about animating specifically view transition animations. What I want for example is for my current view to pan to the right to show the next view and hitting the back button pans to the left to reveal the previous view.
Does angular.js supports this out of the box? If it does, what is the proper or recommended way of doing it? Thanks a lot.
Angular 1.1.4, released just last night (4/3/2013) supports CSS animation. Though the documentation and examples are still a little scarce, you'll find a good introduction in this video presentation.
Angular doesn't provide animations (or much DOM manipulation at all, really) - those would have to be provided by a 3rd party (probably JQuery).
Since you're new to Angular I'd try to write the animations in a non-angular app, get them working, and then read up on Directives to integrate your work into your Angular app.
Full Tutorials here: http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html
Things has changed a little bit since 1.1.4
I am having some issues with JQuery and CakePHP. I wanted to know if JQuery will work the same way if I have 2 files that call the following function:
$(document).ready(function() {
I have a Featured Content Slider that uses JQuery to Switch contents in a slider, but when I try to create another JQuery file, it does not work. Not even a simple alert.
Is that what is happening or is it something totally different, that perhaps I am overlooking?
Based on the fact that the Slider works, I have to believe I am including the JQuery file correctly. What am I doing wrong?
Thanks,
Yes, that is fine. jQuery will fire all the ready() functions at the same time with no issue. The issue you is in how you're including it not the number of functions.
post some cakephp code and i'll see if I can help