Build Your REST API with Spring - VIDEO Courses
This tutorial illustrates how to use or integrate the Spring MVC and AngularJS together. AngularJS is popular JS framework for building the single page web applications. Also most of the mobile applications and rich user interfaces are using the AngularJS framework. Here we will show how to use this framework in the view layer and access the Spring MVC controller to display the data. AngularJS framework is created and maintained by Google.
If you have any queries, please write it in the comments section or post it in our facebook page.
In this Spring MVC and AngularJS example, data returned from server is in the type of JSON, that will be assigned to the AngularJS object and will display to the user. Lets look at the example.
also read:
1. Spring MVC Controller
SpringContentController.java
package javabeat.net.spring.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.ResponseStatus;
@Controller
public class SpringContentController {
@Autowired UserDetails userDetails;
@RequestMapping(value="/springcontent",
method=RequestMethod.GET,produces={"application/xml", "application/json"})
@ResponseStatus(HttpStatus.OK)
public @ResponseBody
UserDetails getUser() {
UserDetails userDetails = new UserDetails();
userDetails.setUserName("Praveen");
userDetails.setEmailId("praveen@gmail.com");
return userDetails;
}
}
2. Java Bean
UserDetails.java
package javabeat.net.spring.controller;
import javax.xml.bind.annotation.XmlAttribute;
import javax.xml.bind.annotation.XmlRootElement;
@XmlRootElement
public class UserDetails {
private String userName;
private String emailId;
@XmlAttribute
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
@XmlAttribute
public String getEmailId() {
return emailId;
}
public void setEmailId(String emailId) {
this.emailId = emailId;
}
}
3. Spring Configurations
spring-dispatcher-servlet.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.0.xsd">
<context:component-scan base-package="javabeat.net.spring.controller" />
<bean id="userDetails" class="javabeat.net.spring.controller.UserDetails"/>
<mvc:annotation-driven content-negotiation-manager="contentManager"/>
<bean id="contentManager"
class="org.springframework.web.accept.ContentNegotiationManagerFactoryBean">
<property name="favorPathExtension" value="true"/>
<property name="ignoreAcceptHeader" value="true" />
<property name="defaultContentType" value="text/html" />
<property name="useJaf" value="false"/>
<property name="mediaTypes">
<map>
<entry key="html" value="text/html" />
<entry key="json" value="application/json" />
<entry key="xml" value="application/xml" />
</map>
</property>
</bean>
<bean id="jspViewResolver"
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/jsp/" />
<property name="suffix" value=".jsp" />
</bean>
</beans>
4. AngularJS View
This is very simple use of the AngularJS framework. The function “Hello” can be added to the JS controler which is best practice. However, for the simplicity we have used inside the JSP page.
angular.jsp
<!doctype html>
<html ng-app>
<head>
<title>Spring MVC + AngularJS Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script>
function Hello($scope, $http) {
$http.get('http://localhost:8080/SpringExamples/springcontent.json').
success(function(data) {
$scope.user = data;
});
}
</script>
</head>
<body>
<div ng-controller="Hello">
<h2>Spring MVC + AngularJS Demo</h2>
<p>EMail Id : {{user.emailId}}</p>
<p>User Name : {{user.userName}}</p>
</div>
</body>
</html>
5. Spring MVC + AngularJS Example
If you run the above example code, you would get the below screen.
How to apply security to AngularJS Resources?
Like we will be creating many js/views files for angular modules, But these are static files, How can we apply security to these? so only authenticated user has access to them?
You can use SpringSecurtiy to apply security on js/views files. You can completely block a user from viewing them or a part of your view.
Hello,
It’s correct if you’re building Angularjs and webAPI on 1 project. I would like to say on the spirit of Angularjs, it must be able to put at any server which is different to WebAPI project. So this is the problem, i’m using Spring security on Angularjs project to secure its resources and a spring security on WebAPI to secure REST but it’s seem that i can not handle authenticate token when login at Angular project side. Do you have any ideas?
dude bootstrap is not applied properly… content exceeding lines when web page is shrinked
do we want to implement by jsp pages? why we may not use html?
404 exception is coming..
i tried to run the above example.
For me the the page does not print any value for email id and user name.
I think the angularjs script does not get downloaded and realize the angular expressions.
However upon view source when i click on the angular script it gets downloaded.
Please help me run this example.
Hello Sachin,
Are you getting any exception or error?. I will check the example if there is any issues.
Thank You,
Krishna
I got the error that the springcontent.json file can not loaded. I think that i missed something in web.xml for that json url loaded. Please help me.
Hello Jeya,
Have you used all the code used here? I dont think there is any web.xml things. Could you paste your specific code here, I would try it in my environment.
Thank You,
Krishna
Hello Krishna,
Where can I download this example?
Thanks
HI Wlad,
The example given here would be sufficient. If you are having any issues please let me know.
Thank You,
Krishna
——————————-below code in index.html ————————————————————–
dept Name:
description:
save
———————————below code in js file ——————————————————————-
function departmentController($scope, $http) {
$scope.save = function(department) {
console.log(department.tdescription);
alert(“00″);
var url =”http://localhost:8090/department”;
$http.post(url,department)
.success(function(msg) {
//document.getElementById(“result”).innerHTML = “”+msg+””;
//$rootScope.getAll();
})
.error(function(err) {
document.getElementById(“result”).innerHTML = “”+err+””;
});
};
}
————————————————————-below code is pojo class———————————-
package com.vedams.hrms.models;
import java.io.Serializable;
import javax.persistence.*;
import javax.validation.constraints.NotNull;
import java.util.Date;
/**
* The persistent class for the ved_departments database table.
*
*/
@Entity
@Table(name=”Ved_Departments”)
public class VedDepartment implements Serializable {
private static final long serialVersionUID = 1L;
@Id
@GeneratedValue(strategy=GenerationType.AUTO)
@Column(name=”iDept_Id”)
@NotNull
private int iDept_Id;
@Column(name=”dDateOfCreation”)
@NotNull
@Temporal(TemporalType.DATE)
private Date dDateOfCreation;
@Column(name=”iStatus”)
@NotNull
private int iStatus;
@Lob
@Column(name=”tDescription”)
@NotNull
private String tDescription;
@Column(name=”vCreatedBy”)
@NotNull
private String vCreatedBy;
@Column(name=”vDeptName”)
@NotNull
private String vDeptName;
public VedDepartment() {
}
public int getIDept_Id() {
return this.iDept_Id;
}
public void setIDept_Id(int iDept_Id) {
this.iDept_Id = iDept_Id;
}
public Date getDDateOfCreation() {
return this.dDateOfCreation;
}
public void setDDateOfCreation(Date dDateOfCreation) {
this.dDateOfCreation = dDateOfCreation;
}
public int getIStatus() {
return this.iStatus;
}
public void setIStatus(int iStatus) {
this.iStatus = iStatus;
}
public String getTDescription() {
return this.tDescription;
}
public void setTDescription(String tDescription) {
this.tDescription = tDescription;
}
public String getVCreatedBy() {
return this.vCreatedBy;
}
public void setVCreatedBy(String vCreatedBy) {
this.vCreatedBy = vCreatedBy;
}
public String getVDeptName() {
return this.vDeptName;
}
public void setVDeptName(String vDeptName) {
this.vDeptName = vDeptName;
}
}
————————i got below error at the time of save data ——————————————-
javax.validation.ConstraintViolationException: Validation failed for classes [com.vedams.hrms.models.VedDepartment] during persist time for groups [javax.validation.groups.Default, ]
List of constraint violations:[
ConstraintViolationImpl{interpolatedMessage=’may not be null’, propertyPath=vCreatedBy, rootBeanClass=class com.vedams.hrms.models.VedDepartment, messageTemplate='{javax.validation.constraints.NotNull.message}’}
ConstraintViolationImpl{interpolatedMessage=’may not be null’, propertyPath=vDeptName, rootBeanClass=class com.vedams.hrms.models.VedDepartment, messageTemplate='{javax.validation.constraints.NotNull.message}’}
ConstraintViolationImpl{interpolatedMessage=’may not be null’, propertyPath=dDateOfCreation,
—————-index.html for above comment code—————–
div ng-app=”” ng-controller=”departmentController”
form novalidate>
dept Name:
input type=”text” ng-model=”department.vDeptName”
description:
input type=”text” ng-model=”department.tdescription”
input type=”date” ng-model=”department.dDateOfCreation”
input type=”text” ng-model=”department.iStatus”
input type=”text” ng-model=”department.vCreatedBy”
br>
save</button
Hi Krishna,
The value of email id and user name are not coming, I think the json is not being rendered. I tried accessing the json separately using the url http://localhost:8080/mvcaangular/springcontent.json and got the HTTP 406 error with below message
The resource identified by this request is only capable of generating responses with characteristics not acceptable according to the request “accept” headers.
Me too have the same issue. Any solutions or workarounds?
I am also facing same issue.please let me know how to resolve this.
Why cant you give upload the complete source code along with web.xml ?
Your example looks like more of puzzle than a tutorial..
Find me if you can type… Where did you put your JSP ? You thought give this information was irrelevant. Didn’t you ?
and spring-content.json file is located?
very good post
Hi Bala,
Thank you for your comments.
-Krishna
Hi, can you please tell me how can I send the value of fields designed in angularjs to spring controller.
I am getting “406 – Not Acceptable” error for the “http://localhost:8080/springAngularApp/springcontent.json”.
How do I resolve this?
Without solving I cannot proceed further. And the whole example is failing without this.
I tried running the above example on Eclipse, but got an error.
ERROR 404.
The requested resource is not available.
Jaya, Indranil, Rahman A, I think to render JSON you will have to have the Jackson jars in your project class path: jackson-databind-2.6.4.jar jackson-core-2.6.4.jar jackson-annotations-2.6.4.jar or (for example) for each jar in your pom xml you will need an entry like:
com.fasterxml.jackson.core
jackson-databind
2.6.4
hi Krishna,
this blog is very useful for java developers thosr are using Angular JS and Spring MVC combinely. I am java Java developer at Tech Mahindra Pune location currently working ion these two technologies for our internal project purpose. so i have gone thriugh this blog and integrated the Angular JS with Spring MVC.
thanks for your help and if you have more examples please share in this blog for all developer reference.
thanks in advance.