Web Workers with AngularJS

April 22, 2017 by Chris Sherman

Web Workers provide a means for processing data in background threads. Processing that occurs off the main thread is useful because JavaScript code executes in turns on a single thread. In the context of a web browser, while a turn is executing, no other processing occurs, and, if a turn runs long enough, the browser’s interface will be perceptibly frozen.

Continue reading

AngularUI Router Dependent Resolves

April 14, 2017 by Chris Sherman

The resolve property of UI Router’s state definition delays changing state until data is loaded. This allows us to avoid entering states for which we don’t have necessary data, as well as prevents views from rendering in an unpredictable fashion when asynchronous requests finish at different times.

Continue reading

Cancel AngularJS $http Requests

April 13, 2017 by Chris Sherman

Requests made with the AngularJS $http service execute asynchronously. In certain situations, we may want to avoid executing the request’s success callback function and effectively cancel the request.

In the $http service docs, you’ll find a timeout configuration property. According to the docs, this property represents a “timeout in milliseconds, or promise that should abort the request when resolved.”

Continue reading

AngularJS AJAX Validation

December 6, 2016 by Chris Sherman

Sometimes client-side validation needs information from a datastore to determine whether input is valid. For instance, you may want to check if a username is already taken. To do this in an Angular application, we can use a custom directive along with the $http service to validate user input on the fly.

To get started, create a directive, naming it something that will allow you to easily identify its use in HTML markup. We’ll wrap the directive in an immediately-invoked function expression (IIFE) to make sure we don’t accidentally leak any variables into the global scope.

Continue reading

CSRF Protection with AngularJS and Spring

May 18, 2016 by Chris Sherman

Spring Framework, and other web application frameworks like it, comes with Cross-Site Request Forgery (CSRF) protection built-in and enabled by default. However, many tutorials assume that you will be performing a full post-back for each request, thereby allowing the CSRF token to be included in a hidden metadata attribute on the view.

Continue reading

Bootstrap Modal with AngularJS

September 22, 2015 by Chris Sherman

To use demonstrate using the Bootstrap frameworks’s modal component within an AngularJS project, we’ll create a custom directive for editing text properties throughout an application. This example makes use the modal.js file that is part of the core Bootstrap framework.

In the directive below, you’ll notice we restrict the directive to being instantiated as an attribute only. This provides us with a nice hook on the element upon which the attribute appears. We take advantage of this hook within the link property at the bottom of the directive. Access to the element enables us to add a dismiss function to the directive’s scope, which hides the modal.

Continue reading