JQuery-Mobile with AngularJS and Angular-Route (ngRoute)


The following details how JQuery-Mobile and AngularJS can play together seamlessly. Angular-Route (ngRoute) is used for navigation. A simple Angular directive invokes JQuery-Mobile styling and enhancements as each page is loaded. This includes pages loaded via  ng-include

A working example is available here as a Plunker http://plnkr.co/edit/RPbJfWX84XkzWlvPFMvX?p=info

Continue reading “JQuery-Mobile with AngularJS and Angular-Route (ngRoute)”

Spring 4 Web MVC with AngularJS


The project downloadable below is an answer to a question repeated in this blog (Spring 3 MVC – Adding Objects to a List element on the fly at form submit – (Generic method))

“How can I submit nested lists of objects?”

The answer is AJAX and JSON.

A very good approach to this is with AngularJS and Spring as demonstrated here.

When the page loads it makes an AJAX call to the server to fetch the model.

The model is bound on the page using AngularJS.

The controls (buttons and input fields) on the page allow the model to be edited.

The model can then be sent to the server via AJAX where it can be persisted. The updated model is returned to the client where it is again bound using angularJS.

The application looks like this



This is a Maven project so just navigate to it using your IDE, open it and run it.





CORS Stateless REST Service with Facebook Authentication


This blog will demonstrate one way to enable authentication with Facebook on a Stateless CORS enabled REST service.

The CORS REST service will be created using the Ninja Framework.

Facebook authentication is via the Facebook JavaScript API.

RestFB is used to consolidate the authentication with the REST Service.

This blog is follows on from previous blogs:

  1. CORS Cross-Origin-Resource-Sharing is detailed here http://outbottle.com/understanding-cross-origin-resource-sharing-cors-by-example/.
  2. Creating the REST Service and HTML5 Client is detailed here http://outbottle.com/cors-stateless-rest-service-with-detached-html5-client/.

This blog focuses on adding authentication using Facebook to the application.

The HTML5 application and NinjaFramework Maven application are available for download at the bottom of this page.

Continue reading “CORS Stateless REST Service with Facebook Authentication”

Spring 4 Web MVC – JSON Handling


This blog demonstrates how to process JSON using Spring 4 Web MVC.

The JavaScript AJAX call is described in terms of request headers and request data formatting.

Spring uses Jackson for JSON parsing. Jackson is configured to ignore extra JSON properties that do not match properties of the bean being populated at the @Controller request end-point method.

This blog demonstrates populating complex objects n levels deep thus overcoming some difficulties encountered as per many of the comments in this blog.

Unlike Spring 3 MVC – Adding Objects to a List element on the fly at form submit – (Generic method) a generic JavaScript library is not provided. Populating JSON objects is easily achieved with JavaScript. For that reason, the difficulties of the HTML form implementation described (and partially solved) in that blog do not arise in the first place. Therefore it is hugely favorable to use JSON over conventional HTML forms for complex objects (and in general).

This demonstration conforms to a useful and popular design pattern. Specifically, the form is submitted asynchronously, the response is handled by the client JavaScript.

This provides for:

  • A far better user experience as there is no page load. Feedback is immediate.
  • Ease of development
  • Ease of validation handling
  • Support for complex forms
  • Code portability (think HTML5 clients and single page applications)

Continue reading “Spring 4 Web MVC – JSON Handling”

CORS Stateless REST Service with detached HTML5 client


This blog will detail in precise steps how to create a stateless REST service that is consumed by a HTML5 client on another domain. The HTML5 client could easily be a Cordova or Phonegap app.

The HTML5 client is simple and basic just for demonstration purposes. It shows the characteristics necessary for Cross-Origin-Resource-Sharing (CORS) communication.

The REST service is also simple. It demonstrates how to enable CORS on the server application.

While both Client and Server projects are proliferated throughout this blog, the completed artifacts are available for download at the bottom of this page.

Related Posts

Authenticating a REST Service using Facebook authentication http://outbottle.com/cors-stateless-rest-service-with-facebook-authentication/

Adding JSON Web Token (JWT) enhancements to “Authenticating a REST Service using Facebook authentication” http://outbottle.com/json-web-token-jwt-with-cors-stateless-rest-service-with-facebook-authentication/

Continue reading “CORS Stateless REST Service with detached HTML5 client”

Spring 3 Web MVC – Exception Handling – incorporating AJAX

Spring 3 Web MVC Exception Handling with AJAX
Spring 3 Web MVC Exception Handling

This tutorial demonstrates how to handle exceptions in Spring 3 Web MCV.
Emphasis is given to Handling  exceptions that occur during AJAX requests. I.e. in the event of an exception during an AJAX request,  it is not desirable to redirect to an error page, instead JavaScript error handling code should be invoked with relevant information passed in.


A Netbeans project is available for download at the bottom of this page.

Continue reading “Spring 3 Web MVC – Exception Handling – incorporating AJAX”

.NET MVC 3 Custom AJAX Error Handling

Custom Message From AJAX Error Handling with jQuery and MVC 3
Custom Message From AJAX Error Handling with jQuery and MVC 3

An exception on the server-side will invoke the JavaScript AJAX error handling function. This blog will detail two methods to provide custom error handling, overriting the default.

Both methods allow specific error messages to be returned to the client error handling code. This example applies to .NET c# MVC 3 with jQuery and jQuery form plugin. Before quickly scanning this blog for the solution, please note that the second solution detailed below appears to be a better option.
Continue reading “.NET MVC 3 Custom AJAX Error Handling”