AngularJS, code.explode, Coding

Hailing All Frequencies – Communicating in AngularJS with the Pub/Sub Design Pattern

Hailing All Frequencies! Is anybody out there? This is the USS AngularJS, we have a problem our services are speaking in Klingon and our controllers can’t communicate with their Ferengi directives. Can anyone help us!

I don’t know how many times I’ve seen a question about what is the best way to communicate between components in AngularJS. A lot of the time the resulting answer is to use the $rootScope object to $broadcast a message to anyone who might be listening for it. But, that really isn’t the best way to do it. Broadcasting messages between components means that they need to know too much about how things are coded reducing their modularity and re-use.

In this article I show you how to use the Pub/Sub Design Pattern for inter-component communications in AngularJS.

Continue reading

Standard
AngularJS, code.explode, Coding

Localizing Your AngularJS Apps: Yet Another Update

So you are probably really jazzed about the addition of the new directive to the angularjs-localizationservice project and the fixes to help improve it’s performance. But, now that you are probably using the project I bet you are probably saying the same thing my devs and designers were saying, “Hey Jim, this new directive really works great, but how do we do translations for placeholders and titles?”

Well, this post is going to cover a new directive that’s been added to the project just to handle such things.

Continue reading

Standard
AngularJS, code.explode, Coding

Localizing Your AngularJS Apps: Update

In my previous article on Localization, Localizing Your AngularJS App, I provided a simple service and filter that allows you to provide language translations based on a translation file. Initially this worked for about 50% of our transalation needs, however once we started looking at the overall performance of our AngualrJS App it was apparent that I needed to tweak things a bit.

Continue reading

Standard
AngularJS, code.explode, Coding

Using Response Interceptors to Show and Hide a Loading Widget: Redux

In my previous post Using Response Interceptors to Show and Hide a Loading Widget I showed how to display a loading widget whenever an Ajax request started and hide it when all the requests completed by using a $http resource interceptor.

Unfortunately, I violated one of the core tenets of AngularJS’ best practices by modifying the DOM outside of a directive. I want to thank everyone who brought that to my attention and provided examples on how to clean up the code.

This post will walk through the revised code to show how to do it properly. I will also provide a second solution, that I think is even better structured, that uses a Publish/Subscribe pattern to encapsulate the whole messaging solution and keep the publishers and subscribers from having to know anything about the notification mechanism.

Continue reading

Standard
AngularJS, code.explode

Using Response Interceptors to Show and Hide a Loading Widget

AngularJS provides extension points which allow you to intercept responses to http requests before they are handed over to the application code. You can use these extension points to provide global exception handling, authentication, or any other type of pre-processing you might need in your app. In this article I’m going to show you how you can use a response interceptor to turn a loading widget on and off as your http requests are made and completed.

Continue reading

Standard
AngularJS, code.explode, Coding

Mocking Promises in Unit Tests

If you’ve spent some time writing services in AngularJS that front-end Web APIs, you have probably used the $http service. One of the prevalent code patterns that tends to develop involves calling the .then() method on the promise that is returned from the various $http methods. This in effect waits to execute code until the asynchronous request returns and the promise is resolved.

The more complicated the Web API you are interacting with, the more your controller code tends to end up with several bits of code as shown below:

    user.requestCurrentUser().then(function() {
        $scope.currentUser = user.getCurrentUser();
    });

Testing this code can be a bit problemsome for newcomers to AngularJS. This article shows a simple way to mock your services to provide similar functionality so you can unit test your controllers that contain these type of code patterns.

Continue reading

Standard