AngularJS application with MYSQL database using java(Servlet)

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.

In this tutorial, I am going to show you how to connect angularJS with MySQL database.

We are going to follow some simple step for develope complete angularJS application with MySQL database.

 Create a database with name “mydb” and table name “user”.

CREATE TABLE `mydb`.`user` (
  `uname` VARCHAR(45) NULL,
  `upass` VARCHAR(45) NULL,
  `email` VARCHAR(45) NULL,
  PRIMARY KEY (`uid`));

Java model class for the user(

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; = 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) { = email;

Database Connection Class(

package com.model;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;

public class Mydb {
  Connection con;
  public Connection getCon(){
    try {
      con = DriverManager.getConnection("jdbc:mysql://localhost:3306/mydb", "root", "root");
    } catch (ClassNotFoundException e) {
      // TODO Auto-generated catch block
    } catch (SQLException e) {
      // TODO Auto-generated catch block
    return con;


Servlet for database connectivity with MYSQL and convert data in JSON format.(

       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 ( {
                   User userobj = new User(rs.getString("uname"), rs.getString("upass"), rs.getString("email"));
             JSONArray  arrayObj = new JSONArray(al);
           String json = new Gson().toJson(arrayObj);
           } catch (SQLException ex) {
               Logger.getLogger(AngularJsServlet.class.getName()).log(Level.SEVERE, null, ex);


Angular JS application (index.html).

        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src=""></script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $http) {
  // email = $;
  // psw = $scope.psw;
    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 =;
      $scope.statuscode = response.status;

    }, function myError(response) {
      $scope.myRes = response.myArrayList;

<div ng-app="myApp">
        <div ng-controller="myCtrl">
            <div ng-repeat="x in myRes">
                <h3>{{ "    " "    "}}</h3>









Add a Comment

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

1 × 2 =