spring angularjs routing complete example

In this article, we learn about spring angularjs integration and how to configure Angular JS routing with spring boot.

As we all know that we use angular js for creating single page application. Routing is the main feature of angular js to create a single page application.

It is very easy to integrate angular js with the spring boot application. And we can use either CDN or Maven dependency to create an angular application.

If you want to learn the integration of angular js with the spring boot application using Maven dependency you can check out this post.

What is Angular Js Routing?

Table of Contents

As already told you that using angular js we can create the single page application. And routing allows displaying different page content on a single page.

Suppose when my application runs it will display the content of the index.jsp file. So this is my main page and I want to display diff page content on this page only because we are creating a single page application.

Integrate Angular Js with Spring boot application.

To integrate angular js with spring boot we have to follow the below steps:

Create a spring boot web project with starter web dependency.
Create a WEB-INF folder inside webapp folder. And after that create jsp folder inside the WEB-INF folder.
Create JSP files inside the WEB-INF/jsp folder.
Now create a JS folder for the routing.js file inside the static folder.

Till now we have created our Project and create JSP inside our WEB-INF/jsp folder. Now add view prefix and suffix for displaying JSP files in your application. properties file.

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

Now open index.jsp file because when we run our application this file content display. Because we map this file to (“/”) endpoint in our controller class.

We add the angular and angular CDN on this page and also add our routing.js file reference in this file that we create inside the static/JS folder.

index.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Spring Angular Routing Example</title>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
 <script src="JS/routing.js"></script>

</head>
<body ng-app="myRoutingApp">
<center><h2>This is a Index Page</h2></center>
<hr>
<ul>
  <li><a href="#!home">HOME</a></li>
  <li><a href="#!contact">CONTACT US</a></li>
  <li><a href="#!signup">SIGN UP</a></li>
</ul>

<hr>
<center><div ng-view></div></center>
</body>
</html>

Note: Make sure your href tag value is the same as that you give for when tag in your routing.js file.

routing.js

var app = angular.module("myRoutingApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
  .when("/home", {
    templateUrl : "homeEndPoint"
  })
  .when("/contact", {
    templateUrl : "contactUsEndPoint"
  })
  .when("/signup", {
    templateUrl : "signUpEndPoint"
  })
  .otherwise({
	  templateUrl : "defaultEndPoint"
	  });
});

Note: Make Sure your template Url value is the same as that you define in your controller class endPoint.

MyController.java

package com.vasu.controller;

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

@Controller
public class MyController {

	
	@GetMapping("/")
	public String index() {
		return "index";
	}
	
	@GetMapping("/signUpEndPoint")
	public String signUp() {
		return "signup";
	}
	
	@GetMapping("/homeEndPoint")
	public String home() {
		return "home";
	}
	
	@GetMapping("/defaultEndPoint")
	public String defaultRoute() {
		return "default";
	}
	
	@GetMapping("/contactUsEndPoint")
	public String contact() {
		return "contact";
	}
}

Now if you see we use <div ng-view></div> in our index.jsp file this is the place where our routing performs. This means all pages according to routing will display inside this tag.

Now run your application and see output. While after running application our default.jsp page content will display inside <div ng-view></div> tag.

Note: We see by default default.jsp content because we use .otherwise tag inside our routing.jsp file. And no routing is found for “/” so .otherwise template will display.

Download Complete code from Github

JavaDream

Spring Boot With Angular JS Routing