Spring Boot With AngularJs

Home / Spring Boot With AngularJs

AngularJs has widely used technology nowadays which is introduced by GOOGLE and it is mainly used for single page application. To integrate AngularJs with SpringBoot is very simple we can integrate AngularJs with CDN also but in this, I will show you how to integrate AngularJS using webjars in spring boot. We have to follow some steps to integrate AngularJS with SpringBoot and Steps are:

Steps to follow:

  1. Add AngularJs webJar in your pom.xml file
  2. create a javascript file inside your static folder
  3. link webjar and javascript file in your JSP page
  4. Create a Controller class for display your JSP page

Project Directory Structure:

1- Angular WebJar :

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

2- main.js

var app=angular.module('myapp',[]);
app.controller('myctrl',function($scope){
$scope.firstname="vasu Rajput";
});

3- index.jsp

<html ng-app="myapp">
<body ng-controller="myctrl">
    <h1>Hi You are a Nice Guy {{firstname}}</h1>
    <p>Angular Example 2 way Binding</p>
    <input type="text" ng-model="tyeMe"><br>
    <h4>{{tyeMe}}</h4>
    <script src="webjars/angularjs/1.7.0/angular.js"></script>
    <script src="JS/main.js"></script>
</body>
</html>

4- MyController.java

@Controller
public class MyController {
@GetMapping("/")
public String index() {
return "index";
}
}

Now run your programe you will see output like:

Help Others, Please Share

About Author

Leave a Reply

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

x