Connecting angularJS application with MySQL database using java, servlet, and read data in JSON format. AngularJS database connectivity with MySQL is possible with the help of a server-side language Like PHP or servlet.
Connect AngularJS with MYSQL and java
In this tutorial, I am going to show you how to connect angularJS with the MySQL database and develop a simple angular application using Java.
Create a database with the name “mydb” and table name “user”
CREATE TABLE `mydb`.`user` ( `uid` INT NOT NULL AUTO_INCREMENT, `uname` VARCHAR(45) NULL, `upass` VARCHAR(45) NULL, `email` VARCHAR(45) NULL, PRIMARY KEY (`uid`));
Java model class for the user(User.java)
package com.model;
public class User {
private String uname;
private String upass;
private String email;
public User(String uname, String upass, String email) {
this.uname = uname;
this.upass = upass;
this.email = email;
}
public String getUname() {
return uname;
}
public void setUname(String uname) {
this.uname = uname;
}
public String getUpass() {
return upass;
}
public void setUpass(String upass) {
this.upass = upass;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
}
Database Connection Class(Mydb.java)
package com.model;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
public class Mydb {
Connection con;
public Connection getCon(){
try {
Class.forName("com.mysql.jdbc.Driver");
con = DriverManager.getConnection("jdbc:mysql://localhost:3306/mydb", "root", "root");
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return con;
}
}
AngularJsServlet.java
response.setContentType("application/json");
try (PrintWriter out = response.getWriter()) {
/* TODO output your page here. You may use following sample code. */
Mydb db = new Mydb();
Connection con = db.getCon();
ArrayList<User> al = new ArrayList<>();
try {
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery("select * from user");
while (rs.next()) {
User userobj = new User(rs.getString("uname"), rs.getString("upass"), rs.getString("email"));
al.add(userobj);
}
JSONArray arrayObj = new JSONArray(al);
String json = new Gson().toJson(arrayObj);
response.getWriter().write(json);
} catch (SQLException ex) {
Logger.getLogger(AngularJsServlet.class.getName()).log(Level.SEVERE, null, ex);
}
}
Angular JS application (index.html)
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
// email = $scope.email;
// psw = $scope.psw;
$http({
method: "GET",
url: "http://localhost:8080/AngularJSDemo/AngularJsServlet"
}).then(function mySuccess(response) {
// a string, or an object, carrying the response from the server.
$scope.myRes = response.data.myArrayList;
$scope.statuscode = response.status;
}, function myError(response) {
$scope.myRes = response.myArrayList;
});
});
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myCtrl">
{{statuscode}}
<div ng-repeat="x in myRes">
<h3>{{x.map.uname+ " " +x.map.upass+ " "+x.map.email}}</h3>
</div>
</div>
</div>
</body>
</html>
