About Ima Miri

Ima is a Senior Software Developer in enterprise application design and development. She is experienced in high traffic websites for e-commerce, media and financial services. She is interested in new technologies and innovation area along with technical writing. Her main focus is on web architecture, web technologies, java/j2ee, Open source and mobile development for android.

Spring Boot and AngularJS Integration Tutorial

This tutorial helps you to build a simple spring boot application. Also, you might like to implement a simple UI such as an administrator tool or control panel to work with the backend. This is when I start learning about Angularjs to develop a simple UI for a monitoring project at work. I’ve found Spring boot and Angularjs very easy to work with, especially when there is a tight deadline for the project. Let’s see what are these frameworks and how we can integrate them.

1. Why Spring Boot?

Spring Boot makes it easy to create stand-alone, production-grade Spring based Applications. Most Spring Boot applications need very little Spring configuration. Spring Boot provides an easy way to quickly and simply run a java application, through an embedded server – by default it uses an embedded version of tomcat – thus eliminating the need of any Java EE containers. With Spring Boot, we can expose components such as REST services independently, exactly as proposed in microservices architecture, so that in any maintenance of the components, we no longer make the redeploy of all the system.

In this ebook, we provide a compilation of AngularJS based examples that will help you kick-start your own web projects. We cover a wide range of topics, from Single Page Apps and Routing, to Data Binding and JSON Fetching. With our straightforward tutorials, you will be able to get your own projects up and running in minimum time. Download the cookbook by joining the Web Code Geeks Newsletter.

2. Why Angularjs?

AngularJS is a JavaScript framework. It is a library written in JavaScript. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. Angular’s data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.

3. Create a Spring Boot Application

Now, let’s create a spring boot application and go through more details. The following application is created in IntellijIDEA 15 CE. The project is developed based on JDK 1.8 and uses maven 4.

First of all, create a Maven project in your IDEA and configure the pom.xml file to include all required dependencies in the project. In this tutorial, we use spring-boot-1.3.3-RELEASE to configure the spring boot application. Also, we use webjars libraries to include all necessary js files for Angularjs.

WebJars is simply taking the concept of a JAR and applying it to client-side libraries or resources. For example, the Angularjs library may be packaged as a JAR and made available to your Spring Boot application. Many WebJars are available through Maven Central with a GroupID for org.webjars. A complete list is available at webjars.org.

JavaScript package management is not a new concept. In fact, npm and bower are two of the more popular tools, and currently offer solutions to managing JavaScript dependencies. Spring’s Understanding JavaScript Package Managers guide has more information on these. Most JavaScript developers are likely familiar with npm and bower and make use of those in their projects. However, WebJars utilizes Maven’s dependency management model to include JavaScript libraries in a project, making it more accessible to Java developers.

4. Spring boot application configuration

The SpringApplication class provides a convenient way to bootstrap a Spring boot application that will be started from a main() method. In many situations you can just delegate to the static SpringApplication.run method similar to the following class:

@Configuration tags the class as a source of bean definitions for the application context.@EnableAutoConfiguration tells Spring Boot to start adding beans based on classpath settings, other beans and various property settings.

@ComponentScan tells Spring to look for other components, configurations and services in the specified package which allows the application to find the MainController.

By default Spring Boot will serve static content from a directory called /static (or /public or /resources or /META-INF/resources) in the classpath or from the root of the ServletContext. Here, the static content is under the /resources directory.

5. A simple Controller

The following class is only a simple controller which is implemented to handle the request to '/' and render the request to index.html.

ng-view is a directive that complements the $route service by including the rendered template of the current route into the main layout. Every time the current route changes, the included view changes with it according to the configuration of the $routeProvider.

app.js file defines the application module configuration and routes. To handle a request to e.g. '/', it needs an Angularjs module, called ngRoute. To use ngRoute and inject it into our application. We use angular.module to add the ngRoute module to our app as shown below.

Then, in the app.config, each route is mapped to a template and controller. Controller.js contains the implementation of controllers. The controller is simply a constructor function that takes a $scope parameter. You might notice that we are injecting the $scope service into our controller. Actually, AngularJS comes with a dependency injection container built into it.

Here, a headingtitle is set in scope to display in the view, either gallery or contactInfo.

The concept of a $scope in Angular is crucial. A $scope can be seen as the glue which allows the template, model and controller to work together. Angular uses scopes, along with the information contained in the template, data model, and controller, to keep models and views separate, but in sync. Any changes made to the model are reflected in the view; any changes that occur in the view are reflected in the model.

Newsletter

Join them now to gain exclusive access to the latest news in the Java world, as well as insights about Android, Scala, Groovy and other related technologies.

Email address:

Receive Java & Developer job alerts in your Area

Leave this field empty if you're human:

Join Us

With 1,240,600 monthly unique visitors and over 500 authors we are placed among the top Java related sites around. Constantly being on the lookout for partners; we encourage you to join us. So If you have a blog with unique and interesting content then you should check out our JCG partners program. You can also be a guest writer for Java Code Geeks and hone your writing skills!

Disclaimer

All trademarks and registered trademarks appearing on Java Code Geeks are the property of their respective owners. Java is a trademark or registered trademark of Oracle Corporation in the United States and other countries. Examples Java Code Geeks is not connected to Oracle Corporation and is not sponsored by Oracle Corporation.