Spring MVC rest controller with AngularJS using $http service example

Spring MVC AngularJs example-Hibernate-MySQL-Maven

AngularJs and Spring both are in demand skill for the Java Developer.In our last post, you have seen our basic Spring MVC CRUD application.Now time to take one steps forward and learn the AngularJs integration with Spring MVC.This post is for those web developers who are thinking to integrate AngularJS with Spring MVC
and need a slight push.In this post, we are going to share a single page article management app in which User can log in into the application to add and view own articles.
Spring restful services are used by angular js to get the response from DB in JSON format.

In this application below technologies are used

Java 8, Spring 4 and Hibernate 4
Angular Js, Html and Bootstrap
My SQL Db
Apache Tomcat 8
Maven as build tool
Eclipse IDE

Below the code for same

pom.xml

<groupId>com.skuera</groupId>

<version>0.0.1-SNAPSHOT</version>

<springframework.version>4.0.6.RELEASE</springframework.version>

<hibernate.version>4.3.6.Final</hibernate.version>

<mysql.connector.version>5.1.31</mysql.connector.version>

<joda-time.version>2.3</joda-time.version>

<testng.version>6.9.4</testng.version>

<mockito.version>1.10.19</mockito.version>

<h2.version>1.4.187</h2.version>

<dbunit.version>2.2</dbunit.version>

<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>

<springframework.version>4.3.1.RELEASE</springframework.version>

<jackson.version>2.7.5</jackson.version>

</properties>

<groupId>org.springframework</groupId>

<artifactId>spring-core</artifactId>

<version>${springframework.version}</version>

</dependency>

<groupId>org.springframework</groupId>

<artifactId>spring-web</artifactId>

<version>${springframework.version}</version>

</dependency>

<groupId>org.springframework</groupId>

<artifactId>spring-webmvc</artifactId>

<version>${springframework.version}</version>

</dependency>

<groupId>org.springframework</groupId>

<artifactId>spring-tx</artifactId>

<version>${springframework.version}</version>

</dependency>

</dependency>

<groupId>org.springframework</groupId>

<artifactId>spring-orm</artifactId>

<version>${springframework.version}</version>

</dependency>

<groupId>org.hibernate</groupId>

<artifactId>hibernate-core</artifactId>

<version>${hibernate.version}</version>

</dependency>

<groupId>javax.validation</groupId>

<artifactId>validation-api</artifactId>

<version>1.1.0.Final</version>

</dependency>

<groupId>org.hibernate</groupId>

<artifactId>hibernate-validator</artifactId>

<version>5.1.3.Final</version>

</dependency>

<groupId>mysql</groupId>

<artifactId>mysql-connector-java</artifactId>

<version>${mysql.connector.version}</version>

</dependency>

<groupId>javax.servlet</groupId>

<artifactId>javax.servlet-api</artifactId>

</dependency>

<groupId>javax.servlet.jsp</groupId>

<artifactId>javax.servlet.jsp-api</artifactId>

</dependency>

<groupId>javax.servlet</groupId>

</dependency>

<groupId>com.fasterxml.jackson.core</groupId>

<artifactId>jackson-databind</artifactId>

<version>${jackson.version}</version>

</dependency>

<groupId>javax.servlet</groupId>

<artifactId>javax.servlet-api</artifactId>

</dependency>

<groupId>javax.servlet</groupId>

</dependency>

<!--

<groupId>commons-fileupload</groupId>

<artifactId>commons-fileupload</artifactId>

</dependency> -->

<groupId>javax.ws.rs</groupId>

<artifactId>javax.ws.rs-api</artifactId>

</dependency>

</dependencies>

<build>

<artifactId>maven-compiler-plugin</artifactId>

</configuration>

</plugin>

<artifactId>maven-war-plugin</artifactId>

<warSourceDirectory>src/main/webapp</warSourceDirectory>

<failOnMissingWebXml>false</failOnMissingWebXml>

</configuration>

</plugin>

</plugins>

</build>

</project>

CMSConfiguration.java

package com.skuera.configuration;

import org.springframework.context.MessageSource;

import org.springframework.context.annotation.Bean;

import org.springframework.context.annotation.ComponentScan;

import org.springframework.context.annotation.Configuration;

import org.springframework.context.support.ResourceBundleMessageSource;

import org.springframework.web.servlet.config.annotation.EnableWebMvc;

import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;

import org.springframework.web.servlet.config.annotation.ViewResolverRegistry;

import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

import org.springframework.web.servlet.view.InternalResourceViewResolver;

import org.springframework.web.servlet.view.JstlView;

@Configuration

@EnableWebMvc

@ComponentScan(basePackages = "com.skuera")

public class CMSConfiguration extends WebMvcConfigurerAdapter{

@Override

public void configureViewResolvers(ViewResolverRegistry registry) {

InternalResourceViewResolver viewResolver = new InternalResourceViewResolver();

viewResolver.setViewClass(JstlView.class);

viewResolver.setPrefix("/WEB-INF/");

viewResolver.setSuffix(".html");

registry.viewResolver(viewResolver);

}

@Bean

public MessageSource messageSource() {

ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource();

messageSource.setBasename("messages");

return messageSource;

}

@Override

public void addResourceHandlers(ResourceHandlerRegistry registry) {

registry.addResourceHandler("/static/**").addResourceLocations("/static/");

}

CORSFilter.java

package com.skuera.configuration;

import java.io.IOException;

import javax.servlet.Filter;

import javax.servlet.FilterChain;

import javax.servlet.FilterConfig;

import javax.servlet.ServletException;

import javax.servlet.ServletRequest;

import javax.servlet.ServletResponse;

import javax.servlet.http.HttpServletResponse;

public class CORSFilter implements Filter {

public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {

System.out.println("Filtering on...........................................................");

HttpServletResponse response = (HttpServletResponse) res;

response.setHeader("Access-Control-Allow-Origin", "*");

response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");

response.setHeader("Access-Control-Max-Age", "3600");

response.setHeader("Access-Control-Allow-Headers", "X-requested-with, Content-Type");

chain.doFilter(req, res);

}

public void init(FilterConfig filterConfig) {}

public void destroy() {}

}

HibernateConfiguration.java

Database configurations are done in this file using application.properties

In this file hibernate.hbm2ddl.auto is update so this class will create db tables on its own on credentials need to be inserted in user table though script.

package com.skuera.configuration;

import java.util.Properties;

import javax.sql.DataSource;

import org.hibernate.SessionFactory;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.context.annotation.Bean;

import org.springframework.context.annotation.ComponentScan;

import org.springframework.context.annotation.Configuration;

import org.springframework.context.annotation.PropertySource;

import org.springframework.core.env.Environment;

import org.springframework.jdbc.datasource.DriverManagerDataSource;

import org.springframework.orm.hibernate4.HibernateTransactionManager;

import org.springframework.orm.hibernate4.LocalSessionFactoryBean;

import org.springframework.transaction.annotation.EnableTransactionManagement;

@Configuration

@EnableTransactionManagement

@ComponentScan({ "com.skuera.configuration" })

@PropertySource(value = { "classpath:application.properties" })

public class HibernateConfiguration {

@Autowired

private Environment environment;

@Bean

public LocalSessionFactoryBean sessionFactory() {

LocalSessionFactoryBean sessionFactory = new LocalSessionFactoryBean();

sessionFactory.setDataSource(dataSource());

sessionFactory.setPackagesToScan(new String[] { "com.skuera.model" });

sessionFactory.setHibernateProperties(hibernateProperties());

return sessionFactory;

}

@Bean

public DataSource dataSource() {

DriverManagerDataSource dataSource = new DriverManagerDataSource();

dataSource.setDriverClassName(environment.getRequiredProperty("jdbc.driverClassName"));

dataSource.setUrl(environment.getRequiredProperty("jdbc.url"));

dataSource.setUsername(environment.getRequiredProperty("jdbc.username"));

dataSource.setPassword(environment.getRequiredProperty("jdbc.password"));

return dataSource;

}

private Properties hibernateProperties() {

Properties properties = new Properties();

properties.put("hibernate.dialect", environment.getRequiredProperty("hibernate.dialect"));

properties.put("hibernate.show_sql", environment.getRequiredProperty("hibernate.show_sql"));

properties.put("hibernate.format_sql", environment.getRequiredProperty("hibernate.format_sql"));

properties.put("hibernate.hbm2ddl.auto","update");

return properties;

}

@Bean

@Autowired

public HibernateTransactionManager transactionManager(SessionFactory s) {

HibernateTransactionManager txManager = new HibernateTransactionManager();

txManager.setSessionFactory(s);

return txManager;

}

Database Properties

application.properties

jdbc.driverClassName = com.mysql.jdbc.Driver

jdbc.url = jdbc:mysql://localhost:3306/arco

jdbc.username = root

jdbc.password = Welcome123

hibernate.dialect = org.hibernate.dialect.MySQLDialect

hibernate.show_sql = true

hibernate.format_sql = true

CMSController.java

Spring Rest Controller to handle request from app_controller.js through http_service.js

package com.skuera.controller;

import java.util.ArrayList;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.http.HttpStatus;

import org.springframework.http.ResponseEntity;

import org.springframework.web.bind.annotation.RequestBody;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestMethod;

import org.springframework.web.bind.annotation.RestController;

import com.skuera.form.ArticleForm;

import com.skuera.model.Article;

import com.skuera.model.User;

import com.skuera.service.SerI;

/**

* @author skuera

*This is spring rest controller to handle http request

@RestController

public class CMSController {

@Autowired

private SerI ser;

@RequestMapping(value = "/isvalid", method = RequestMethod.POST)

public User isValid(@RequestBody User user){

User us= ser.isValidUser(user.getUsername(), user.getPassword());

System.out.println(us.getUsername());

return us;

}

@RequestMapping(value = "/addArticle", method = RequestMethod.POST)

public Article isValid(@RequestBody ArticleForm article){

Article art=new Article();

art.setArticleText(article.getArticleText());

art.setArticleTitle(article.getArticleTitle());

art.setUsers(ser.getUserByUserName(article.getUsername()));

int res= ser.saveArticle(art);

if(res==1){

return art;

}

return null;

}

@RequestMapping(value = "/getAllArticle", method = RequestMethod.POST)

public List<Article> getArticle(@RequestBody User user){

List<Article> artList=new ArrayList<>();

artList=ser.getAllArticle(user.getUsername());

return artList;

}

@RequestMapping(value = "/getArticle", method = RequestMethod.POST)

public Article getArticleDetail(@RequestBody Article art){

Article artcl=new Article();

artcl=ser.getArticle(art.getArticleId());

return artcl;

}

DaoI.java (Dao Interface )

package com.skuera.dao;

import java.util.List;

import com.skuera.model.Article;

import com.skuera.model.User;

public interface DaoI {

public User validate(String user,String pass);

public void saveArticle(Article article);

public User getUserByUserName(String uname);

public List<Article> getAllArticle(String username);

public Article getArticle(int articleId);

}

DaoImpl.java (Dao Implementation)

package com.skuera.dao;

import java.util.List;

import org.hibernate.Query;

import org.hibernate.Session;

import org.hibernate.SessionFactory;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Repository;

import org.springframework.transaction.annotation.Transactional;

import com.skuera.model.Article;

import com.skuera.model.User;

/**

* @author skuera

@Repository

@Transactional

public class DaoImpl implements DaoI {

@Autowired

private SessionFactory sessionFactory;

@Override

public User validate(String user, String pass) {

Session sess=sessionFactory.getCurrentSession();

String hql="FROM User u where u.username=:uid and u.password=:pass";

Query query = sess.createQuery(hql);

query.setParameter("uid",user);

query.setParameter("pass",pass);

List results = query.list();

User us=null;

if(results.size()>0){

us=(User) results.get(0);

return us;

}else{

return us;

}

@Override

public void saveArticle(Article article) {

Session sess=sessionFactory.getCurrentSession();

System.out.println("In Dao");

sess.save(article);

}

@Override

public User getUserByUserName(String uname) {

String hql="from User u where u.username=:uname";

Session sess=sessionFactory.getCurrentSession();

Query qry=sess.createQuery(hql);

System.out.println("***"+uname);

qry.setString("uname", uname);

User u=(User) qry.uniqueResult();

return u;

}

@Override

public List<Article> getAllArticle(String username) {

String hql="from Article a where a.users.username=:uname";

Session sess=sessionFactory.getCurrentSession();

Query qry=sess.createQuery(hql);

System.out.println("***"+username);

qry.setString("uname", username);

List<Article> alist=qry.list();

System.out.println(alist.size());

return alist;

}

@Override

public Article getArticle(int articleId) {

Session sess=sessionFactory.getCurrentSession();

Article art=(Article) sess.load(Article.class, articleId);

return art;

}

ArticleForm.java

package com.skuera.form;

import javax.persistence.Column;

/**

* @author skuera

public class ArticleForm {

private String articleTitle;

private String articleText;

private String username;

public String getArticleTitle() {

return articleTitle;

}

public void setArticleTitle(String articleTitle) {

this.articleTitle = articleTitle;

}

public String getArticleText() {

return articleText;

}

public void setArticleText(String articleText) {

this.articleText = articleText;

}

public String getUsername() {

return username;

}

public void setUsername(String username) {

this.username = username;

}

User.java

package com.skuera.model;

import java.util.Set;

import javax.persistence.Column;

import javax.persistence.Entity;

import javax.persistence.GeneratedValue;

import javax.persistence.GenerationType;

import javax.persistence.Id;

import javax.persistence.OneToMany;

import javax.persistence.Table;

/**

* @author skuera

@Entity

@Table(name="user")

public class User {

@Id

@GeneratedValue(strategy=GenerationType.IDENTITY)

@Column(name="user_id")

private long id;

@Column(name="user_name")

private String username;

@Column(name="user_pass")

private String password;

@OneToMany(mappedBy="users")

private Set<Article> articles;

public long getId() {

return id;

}

public void setId(long id) {

this.id = id;

}

public String getUsername() {

return username;

}

public void setUsername(String username) {

this.username = username;

}

public String getPassword() {

return password;

}

public void setPassword(String password) {

this.password = password;

}

Article.java

package com.skuera.model;

import javax.persistence.Column;

import javax.persistence.Entity;

import javax.persistence.GeneratedValue;

import javax.persistence.GenerationType;

import javax.persistence.Id;

import javax.persistence.JoinColumn;

import javax.persistence.ManyToOne;

import javax.persistence.Table;

/**

* @author skuera

@Entity

@Table(name="arcticle")

public class Article {

@Id

@GeneratedValue(strategy=GenerationType.IDENTITY)

@Column(name="arc_id")

private int articleId;

@Column(name="arc_title")

private String articleTitle;

@Column(name="arc_text")

private String articleText;

@Column(name="img_path")

private String imagePath;

@ManyToOne

@JoinColumn(name="user_id",nullable=false)

private User users;

public int getArticleId() {

return articleId;

}

public void setArticleId(int articleId) {

this.articleId = articleId;

}

public String getArticleText() {

return articleText;

}

public void setArticleText(String articleText) {

this.articleText = articleText;

}

public String getImagePath() {

return imagePath;

}

public void setImagePath(String imagePath) {

this.imagePath = imagePath;

}

public User getUsers() {

return users;

}

public void setUsers(User users) {

this.users = users;

}

public String getArticleTitle() {

return articleTitle;

}

public void setArticleTitle(String articleTitle) {

this.articleTitle = articleTitle;

}

SerI.java

package com.skuera.service;

import java.util.List;

import com.skuera.model.Article;

import com.skuera.model.User;

public interface SerI {

public User isValidUser(String user,String pass);

public int saveArticle(Article article);

public User getUserByUserName(String uname);

public List<Article> getAllArticle(String username);

public Article getArticle(int articleId);

}

SerImpl.java

package com.skuera.service;

import java.util.ArrayList;

import java.util.Iterator;

import java.util.List;

import java.util.concurrent.atomic.AtomicLong;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Service;

import com.skuera.dao.DaoI;

import com.skuera.model.Article;

import com.skuera.model.User;

/**

* @author skuera

@Service("userService")

public class SerImpl implements SerI {

@Autowired

private DaoI dao;

public void setDao(DaoI dao) {

this.dao = dao;

}

@Override

public User isValidUser(String user, String pass) {

// TODO Auto-generated method stub

return dao.validate(user, pass);

}

@Override

public int saveArticle(Article article) {

int res=0;

try{

System.out.println("In Dao");

dao.saveArticle(article);

res=1;

}catch(Exception e){

}

return res;

}

@Override

public User getUserByUserName(String uname) {

// TODO Auto-generated method stub

return dao.getUserByUserName(uname);

}

@Override

public List<Article> getAllArticle(String username) {

// TODO Auto-generated method stub

return dao.getAllArticle(username);

}

@Override

public Article getArticle(int articleId) {

// TODO Auto-generated method stub

return dao.getArticle(articleId);

}

app.js

'use strict';

var myApp = angular.module('myApp',['ngRoute']);
myApp.config(function($routeProvider,$httpProvider,$locationProvider){
$routeProvider.when("/login",{
templateUrl:"view/login.html",
controller:"appctrl"

}).when("/dashboard",{

templateUrl:"view/dashboard.html",
controller:"appctrl"
}).when("/newart",{

templateUrl:"view/newarticle.html",
controller:"appctrl"
}).otherwise({
redirectTo : "/login"
});

});

app_controller.js

'use strict';
angular.module('myApp').controller('appctrl',["$scope", "httpService","$location","$window",function($scope,httpService,$location,$window){

/*To Validate the User*/
$scope.validateuser=function(){
var uname=$scope.username;
var pass=$scope.password;
var formdata={
username:uname,
password:pass

};
var details={

getUrl:"rest/isvalid",
getFormData:formdata

};

httpService.getDataByForm(details).then(onSuccessRetrival, onError);
};

var onSuccessRetrival = function(data) {

$window.localStorage.setItem("uname",data.username);
//$scope.logged=data.username;
//console.log($scope.logged);

$location.path('/dashboard');
//$scope.getArticleDetails();

};

var onError = function(reason) {
alert("Invalid Login");

};

/*To display Logged in User*/
$scope.$watch('logged',function(newValue,oldValue){
$scope.logged=$window.localStorage.getItem("uname");
console.log($scope.logged+"**");

});
/*To add the article*/

$scope.addarticle=function(){
var title=$scope.title;
var article=$scope.article;
var formdata={
"articleTitle":title,
"articleText":article,
"username":$window.localStorage.getItem("uname")

};
var details={

getUrl:"rest/addArticle",
getFormData:formdata

};

httpService.getDataByForm(details).then(onSuccessRetrivals, onErrorArticle);
};
var onErrorArticle = function(reason) {
alert("Article is not added");

};

var onSuccessRetrivals = function(data) {
alert("Article Added");
$location.path('/dashboard');
};

$scope.newart=function(){
$location.path('/newart');

};

//To Fetch Article List

$scope.getArticleDetails = function(){
var formdata={
"username":$window.localStorage.getItem("uname")
};
var details={

getUrl:"rest/getAllArticle",
getFormData:formdata

};

httpService.getDataByForm(details).then(successart, artfailure);
};

var successart=function successCallback(data) {

$scope.ArticleList=data;

};

var artfailure=function errorCallback(reason) {
alert('Not Able to Fetch Article');
};

$scope.getArticleDetails();
/*To show article content*/
$scope.articleClick=function(item){
$scope.content=item.articleText;

};
/*Go to Home*/
$scope.goToHome=function(){
$location.path('/dashboard');

};

}

]);

http_service,js

'use strict';
angular.module("myApp").factory("httpService",['$http',function($http){

var getDataByForm = function(details) {
return $http.post(details.getUrl, details.getFormData).then(
function(response) {
return response.data;
});
}

return {
getDataByForm : getDataByForm

};
}]);

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="./static/css/app.css" rel="stylesheet"></link>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular-route.js"></script>
<script src="./static/js/app.js"></script>
<script src="./static/js/controller/app_controller.js"></script>
<script src="./static/js/service/http_service.js"></script>

</head>
<body ng-app="myApp">

<div ng-view></div>

</div>

</body>

</html>

login.html

<form action="/" id="myLogin" class="form-horizontal">

<h1>Sign In</h1>

<div class="form-group">
<label class="control-label col-sm-2" for="email">Username:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="email" placeholder="Enter User" ng-model="username">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="pwd" placeholder="Enter password" ng-model="password">
</div>
</div>

<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default" ng-click="validateuser()">Submit</button>
</div>
</div>

</form>

dashboard.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="./static/css/app.css" rel="stylesheet"></link>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular-route.js"></script>
<script src="./static/js/app.js"></script>
<script src="./static/js/controller/login_controller.js"></script>
<style>
section {
width: 80%;
height: 200px;
background: aqua;
margin: auto;
padding: 10px;
}
div#artlist {
float:left;
width:75%;
overflow:hidden;
}
div#artcont {
float:left;
width:25%;
overflow:hidden;
}


</style>
</head>
<body ng-app="myApp">
<div class="form-group">
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-user"></span>{{logged}}
</button>
<input type="text" ng-show="false" ng-model="logged" ng-disabled="true" style="outline: none;"/>
<a href="#">Logout</a>
</div>


<h1 class="well">Dashboard</h1>

<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Article Management</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a ng-click="goToHome()">Dashboard</a></li>
<li><a ng-click="newart()">Add Article</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a><span class="glyphicon glyphicon-user"></span>{{logged}}</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
</ul>
</div>
</nav>
<div class="container">

<div class="container">
<div class="row">
<div class="col-xs-6">
<header><span>Articles</span></header>
<ul >
<li data-ng-repeat="item in ArticleList"><a data-ng-click="articleClick(item)">{{item.articleTitle}}</a>

</li>
</ul>
</div>

<div class="col-xs-6">

<header><span>Articles Content</span></header>

<textarea ng-model="content">
</div>

</div>
</div>

</div>
</body>
</html>

newarticle.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="./static/css/app.css" rel="stylesheet"></link>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular-route.js"></script>
<script src="./static/js/app.js"></script>
<script src="./static/js/controller/login_controller.js"></script>
</head>
<body ng-app="myApp">
<div class="form-group">
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-user"></span>{{logged}}
</button>
<input type="text" ng-show="false" ng-model="logged" ng-disabled="true" style="outline: none;"/>
<a href="#">Logout</a>
</div>

<h1 class="well">Add Article</h1>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Article Management</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a ng-click="goToHome()">Dashboard</a></li>
<li><a ng-click="newart()">Add Article</a></li>

</ul>
<ul class="nav navbar-nav navbar-right">
<li><a><span class="glyphicon glyphicon-user"></span>{{logged}}</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
</ul>
</div>
</nav>

<div class="container">
<div class="form-group">
<label for="title">Title:</label>
<input type="title" class="form-control" id="pwd" ng-model="title">
</div>
<div class="form-group">
<label for="content">Content:</label>
<p style="color:blue;">{{255 - article.length}} left</p>
<textarea class="form-control" rows="5" id="content" ng-model="article"></textarea>
</div>

<div>
<button type="button" class="btn btn-success" ng-click="addarticle()" >Save Article</button>
</div>
</div>
</body>

</html>

cms-servlet.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:p="http://www.springframework.org/schema/p"
xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:tx="http://www.springframework.org/schema/tx"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd
http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.0.xsd
http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.0.xsd
http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">

<context:component-scan base-package="com.skuera"/>
<mvc:annotation-driven/>

</beans>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0">
<display-name>assign</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>cms</servlet-name>
<servlet-class>
org.springframework.web.servlet.DispatcherServlet
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>cms</servlet-name>
<url-pattern>/rest/*</url-pattern>
</servlet-mapping>

</web-app>

Download complete code from github.

CRUD Application Spring MVC-Hibernate-MySql-Maven

Give you suggestion in comments.If you like the post Share with your friends on social network.

5 comments:

AnonymousMarch 30, 2017 at 2:45 AM
i have created this application as you said but i'm not able to access any articles this may be because hibernate is not able to access the database. Can you guide me. I did created database in mysql will that be fine or i need to do anything else.
ujwwalaJanuary 18, 2018 at 2:49 AM
we have used boyh annotationsi mean java based configuration and web.xml both..please suggest
BhuvanaOctober 21, 2018 at 4:38 AM
Expected to form you a next to no word to thank you once more with respect to the decent recommendations you've contributed here. Those guidelines additionally worked to become a good way to recognize that other people online have the identical fervor like mine to grasp great deal more around this condition. We are providing AngularJs training in velachry.
For more details: AngularJs training in velachery
BhuvanaOctober 21, 2018 at 6:46 AM
Expected to form you a next to no word to thank you once more with respect to the decent recommendations you've contributed here. Those guidelines additionally worked to become a good way to recognize that other people online have the identical fervor like mine to grasp great deal more around this condition. We are providing AngularJs training in velachry.
For more details: AngularJs training in velachery
for ict 99October 12, 2019 at 10:31 PM
The effectiveness of IEEE Project Domains depends very much on the situation in which they are applied. In order to further improve IEEE Final Year Project Domains practices we need to explicitly describe and utilise our knowledge about software domains of software engineering Final Year Project Domains for CSE technologies. This paper suggests a modelling formalism for supporting systematic reuse of software engineering technologies during planning of software projects and improvement programmes in Final Year Project Centers in Chennai.

Spring Framework has already made serious inroads as an integrated technology stack for building user-facing applications. Corporate TRaining Spring Framework the authors explore the idea of using Java in Big Data platforms.
Specifically, Spring Framework provides various tasks are geared around preparing data for further analysis and visualization. Spring Training in Chennai

Spring MVC rest controller with AngularJS using $http service example

Spring MVC AngularJs example-Hibernate-MySQL-Maven

CRUD Application Spring MVC-Hibernate-MySql-Maven

5 comments:

Follow us on Facebook

Popular Posts

Recent Post

AngularJS most important interview questions

Labels

Blog Archive

Popular Posts

Contact Us