Why is my UI updated only once? - angularjs

I have done a simple SPA with AngularJS/signalR that send a notification to my hub Hello when the app starts.
On the client side I have list of notifications managed by a controller. This list got updated only once whereas I have been able to see that my callback is called every time thanks to the console.log (and the debugger shows that this.messages grows at every notification received).
I don't get why the UI only update on first call (which the one the current client have emittted)
Here is the code that work only once.
NotificationCtrl.prototype.hello = function() {
console.log("hello");
this.messages.push(new Notification("Tom", "Now", "Is now connected"));
}

You need to $scope.$apply because the callback is not scope aware since its not called from angular.
I think you would benefit alot from my library called SignalR.EventAggregatorProxy
Its designed around the Event aggregation pattern and is perfect for MV* enabled sites with Knockout or Angular.
Have a look at the wiki for setting it up
https://github.com/AndersMalmgren/SignalR.EventAggregatorProxy/wiki
Demo project
https://github.com/AndersMalmgren/SignalR.EventAggregatorProxy/tree/master/SignalR.EventAggregatorProxy.Demo.MVC4
Recent blog post I did about it
http://andersmalmgren.com/2014/05/27/client-server-event-aggregation-with-signalr/
Install using nuget
Install-Package SignalR.EventAggregatorProxy

Related

AngularFire: Saves Once, Stops Saving

I'm using AngularFire in my Ionic/Angular web app.
I'm using the $firebaseObject.$bindTo() method to bind to one of my objects and setup 3-way binding.
Whenever I modify the $firebaseObject the FIRST time, that change is synced to the Firebase database. However, any subsequent modifications to any of the properties in my $firebaseObject will not be updated in the Firebase database. The view will still update correctly, but nothing is pushed to Firebase.
I've tried calling $save() manually, but it doesn't do anything.
I tried unbinding and rebinding after each change, and that doesn't do anything either.
The code isn't really setup to show a simple example here, but does anyone have any debugging tips or clues as to what might be causing this?
Maybe you use it in a wrong way.
I have just tested this code and 3-way binding works fine.
var obj = $firebaseObject(rootRef.child('pathToChildRef'));
obj.$bindTo($scope, 'myVariable');
Checkout the following link for more info.
https://github.com/firebase/angularfire/blob/master/docs/reference.md#bindtoscope-varname

Coded UI tests on IE does not behave similar to the manual test

I am running a coded UI test, using the Page Object Pattern, not based on recording. The test is on a web app that uses AngularJS. When I run the test using automation the behavior of some pages is different from the manual testing. For example, some filters are based on date pickers. When I change the date range manually, the angular model is refreshed and the new data is rendered in IE. However, when I do that through automation, no data is refreshed although on developer tools, I can see that the request is sent and data received successfully. I made sure that both the manual IE and the automation one are adjusted to the same document mode, 10. I am running my tests using VS2012/Win8.1 and VS2013/Windows 7 with all updates.
I appreciate your help,
Ahmed
I am not sure about AngularJS but it seems like there's and issue with XMLHttpRequest object which is used by Coded UI for tracking
Same issue was there with JQuery where Coded UI is not able to get Ajax success message to refresh the data. You can try below solution in my case it worked like charm.
Jquery AJAX success not getting triggered with Coded UI test project

AngularJS - run task in background repeatedly

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.

Online Resources for Google Analytics Event Tracking for Backbone Application

I was trying to find some resources online for using Google Analytics' event tracking functionality in a Backbone application, and the only one that I was able to find was a blog post from airbnb, which uses CoffeeScript. Does anyone know of any resources for a regular javascript Backbone app? I have not used the event tracking functionality before, so basic resources are appreciated ...
Thank you!
You can just push events into the queue whenever is appropriate.
So, for example, we have a single paged app, for which we want to track page views, although we're never reloading the page.
To achieve this goal, we attach on all of our router events a listener which pushes each new page view into the _gaq stack. (This is greatly simplified.)
router.on("route", function(page) {
_gaq.push(['_trackPageview', page]);
});
This will push the page argument into the Google Analytics tracking stack. Just make sure that you've set up Google Analytics prior to this call.
For events, for example, we sometimes want to track a button being pushed. Therefore, we just make a _trackEvent push into the queue with the object containing the details of what we're pushing.
Instead of putting a ton of _gaq.push code on your page, I would recommend you to make a function available throughout your app that abstracts this functionality, such as:
var track = function(event, payload){
_gaq.push[event, payload];
};
This will isolate you from changes to the Analytics API, as well as allow you to add other reporting locations to your tracking events easily.

Get the ExtJS Active Ajax call count

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.

Resources