Chariot Training Classes

Training Courses

I run Chariot's training and mentoring services. We provide training in AngularJS, HTML5, Spring, Hibernate, Maven, Scala, and more.

Chariot Education Services


Chariot Emerging Tech

Learn about upcoming technologies and trends from my colleagues at Chariot Solutions.


Chariot Conferences


« Spring Roo 1.2.4.RELEASE available now | Main | Spring Roo project updates... »

AngularJS Pattern #1 - async service results

Spring Quizzo ETE sample code

Hi everyone. If you're looking for examples of potential ways to interact with a Spring app from AngularJS, take a look at the project I worked on with Pivotal's David Turanski for ETE, the Quizzo-ETE application.

It's at Highlights:

Now here's something I ended up using (but not as well as in here) for the quiz. It's a way to send a request to a Angular service asynchronously and receive a result via a message back to the component.

Asynchronous calls to services in Angular

In Angular, everything is asynchronous as much as possible to provide speed. A call to a $http service, which performs ajax methods, doesn't immediately return a value. If you decide to split up your Angular controllers and services, so you separate your UI from the calls to your backends, you'll quickly find that it becomes hard to get a response without some extra work.

One way to orchestrate calls is to use the Angular messaging framework, built into the $scope object. For example, in our controller we can execute a call to fetch games we're able to play right now, but we won't get the response right away. So, we can subscribe to a message, sent by our service, which will then come back to us with data. See this simple JSFiddle for an example:

The service uses a passed $scope variable. I've also injected a $rootScope into the service. Using that one would allow us to broadcast the message to any interested party.

PrintView Printer Friendly Version

EmailEmail Article to Friend

Reader Comments (2)

I'm no expert but the way the messaging is used here smells more like an anti-pattern.

Why? Because you need to look into the code of the service class too see how and what it returns!
Use this feature eg. for decoupled events between controllers...

August 25, 2013 | Unregistered CommenterTom


If it's just a simple process with an async result, you can certainly just implement it inline (like using a $http.get() directly from a controller function and providing the results asynchronously directly to the $scope - instant data binding).

But I was showing the results of a service object - something shared and injected to one or more controllers. And something where a few areas may be interested in the result. If we passed the scope (I am feeling this it the biggest code smell) it would narrow-cast back to the object and below that was formed in that scope or children. If we instead didn't pass a scope to communicate with and send our messages via $rootScope instead, we get an event bus, where maybe more than one thing may be interested in the message.

For my own understanding I need to do more research. Off the top of your head, what do you think would a better alternative approach be that could a) handle it asynchronously and b) be re-used in several controllers? Maybe returning a future object from the service?

Thanks for opening up a discussion on this.


September 20, 2013 | Registered CommenterKen Rimple

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>