Developing app with AngularJS, Spring, Spring Boot, REST, and MyBatis

Developing SPA app with Atom, AngularJS, Spring, SpringBoot, REST, and MyBatis - 1. Setup Environment

Introduction

I believe the SPA(Single Page Application) will be the direction of future software development and this will be my first small project to develop SPA using following major components; AngularJS for the front-end, Spring REST for the back-end, Spring Boot for running environment, and MyBatis for the database persistence layer. I am a big fan of MyBatis because of flexibility, performance, and easy way to implement MVVM framework.
One of main reason to develop this sample is to understand the structure of AngularJS and Spring framework. If you develop applications with STS or Eclipse, these IDEs will do everything for you, but sometimes it is hard to understand what happening behind scene.
If you are not familiar with Spring Boot project, I strongly recommend to read Official SpringBoot Start Document

Reference article

Should You Use Spring Boot in Your Next Project?

Setting up environment

• Atom: Atom Official Site
  

  • Setting up the terminal module to atom to run the command line
    Package: terminal-plus from jeremyramin and shortcut is Ctrl+`
    This program will use PowerShell instead of cmd shell. It is good time to start learning the PowerShell script as well if needed

• Maven
  Install program and add the “bin” folder into PATH environment variable
• Spring Boot
  Download From Section 10.2.1
  After downloading, add the bin location to the PATH.

Loading spring boot from atom using maven

Reference from spring document
Folder Structure

Create pom.xml and main class

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.alex</groupId>
    <artifactId>angularspring</artifactId>
    <version>0.0.1-SNAPSHOT</version>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.3.0.RELEASE</version>
    </parent>
    <!-- Additional lines to be added here... -->

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
    </dependencies>    
</project>

* src/main/java/AngularSpring.java *

import org.springframework.boot.*;
import org.springframework.boot.autoconfigure.*;
import org.springframework.stereotype.*;
import org.springframework.web.bind.annotation.*;

@RestController
@EnableAutoConfiguration
public class AngularSpring {

    @RequestMapping("/")
    String home() {
        return "Welcome to Angular and Spring Testing!";
    }

    public static void main(String[] args) throws Exception {
        SpringApplication.run(AngularSpring.class, args);
    }
}

• Open terminal windows by entering Ctrl+` and run mvn package to create the jar file
  After running this command, target folder will be created and download initial packages from Spring Boot
• To start the application, run mvn spring-boot:run
• Open “http://localhost:8080” and you will see the following messages from the web browser
  Welcome to Angular and Spring Testing!

Running as a packaged application

Method 1(Section 19.3 from Spring reference)
If you use the Spring Boot Maven or Gradle plugins to create an executable jar you can run your application using java -jar. For example:

$ java -jar target/myproject-0.0.1-SNAPSHOT.jar

It is also possible to run a packaged application with remote debugging support enabled. This allows you to attach a debugger to your packaged application:

$ java -Xdebug -Xrunjdwp:server=y,transport=dt_socket,address=8000,suspend=n \
-jar target/myproject-0.0.1-SNAPSHOT.jar

Method 2 (Preferred)
Run mvn spring-boot:run from terminal.

Conclusion

This is really simple setup to have a taste of Spring Boot. I am pretty newbie on the Spring Boot and as I progress this sample, I wish everyone has better understanding the concept of Spring Boot, AngularJS, Spring MVC, and MyBatis.
Next tutorial will be setting up the Unit Testing.

Written with StackEdit.