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` (
  `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;
  }

}

Servlet for database connectivity with MYSQL and convert data in JSON format.(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="http://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>

 

 

 

 

 

 

 

4 Comments

Add a Comment

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

1 × 2 =