Spring Boot With Angular JS

Home / Spring Boot With Angular JS

As we know Angular is a structural framework for web-apps. And it is used to perform operation on front end like parsing Json data and display in well format with help of HTML or Bootstrap Component , make http Calls to external API etc. To create a project with Angular JS you should know how to create a spring boot application with JSP for this follow my post ( Click Me ) . In this post we see how to integrate Angular JS in our Spring boot application. There are two ways you can use Angular JS in your application.

  1. Using Angular CDN in your web page
  2. Using Angular webjar in your pom.xml file

In this we will see how to integrate Angular JS with Spring boot using Angular webjar dependency. There are some steps that you have to follow to integrate Angular with Spring boot.

  1. Create a Spring Boot Project.
  2. Add Angular dependency in your pom.xml file.
  3. Create a JSP File ( In this example we create index.jsp ).
  4. Add Jsp Prefix in application,properties file.
  5. Create a Angular Controller and use it in your index.jsp file.
  6. Create a Controller class to provide end point to access your jsp Page.

Project Directory:

Angular Js with Spring boot

Now Follow above steps and create a Spring boot web porject.

2- Add below dependency in your pom.xml file.

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

<dependency>
   <groupId>org.webjars</groupId>
   <artifactId>bootstrap</artifactId>
   <version>4.1.1</version>
</dependency>

<dependency>
   <groupId>org.webjars</groupId>
   <artifactId>angularjs</artifactId>
   <version>1.7.0</version>
</dependency>

<dependency>
  <groupId>org.webjars</groupId>
  <artifactId>jquery</artifactId>
   <version>3.3.1</version>
</dependency>

3- Create a JSP File

<%-- 
    Document   : index
    Created on : 21 Aug, 2018, 2:54:40 PM
    Author     : Vasu Rajput
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html ng-app="myapp">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <link href="webjars/bootstrap/4.1.1/css/bootstrap.min.css"
              rel="stylesheet">
        <script src="webjars/angularjs/1.7.0/angular.min.js"></script>
        <script src="js/mycontroller.js"></script>
    </head>
    <body ng-controller="myctrl">

        <h1><center>Spring Boot With Angular Js</center></h1>
        <div class="jumbotron">
            <center><u>{{ title }}</u></center>
            <div class="col-md-6">
                Name <input type="text" class="foem-control" ng-model="myAngularModel">
                </br>
                Output: {{myAngularModel}}
            </div>
        </div>


        <script src="webjars/jquery/3.3.1/jquery.min.js"></script>
        <script src="webjars/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    </body>
</html>

If you see this index.jsp file look inside head tag we have given the path of our bootstrap, JS and Angular jar to access there feature. And also look that we have also add mycontroller.js file where we define our Angular JS controller. And in this Index.jsp file if you see html starting tag then we have added a ng-app tag that we use in Js file inside body starting tag we use ng-controller tag where we define our controller name.

4- Add Jsp Prefix in application,properties file.

spring.mvc.view.prefix=/WEB-INF/jsp/
spring.mvc.view.suffix=.jsp

5- Create a Angular Controller and use it in your index.jsp file.

var app = angular.module('myapp', []);
app.controller('myctrl', function ($scope) {
    $scope.title = "Angular Two Way Binding Example";
});

If you have basic knowledge about Angular Js then you will know that we just define a simple Angular Controller in this file. Here look at module name that is myapp it is the same name that we define in html starting tag. And look at controller name myctrl that we define in body starting tag in our index.jsp file.

6- Create a Controller class to provide end point to access your jsp Page.

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
package com.vasu.SpringWithAngularJs.Controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.servlet.ModelAndView;

/**
 *
 * @author Vasu Rajput
 */
@Controller
public class DemoController {

    @GetMapping("/")
    public ModelAndView myFirstModel() {
        ModelAndView model = new ModelAndView("index");
        return model;
    }
}

In above file we simply define a controller ( / ) endPoint that return our index file.

Now Steps are over and you have successfully created a Spring boot Application with Angular JS. Now if you run your application you will get the output like .

Angular Js with Spring boot

Github URL – https://github.com/vasurajput/Spring-Boot-Web

Help Others, Please Share

About Author

Leave a Reply

Your email address will not be published. Required fields are marked *