Spring Boot as a backend for AngularJS

April 15, 2014 by Michael

This is the fourth Post in my series Developing a web application with Spring Boot, AngularJS and Java 8.

I’m more a backend and database guy than a frontend developer, but i know how to write valid HTML and add some unobtrusive JavaScript to it, for example in my daily photo project. Daily Fratze is an “old-school” website for visitors and a more interactive site for users.

For my Biking Project and this series of blog posts i wanted to try out something new (for me) and i picked AngularJS to create a single page web application.

Most of the things i’ve done in AngularJS are pretty standard (i guess), but have a look at the sources yourself: bikings js.

Therefor i want to highlight just a few things that made Spring Boot play nicely with AngularJS:

“Routes”

I wanted biking.michael-simons.eu as well as biking.michael-simons.eu/about too work when entered in the address bar or followed through a link. To achieve this, i’m using AngularJS in HTML5 mode. Really, for this project i couldn’t care less about browser which don’t support this:

The whole html “application” lives in webapp/public/index.html which is served as a static resource by Spring Boot without any further server interaction.

To create “routes” for all URLs in app.js, i’ve created a super simple @Controller:

This forwards all mapped urls to the static resource without any further view resolving. Nice!

WebJars

Spring Boot has excellent support for WebJars and automatically creates resolvers for them. Using web jars i can manage all dependencies for AngularJS and co. with Maven (yeah, i’m still using maven… 😉 ):

and for example

And in index.html

Those placeholders work because i’ve enabled resource filtering in maven for selected resources in webapp. I know that there are a lot of JavaScript dependency managers out there, but this solution works very well for me. An option is to add wro4j to the mix.

Authentication

I’m using plain old http basic auth. Yes, i do know that the password is transmitted in plain text but for this app and this purpose, i just don’t care. For your interest, here’s the Spring Security configuration for stateless http basic auth:

I’ve got to disable csrf protection because i don’t want to handle that in AngularJS and also, i’ve disable frame headers because the application acts as an oembed provider with frames.

I didn’t protect the whole app, but only backend methods with write access through annotations which is enabled via @EnableGlobalMethodSecurity and looks like:

Using @RestController from AngularJS

The above quoted method can easily be used from AngularJS:

“$scope.bike” is a JSON object representing an instance NewBikeCmd. AngularJS maps this correctly as a @RequestBody, the thing is validated and everything else. Really nice.

Fancy things created with AngularJS

I’m not using AngularJS not long enough to rate this, but i really like the automatically refreshing about page which is created using through highcharts-ng and the nice OpenLayers integration for the tracks, written by myself: track-map-ng (OpenLayers), see an example here: Aachen – Domburg.

Summary

Rewriting this existing application from scratch (apart from the database model, that was fine), was real fun. Not only i could test and enjoy many new Java 8 features, but starting fresh, using well designed frameworks like Spring, Spring Boot and Spring Data JPA fixed many things for me i used to do wrong, sometimes because of some cargo cult i hand in mind, sometimes because i just didn’t get them right from the start.

Spring Boot together with Spring Data JPA are an excellent choice for me to write lightweight backends for JavaScript applications without loosing any functionality.

Look at some other projects of mine, i have no doubt that Boot is also a good choice for writing bigger applications, maybe with a more classical frontend, either JSP or Thymeleaf based.

Also: Java is not dead yet, in 2014 more far from than ever.

Thanks for reading so far.

8 comments

  1. charles wrote:

    I’m also beginning to use angularjs + spring boot,just started for a small demo app,not a big deal but inteteresting,enjoying the two framework both.

    Posted on December 18, 2014 at 5:34 AM | Permalink
  2. robert.ma wrote:

    Your way of making angularjs routes to work with spring mvc is really nice. Thanks!

    Posted on June 9, 2015 at 5:48 AM | Permalink
  3. Michael wrote:

    Thanks, Robert.

    Posted on June 9, 2015 at 8:01 AM | Permalink
  4. Please make sure to also check out this tutorial for an interesting take on API gateway and security concepts with spring backends

    http://spring.io/guides/tutori.....ngular-js/

    Posted on July 9, 2015 at 9:01 AM | Permalink
  5. Michael wrote:

    Thanks, Pieter.

    I highly appreciate Spring Security in my projects, but didn’t have the time to do more than Basic Auth with AngularJS, bit i’ll see to it.

    Have a great day and thanks for stopping by!

    Posted on July 9, 2015 at 10:21 PM | Permalink
  6. zaier wrote:

    Your way of making angularjs routes to work with spring mvc is really nice. Thanks!
    You saved me !

    Posted on December 4, 2015 at 12:58 PM | Permalink
  7. Michael wrote:

    Hi Zaier,
    thanks for your feedback! I’m happy, you like it!

    Posted on December 5, 2015 at 7:39 PM | Permalink
  8. ocanbay wrote:

    Thanks, that was what I am looking for. Works also great with Angular2.

    Posted on October 9, 2016 at 3:24 AM | Permalink
Post a Comment

Your email is never published nor shared. Required fields are marked *