CRUD Operation using AngularJS, RequireJS, Spring and Hibernate

In this post, I will show you step by step process on how you can create simple CRUD operation using AngularJS, RequireJS, Spring and Hibernate. It is important to understand, how we can integrate those best technology today. We will discuss how to configure Spring and Hibernate, then we will understand how we can configure RequireJS and AngularJS into Spring.

Before we begin, let’s see the directory structure for the back end of the project.



Because we are developing this sample application in Maven, we will have to first configure the maven dependencies for spring and hibernate to work. So let’s have look on

pom.xml.
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.pma</groupId>
  <artifactId>AngularJSExamples</artifactId>
  <packaging>war</packaging>
  <version>0.0.1-SNAPSHOT</version>
  <name>AngularJSExamples Maven Webapp</name>
  <url>http://maven.apache.org</url>
  <properties>
		<springframework.version>4.2.5.RELEASE</springframework.version>
		<springsecurity.version>4.0.4.RELEASE</springsecurity.version>
		<hibernate.version>4.3.11.Final</hibernate.version>
		<mysql.connector.version>5.1.31</mysql.connector.version>
	</properties>

	<dependencies>

		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-test</artifactId>
			<version>4.3.0.RELEASE</version>
			<scope>test</scope>
		</dependency>

		<!-- https://mvnrepository.com/artifact/junit/junit -->
		<dependency>
			<groupId>junit</groupId>
			<artifactId>junit</artifactId>
			<version>4.12</version>
		</dependency>

		<!-- https://mvnrepository.com/artifact/org.hamcrest/hamcrest-all -->
		<dependency>
			<groupId>org.hamcrest</groupId>
			<artifactId>hamcrest-all</artifactId>
			<version>1.3</version>
		</dependency>

		<!-- Spring -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-beans</artifactId>
			<version>${springframework.version}</version>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-context</artifactId>
			<version>${springframework.version}</version>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-core</artifactId>
			<version>${springframework.version}</version>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-web</artifactId>
			<version>${springframework.version}</version>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-webmvc</artifactId>
			<version>${springframework.version}</version>
		</dependency>
		<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>

		<!-- Jakson -->
		<dependency>
			<groupId>com.fasterxml.jackson.core</groupId>
			<artifactId>jackson-databind</artifactId>
			<version>2.6.1</version>
		</dependency>

		<!-- Spring Security -->
		<dependency>
			<groupId>org.springframework.security</groupId>
			<artifactId>spring-security-web</artifactId>
			<version>${springsecurity.version}</version>
		</dependency>
		<dependency>
			<groupId>org.springframework.security</groupId>
			<artifactId>spring-security-config</artifactId>
			<version>${springsecurity.version}</version>
		</dependency>
		<dependency>
			<groupId>org.springframework.security</groupId>
			<artifactId>spring-security-taglibs</artifactId>
			<version>${springsecurity.version}</version>
		</dependency>

		<!-- Hibernate -->
		<dependency>
			<groupId>org.hibernate</groupId>
			<artifactId>hibernate-core</artifactId>
			<version>${hibernate.version}</version>
		</dependency>

		<!-- jsr303 validation -->
		<dependency>
			<groupId>javax.validation</groupId>
			<artifactId>validation-api</artifactId>
			<version>1.1.0.Final</version>
		</dependency>
		<dependency>
			<groupId>org.hibernate</groupId>
			<artifactId>hibernate-validator</artifactId>
			<version>5.1.3.Final</version>
		</dependency>

		<!-- MySQL -->
		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
			<version>${mysql.connector.version}</version>
		</dependency>

		<!-- SLF4J/Logback -->
		<dependency>
			<groupId>ch.qos.logback</groupId>
			<artifactId>logback-classic</artifactId>
			<version>1.1.7</version>
		</dependency>

		<!-- Servlet+JSP+JSTL -->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>javax.servlet-api</artifactId>
			<version>3.1.0</version>
		</dependency>
		<dependency>
			<groupId>javax.servlet.jsp</groupId>
			<artifactId>javax.servlet.jsp-api</artifactId>
			<version>2.3.1</version>
		</dependency>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
			<version>1.2</version>
		</dependency>
	</dependencies>
	<build>
		<pluginManagement>
			<plugins>
				<plugin>
					<groupId>org.apache.maven.plugins</groupId>
					<artifactId>maven-compiler-plugin</artifactId>
					<version>3.2</version>
					<configuration>
						<source>1.7</source>
						<target>1.7</target>
					</configuration>
				</plugin>
				<plugin>
					<groupId>org.apache.maven.plugins</groupId>
					<artifactId>maven-war-plugin</artifactId>
					<version>2.4</version>
					<configuration>
						<warSourceDirectory>src/main/webapp</warSourceDirectory>
						<warName>AngularJSExamples</warName>
						<failOnMissingWebXml>false</failOnMissingWebXml>
					</configuration>
				</plugin>
			</plugins>
		</pluginManagement>
		<finalName>AngularJSExamples</finalName>
	</build>
</project>

Now provide configuration for Spring and Hibernate to work. We will use Java @Annotation based configuration. Now let’s first understand Spring Application configuration for view resolver and static resources.

@Configuration : This annotation tells load this class as configuration class.
@EnableWebMvc : Is to enable Web MVC support.
@ComponentScan : provide base package location in order to scan for component classes.

ApplicationConfiguration.java
package com.ajse.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.ViewResolver;
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.ajse")
public class ApplicationConfiguration extends WebMvcConfigurerAdapter {

    @Bean(name="AngularJSExamples")
    public ViewResolver viewResolver() {
        InternalResourceViewResolver viewResolver = new InternalResourceViewResolver();
        viewResolver.setViewClass(JstlView.class);
        viewResolver.setPrefix("/WEB-INF/views/");
        viewResolver.setSuffix(".jsp");

        return viewResolver;
    }

	/**
     * Configure ResourceHandlers to serve static resources like CSS/ Javascript etc...
     */
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/static/**").addResourceLocations("/static/");
    }
}

Now let’s configure Application Initialize.

ApplicationInitializer.java
package com.ajse.config;

import org.springframework.web.servlet.support.AbstractAnnotationConfigDispatcherServletInitializer;

public class ApplicationInitializer extends AbstractAnnotationConfigDispatcherServletInitializer {

	@Override
	protected Class<?>[] getRootConfigClasses() {
		return new Class<?>[] {ApplicationConfiguration.class};
	}

	@Override
	protected Class<?>[] getServletConfigClasses() {
		return null;
	}

	@Override
	protected String[] getServletMappings() {
		return new String[] {"/"};
	}
}
Now Spring is ready to go.

After the spring configuration, let’s configure hibernate. I have created a separate property file, so that every time we don’t need to make changes in Java class file. We can modify property file and that will be reflected in Java Class.

hibernate.hbm2ddl.auto : there are different values you can assign here as per your requirement : none, create, update Use create for the first time and then you can use update, so that any modification in entity we will changed by hibernate.

hibernate.properties
jdbc.driverClassName = com.mysql.jdbc.Driver
jdbc.url = jdbc:mysql://localhost:3306/ajse
jdbc.username = root
jdbc.password = admin
hibernate.dialect = org.hibernate.dialect.MySQLDialect
hibernate.show_sql = true
hibernate.format_sql = true
hibernate.hbm2ddl.auto = none
Now configure hibernate as below :

@Configuration : Use class as configuration class.
@EnableTransactionManagement : Enable Transaction support.
@ComponentScan : Scan for the component classes.
@PropertySource : Property file location.

HibernateConfiguration.java
package com.ajse.config;

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(basePackages="com.ajse.config")
@PropertySource(value={"classpath:hibernate.properties"})
public class HibernateConfiguration {

	@Autowired
	Environment environment;

	@Bean
	public LocalSessionFactoryBean sessionFactory() {
		LocalSessionFactoryBean factory = new LocalSessionFactoryBean();
		factory.setDataSource(dataSource());
		factory.setPackagesToScan(new String[] {"com.ajse.entities"});
		factory.setHibernateProperties(hibernateProperties());
		return factory;
	}

	@Bean
	public DataSource dataSource() {
		DriverManagerDataSource driverManagerDataSource = new DriverManagerDataSource();
		driverManagerDataSource.setDriverClassName(environment.getRequiredProperty("jdbc.driverClassName"));
		driverManagerDataSource.setUrl(environment.getRequiredProperty("jdbc.url"));
		driverManagerDataSource.setUsername(environment.getRequiredProperty("jdbc.username"));
		driverManagerDataSource.setPassword(environment.getRequiredProperty("jdbc.password"));
		return driverManagerDataSource;
	}

	public 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", environment.getRequiredProperty("hibernate.hbm2ddl.auto"));
		return properties;
	}

	@Bean
	@Autowired
	public HibernateTransactionManager transactionManager(SessionFactory s) {
	    HibernateTransactionManager txManager = new HibernateTransactionManager();
	    txManager.setSessionFactory(s);
	    return txManager;
	}

}
Spring and Hibernate is now ready to use. Now we need to provide our entities that will be automatically created by the hibernate into our database.

UserEntity.java
package com.ajse.entities;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;

@Entity
@Table(name = "USER_ENTITY")
public class UserEntity {

	@Id
	@GeneratedValue(strategy = GenerationType.IDENTITY)
	@Column(name = "id")
	private int id;

	@Column(name = "name", nullable = false, length = 200)
	private String name;

	@Column(name = "email", nullable = false, length = 100)
	private String email;

	@Column(name = "website", nullable = true, length = 500)
	private String website;

        ..... getter setters ......
}
Now we need database object, dependency injection and loose coupling is the power of spring container. So we need to maintain that standard in our code as well. For that we will first create Interface for our DAO, DAO will provide operation declaration and implementer classes can follow that declaration.

UserDao.java
package com.ajse.dao;

import java.util.List;

import com.ajse.entities.UserEntity;

public interface UserDao {
	public boolean addUser(UserEntity userEntity);
	public List<UserEntity> getUsers(int userId);
	public boolean editUser(UserEntity userEntity);
	public boolean deleteUser(int userId);
}
After that, we can create an implementer for that DAO. UserDaoImpl.java
package com.ajse.dao.impl;

import java.util.List;

import org.hibernate.Session;
import org.hibernate.SessionFactory;
import org.hibernate.Transaction;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;

import com.ajse.dao.UserDao;
import com.ajse.entities.UserEntity;

@Component
public class UserDaoImpl implements UserDao{

	@Autowired
	private SessionFactory sessionFactory;

	public boolean addUser(UserEntity userEntity) {
		Session session = null;
		Transaction transaction = null;
		boolean flag = false;

		try {
			session = this.sessionFactory.openSession();
			transaction = session.beginTransaction();

			session.persist(userEntity);
			transaction.commit();

			flag = true;
		} catch(Exception e) {
			e.printStackTrace();
			transaction.rollback();
			session.close();
		} finally {
			session.close();
		}

		return flag;
	}

	@SuppressWarnings("unchecked")
	public List<UserEntity> getUsers(int userId) {
		Session session = null;
		Transaction transaction = null;
		List<UserEntity> users = null;

		try {
			session = this.sessionFactory.openSession();
			transaction = session.beginTransaction();

			if(userId == 0) {
				users = (List<UserEntity>) session.createQuery("from UserEntity").list();
			} else {
				users = (List<UserEntity>) session.createQuery("from UserEntity where id = " + userId).list();
			}			

			transaction.commit();			

		} catch(Exception e) {
			e.printStackTrace();
			transaction.rollback();
			session.close();
		} finally {
			session.close();
		}
		return users;
	}

	public boolean editUser(UserEntity userEntity) {
		Session session = null;
		Transaction transaction = null;
		boolean flag = false;

		try {
			session = this.sessionFactory.openSession();
			transaction = session.beginTransaction();

			session.update(userEntity);		

			transaction.commit();

			flag = true;
		} catch(Exception e) {
			e.printStackTrace();
			transaction.rollback();
			session.close();
		} finally {
			session.close();
		}

		return flag;
	}

	public boolean deleteUser(int userId) {
		Session session = null;
		Transaction transaction = null;
		boolean flag = false;

		try {
			session = this.sessionFactory.openSession();
			transaction = session.beginTransaction();

			UserEntity userEntity = new UserEntity();
			userEntity.setId(userId);

			session.delete(userEntity);		

			transaction.commit();

			flag = true;
		} catch(Exception e) {
			e.printStackTrace();
			transaction.rollback();
			session.close();
		} finally {
			session.close();
		}

		return flag;
	}

}
Now It is time for controller to come in action.

MainController.java

package com.ajse.controllers;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.ajse.dao.UserDao;
import com.ajse.entities.UserEntity;

@Controller
public class MainController {
	
	@Autowired
	@Qualifier("userDaoImpl")
	private UserDao userDao;
	
	public MainController() {
		
	}

	@RequestMapping(value = "/", method = RequestMethod.GET)
	public String homePage() {
		return "index";
	}
	
	@RequestMapping(value = "/addNew", method = RequestMethod.POST)
	@ResponseBody
	public String addUser(@ModelAttribute("userEntity") UserEntity userEntity) {
		boolean res = userDao.addUser(userEntity);
		if(res) {
			return "1";
		} else {
			return "0";
		}		
	}
	
	@RequestMapping(value = "/editUser", method = RequestMethod.POST)
	@ResponseBody
	public String editUser(@ModelAttribute("userEntity") UserEntity userEntity) {
		boolean res = userDao.editUser(userEntity);
		if(res) {
			return "1";
		} else {
			return "0";
		}		
	}
	
	@RequestMapping(value = "/getUsers", method = RequestMethod.POST)
	@ResponseBody
	public List<UserEntity> getUsers(@ModelAttribute("userId") int userId) {
		List<UserEntity> users = userDao.getUsers(userId);
		return users;
	}
	
	@RequestMapping(value = "/deleteUser", method = RequestMethod.POST)
	@ResponseBody
	public String deleteUser(@ModelAttribute("userId") int userId) {
		boolean res = userDao.deleteUser(userId);
		
		if(res) {
			return "1";
		} else {
			return "0";
		}	
	}

	public UserDao getUserDao() {
		return userDao;
	}

	public void setUserDao(UserDao userDao) {
		this.userDao = userDao;
	}
}


Our back end part is complete.
Now we need to configure AngularJS and RequireJS for that purpose. You can follow this tutorial for basic AngularJS and RequireJS configuration. It will help you understand Module loading and AngularJS configuration.


Let’s look our front end directory structure :






Now, first we will configure our states with the help of $stateProvider in AngularJS UI Router.

static/app/moduels/Homepage/config/config.js
'use strict';

define(['app'], function(app) {
	app.config(['$stateProvider', function($stateProvider) {

		$stateProvider
		     .state('home', {
		    	url : '/',
		    	templateUrl : '/AngularJSExamples/static/app/modules/Homepage/views/home.html',
		    	controller : 'HomepageCtrl'
		     })
		     .state('addNew', {
		    	url : '/addNew',
		    	templateUrl : '/AngularJSExamples/static/app/modules/Homepage/views/addnew.html',
		    	controller : 'HomepageCtrl'
		     })
		     .state('edit', {
		    	url : '/edit/:id',
		    	templateUrl : '/AngularJSExamples/static/app/modules/Homepage/views/edit.html',
		    	controller : 'EditUserCtrl'
		     });
	}]);
	console.log("Homepage Config loaded..");
});
After state, we need to create front end service that can be used and injected to different controller so that we don’t need to repeat our code again and again for the same purpose instead we can inject that service in our controller and use that service.

static/app/moduels/Homepage/services/service.js
'use strict';

define([ 'app' ], function(app) {
	app.service('userService', [ '$http', function($http) {
		return {
			newUser : function(userData) {
				var url = '/AngularJSExamples/addNew';
				var data = {
					name : userData.name,
					email : userData.email,
					website : userData.website
				};

				return $http({
					url : url,
					data : $.param(data),
					method : 'POST',
					headers : {
						"Content-Type" : "application/x-www-form-urlencoded"
					}
				});
			},

			editUser : function(userData) {
				var url = '/AngularJSExamples/editUser';
				var data = {
					id : userData.id,
					name : userData.name,
					email : userData.email,
					website : userData.website
				};

				return $http({
					url : url,
					data : $.param(data),
					method : 'POST',
					headers : {
						"Content-Type" : "application/x-www-form-urlencoded"
					}
				});
			},

			getUsers : function(userData) {
				var url = '/AngularJSExamples/getUsers';
				var data = {
					userId : userData
				};

				return $http({
					url : url,
					data : $.param(data),
					method : 'POST',
					headers : {
						"Content-Type" : "application/x-www-form-urlencoded"
					}
				});
			},

			deleteUser : function(userData) {
				var url = '/AngularJSExamples/deleteUser';
				var data = {
					userId : userData
				};

				return $http({
					url : url,
					data : $.param(data),
					method : 'POST',
					headers : {
						"Content-Type" : "application/x-www-form-urlencoded"
					}
				});
			}
		};
	} ]);
});
Now we can create controller, we have two controller here. One controller will handle actions from the home screen and second controller will handle actions from edit page.

static/app/moduels/Homepage/controllers/controller.js
'use strict';

define(['app'], function(app) {
	app.controller('HomepageCtrl', ['$scope', '$state', '$window', '$rootScope', '$stateParams', 'userService',function($scope, $state, $window, $rootScope, $stateParams, userService) {	

		$scope.userData = null;
		$scope.userList = null;

		$scope.addNewUser = function() {
			userService.newUser($scope.userData)
			.success(function(response) {
				if(response == "1") {
					$window.alert("User added successfully.");
					$state.transitionTo('home');
				} else {
					$window.alert("Something goes wrong. Please try again.");
				}
			})
			.error(function(response) {
				$window.alert("Something goes wrong. Please try again.");
			});
		};

		$scope.deleteUser = function(id) {
			userService.deleteUser(id)
			.success(function(response) {
				if(response == "1") {
					$window.alert("User added successfully.");
					getUsers();
				} else {
					$window.alert("Something goes wrong. Please try again.");
				}
			})
			.error(function(response) {
				$window.alert("Something goes wrong. Please try again.");
			});
		};

		getUsers();

		function getUsers() {
			userService.getUsers(0)
			.success(function(response) {
				$scope.userList = response;
			})
			.error(function(response) {
				$window.alert("Error in service.");
			});
		};

		$scope.openAddNew = function() {
			$state.transitionTo('addNew');
		};

		$scope.closeAddNew = function() {
			$state.transitionTo('home');
		};

		$scope.edit = function(id) {
			$state.go('edit', {'id' : id});
		};

	}]);
	console.log("HomepageCtrl Controller loaded..");
});
static/app/modules/Homepage/controllers/editUserController.js
'use strict';

define(['app'], function(app) {
	app.controller('EditUserCtrl', ['$scope', '$state', '$window', '$rootScope', '$stateParams', 'userService',function($scope, $state, $window, $rootScope, $stateParams, userService) {

		$scope.userData = null;

		$scope.$on('$viewContentLoaded', function(){
			$scope.getUserOnId();
		});

		$scope.getUserOnId = function() {
			userService.getUsers($stateParams.id)
			.success(function(response) {
				$scope.userData = response[0];
			});
		};

		$scope.editUserDetails = function() {
			userService.editUser($scope.userData)
			.success(function(response) {
				if(response == "1") {
					$window.alert("User updated successfully.");
					$state.transitionTo('home');
				} else {
					$window.alert("Something goes wrong. Please try again.");
				}
			})
			.error(function(response) {
				$window.alert("Something goes wrong. Please try again.");
			});
		};

		$scope.closeAddNew = function() {
			$state.transitionTo('home');
		};

	}]);
	console.log("Edit User Controller loaded..");
});
Next step is to create our views. home.html
<div class="panel panel-default">
<div class="panel-heading">
		User Details
		<button ng-click="openAddNew();" class="btn btn-success btn-xs pull-right">Add</button></div>
<div class="panel-body">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Website</th>
<th>Actions</th>
</tr>
</thead>
<tbody ng-repeat="user in userList">
<tr>
<th scope="row">{{user.id}}</th>
<td>{{user.name}}</td>
<td>{{user.email}}</td>
<td><a href="{{user.website}}">{{user.website}}</a></td>
<td>
						<button ng-click="edit(user.id);" class="btn btn-success btn-xs">Edit</button>
						<button ng-click="deleteUser(user.id);" 							class="btn btn-danger btn-xs">Delete</button></td>
</tr>
</tbody>
</table>
</div>
</div>
addnew.html
<div class="panel panel-default">
<div class="panel-heading">Add New <button ng-click="closeAddNew();" class="btn btn-danger btn-xs pull-right">X</button></div>
<div class="panel-body">
<form class="form-horizontal">
<div class="form-group">
				<label class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
					<input type="text" class="form-control" ng-model="userData.name" placeholder="Name"></div>
</div>
<div class="form-group">
				<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
					<input type="text" class="form-control" ng-model="userData.email" placeholder="Email"></div>
</div>
<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">Web Site</label>
<div class="col-sm-10">
					<input type="text" class="form-control" ng-model="userData.website" placeholder="Website"></div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
					<button type="submit" ng-click="addNewUser();" class="btn btn-success">Add</button>
					<button type="reset" class="btn btn-default">Clear</button></div>
</div>
</form></div>
</div>
edit.html
<div class="panel panel-default">
<div class="panel-heading">
		Edit Details
		<button ng-click="closeAddNew();" 			class="btn btn-danger btn-xs pull-right">X</button></div>
<div class="panel-body">
<form class="form-horizontal">
<div class="form-group">
				<label class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
					<input type="text" ng-model="userData.name" class="form-control" 						placeholder="Name"></div>
</div>
<div class="form-group">
				<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
					<input type="text" ng-model="userData.email" class="form-control" 						placeholder="Email"></div>
</div>
<div class="form-group">
				<label class="col-sm-2 control-label">Web Site</label>
<div class="col-sm-10">
					<input type="text" ng-model="userData.website" class="form-control" 						placeholder="Website"></div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
					<button type="submit" ng-click="editUserDetails();" 						class="btn btn-success">Edit</button>
					<button type="reset" class="btn btn-default">Clear</button></div>
</div>
</form></div>
</div>
That’s it, project is ready to run now. You can also find the complete source code for this project on github AngularJSExamples



Related Post

2 thoughts on “CRUD Operation using AngularJS, RequireJS, Spring and Hibernate”

Leave a Reply

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