Sunday, June 7, 2015

Spring Boot Angular Part 1

In a multi-part series, I will discuss how to build a Spring Boot web application leveraging AngularJS for the front end and using Maven and Grunt for the build process.  I've been using the Spring framework for years and wanted to start learning about Spring Boot.  What I found was that it made it developing java based web applications even easier.  We are going to build a web application using the Apple iTunes API.

We'll first start creating a maven pom file.  Inside the pom.xml file, you'll have inherit from the spring-boot-starter-parent project.  This will include all the core dependencies that you will need.  You will also have to include the spring-boot-maven-plugin.  Lastly, since I plan on building a web project, I'll include the spring-boot-starter-web dependency.  The great thing about Spring Boot is that it handles many of the dependencies and standard configuration for you.


 4.0.0
 com.herzog
 spring-boot-angular
 0.0.1-SNAPSHOT
 war

 
  org.springframework.boot
  spring-boot-starter-parent
  1.1.4.RELEASE
 

 
  
   org.springframework.boot
   spring-boot-starter-web
  
 
 
 
  
   
    org.springframework.boot
    spring-boot-maven-plugin
   
  
 

Spring Boot handles most of the configuration out of the box for you. However, you do need to create a entry point into your application. You'll need to create a class that invokes the run method of the SpringApplication class. I've created an Application class under src/main/java/com/herzog/boot.
package com.herzog.boot;

import org.springframework.boot.autoconfigure.EnableAutoConfiguration;
import org.springframework.boot.SpringApplication;
import org.springframework.context.annotation.ComponentScan;

@ComponentScan
@EnableAutoConfiguration
public class Application {
 
 public static void main(String[] args) {
  SpringApplication.run(Application.class, args);
 }
}
Now we will create a simple HTML file for our web application. We'll create a index.html file under src/main/webapp. Add the following to the body of the html.

Spring Boot

Now it is time to build and run the application. We can build the application by running the following command:

 mvn package

 Lastly, run the application:

 java -jar target/spring-boot-angular-0.0.1-SNAPSHOT.war 

An embedded Jetty server will start up. Open your browser and go to the following address:

http://localhost:8080/

That's it. You can find the existing source code for part 1 at https://bitbucket.org/davidjherzog/spring-boot-angular.  The code is under branch 0.0.1-SNAPSHOT.

In Part 2 of this series, we will add some RESTful services.

No comments:

Post a Comment