I am relatively new to AngularJS.
A current usecase I am working on involves running a function every N seconds, as long as the user has the browser window open. This background service must not in itself interfere with the rest of the app.
What is the preferred way to do this in AngularJS?
Use $interval as mentioned by #dustyrockpyle.
Note that using a regular setInterval with AngularJS is usually not a good idea, as Angular won't automatically notice any changes made.
Related
I need to keep the state of a component A in cache, so that when I navigate from A to B or C and I come back to A it does not get re-render again (it also includes a API call in its constructor, so it's kind of slow). I will like to keep this initial state through out the whole session of the user.
In Vuejs https://jsfiddle.net/shidianxia/ckj7xbqq/ they have a very simple way to do this using this syntax:
<keep-alive :include="include">
<router-view></router-view>
</keep-alive>
I will like to have something similar for AngularJS, notice I say JS so old angular. I have an hybrid application using modern angular but keeping old angularjs router.
I appreciate your help, thank you.
According you your comment I think it would make sense to build it in 2 parts.
Part 1: Keeping the state in a service
By keeping the state in a service you would limit the request send to the server and thus saving time.
Part 2 Using $templateCache
By using angularjs template cache service you should keep the time for rendering the view with your data to a minimum. You can find infos on how to use that in their docs https://docs.angularjs.org/api/ng/service/$templateCache
If you in the end still have this flicker while rendering you should use ngCloak to prevent showing the uncompiled view (https://docs.angularjs.org/api/ng/directive/ngCloak)
I believe that it's a good practice to inform users that an Angular-based application is loading. I mean, in case of Angular 2, it's e.g. <view>Loading...</view>. I am sure that there is a way to do the same in AngularJS (v1) as well. Thus I believe that there should be a way to use Protractor to test such aspect of the application since it is "an end-to-end test framework for AngularJS applications".
It was suggested to me that there is a way to do that and that I should ask here. So, can you please help me to find the approach which had Nick on his mind? It does no necessarily has to be compatible with Angular 2 already. AngularJS (v1) approach would be enough since I believe that it will be ported once they port Protractor.
This question seems to be similar to Protractor: test loading state but unlike OP I want to make sure that the Angular application is not loaded before the test finishes so I guess that there should be a way to suspend/stop loading of the application (but I may be wrong).
I typically avoid testing things like this because they tend to be very flakey. Unless there's some requirement to test the loader I would not do so.
You can use browser.ignoreSynchronization = true to not wait for angular to load on the page, and then assert that your loader is there.
The only issue with this is that you will struggle with ensuring that angular has not loaded. There's no great way of preventing your angular application from bootstrapping unless you manually bootstrap and build in some sort of delay or "no-bootstrap" trigger but that starts compromising your application just to test a loading state.
Just to add to #Nick's point, you would definitely need to turn the synchronization between protractor and angular off and set browser.ignoreSynchronization = true;.
Then, you can/should add an explicit wait to wait for the loading indicator (for instance, it may be a spinner image) to become visible:
var EC = protractor.ExpectedConditions;
browser.wait(EC.visibilityOf(element(by.id("#loading"))), 5000, "Loading indicator has not become visible");
A timeout error would mean that the loading element (in this case the element with id="loading") has not become visible in 5 seconds.
Don't forget to turn the sync back on after the test is completed:
browser.ignoreSynchronization = false;
I want to ask one question, suppose my web page is like a text editor, I have some boxes where user can write.
Suppose i want to implement autosave in angular . I have some ng-models for the info inside those boxes, and now i use ng-watch to listen to all of my boxes models.
So ,In a normal user mode ng-watch is continuously getting that my models are changing.
Will this method produce low performance in my web app?
If it did,Would you recommend me a way to implement an autosave on angular.
-----------EDIT---------
in brief : what i want to know is, if used $watch for multiples scopes who are continuously changing can affect to the web page performance
Maybe you can only bind the text to the model via ng-model and make a timer with some interval you want. That timer would then post the status to the backend.
About the performance, ng-watch will, as you said fire very often. You'll probably want traffic to the backend every keystroke.
Hope it helps! Ask for more info if you want :)
EDIT:
If you want live updates, you should look at something like socket.io.
EDIT 2:
I would not either fear for the performance, but for simplicity. I've used ng-watch a few times, and everything becomes harder to debug.
Cheers!
Well, instead of $watch'ing the models, you may opt for "ng-change" OR ng-blur instead.
If you use ng-change, then you may also set a timer, that will only re-evaluate your model once user stops typing for a second.
ng-blur triggers only once, after user is done typing and blurs/unfocuses the input.
Note: If you dont want to send autosave requests to the backend too often, you may autosave in client side ( using localStorage ), which would be instant. Then, you can send that final saved info to your sever once user is done with editing and submits a form/is ready to continue.
I am using selenium to automate ExtJs(Ver 3) web application. My main challenge is, Wait for page(Elements) to be rendered. is there any build in function with Extjs or any javascript functions to verify the page is completely rendered. Currently i am managing with thread.sleep. But it sucks lots of execution time. I need a dynamic wait handler. Can any one help me
Using javascript we can make it. Here are two methods:
one is : document.readyState
another one is : document.body.readyState
I am working in selenium to test the ExtJs application. My problem is, I need to ensure the page is completely rendered. I cant use selenium.waitForPageLoad. In normal Ajax application i can use "Ajax.activeRequestCount", which will give the Ajax call count. If it is '0' We can ensure the page is completly loaded. Is there any similar function available in ExtJs? Can any one pls help me on this
There is no such method in ExtJs. You can however create handlers for global Ext.Ajax events beforerequest and requestcomplete http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Ajax-event-beforerequest and count active connections yourself.
Or, if the Selenium tests are to be run in modern browsers, you could try Progress Listeners (with these).
For Firefox, you could create a simple addon that would wait for async requests to complete, and ship that addon with your Selenium tests.