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>