AngularJS application with Oracle database Tutorial
I am going to show you how to connect angularJS with Oracle database
sing java-servlet and read data in JSON format.
CREATE TABLE employee
( empno number(10) NOT NULL,
ename varchar2(50)
NOT NULL,
job varchar2(50)
);
Java model class (Employee.java)
package com.devyan;
public class Employee {
int empno;
String ename;
String job;
public Employee(int empno, String ename, String job) {
this.empno = empno;
this.ename = ename;
this.job = job;
}
public int getEmpno() {
return empno;
}
public void setEmpno(int empno) {
this.empno = empno;
}
public String getEname() {
return ename;
}
public void setEname(String ename) {
this.ename = ename;
}
public String getJob() {
return job;
}
public void setJob(String job) {
this.job = job;
}
}
Database Connection Class ( Mydatabase.java)
package com.devyan;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
public class Mydatabase {
static Connection
con;
public static
Connection getCon(){
try {
Class.forName("oracle.jdbc.driver.OracleDriver");
con =
DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:xe","SYSTEM","oracle");
} catch (ClassNotFoundException e) {
// TODO
Auto-generated catch block
e.printStackTrace();
} catch
(SQLException e) {
// TODO
Auto-generated catch block
e.printStackTrace();
}
return con;
}
}
AngularJsServlet.java
It will used database connectivity with Oracle and convert data in JSON format
package com.devyan;
import java.io.*;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.*;
import javax.servlet.http.*;
import org.json.JSONArray;
import com.google.gson.Gson;
public class AngularJsServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json");
try {
/* TODO output your page here. You may use following sample code. */
// Mydb db = new Mydb();
PrintWriter out = response.getWriter();
Connection con = Mydatabase.getCon();
ArrayList<Employee> al = new ArrayList<Employee>();
try {
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery("select * from
HIBERNATE.Employee");
while (rs.next()) {
Employee userobj = new Employee(rs.getInt("empno"), rs.getString("ename"), rs.getString("job"));
al.add(userobj);
}
JSONArray arrayObj = new JSONArray(al);
String json = new Gson().toJson(arrayObj);
response.getWriter().write(json);
} catch (SQLException ex) {
System.out.println();
Logger.getLogger(AngularJsServlet.class.getName()).log(Level.SEVERE, null, ex);
}
} catch (Exception e) {
e.printStackTrace();
}
}
}
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">
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</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:8085/AngularJSDemo/devil"
}).then(function mySuccess(response) {
// a string,
or an object, carrying the response from the server.
$scope.myRes =
response.data.myArrayList;
console.log('Successful' +response);
$scope.statuscode = response.status;
}, function myError(response) {
$scope.myRes = response.myArrayList;
console.log('Failure' +response);
});
});
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<!--
{{statuscode}}-->
<div ng-repeat="x in
myRes">
<!-- <h3>{{x.map.empno + " : "
+x.map.ename+ " : "+x.map.job}}</h3>-->
</div>
<h3>AngularJS
application with Oracle database</h3>
<table>
<tr><td>Employee
No</td><td>Employee Name</td><td>Job</td></tr>
<tr ng-repeat="x in myRes">
<td>{{
x.map.empno }}</td>
<td>{{
x.map.ename | uppercase }}</td>
<td>{{
x.map.job }}</td>
</tr>
</table>
</div>
</div>
</body>
Posts
0 comments:
Post a Comment