Java + AngularJS + MySQL - Conectar MySQL con AngularJS usando Java

May 21, 2014

Hoy durante el día me causo curiosidad un ejercicio que algunos de mis amigos estaban haciendo o que estaban pensando como realizarlo, el ejercicio se trataba básicamente de conectar una BD usando Java, pero formateando el resultado con AngularJS. Así que yo pensé en una arquitectura simple : En lugar que un JSP me regresara un documento HTML, porque no me regresaria un archivo JSON y asi ya lo puedo consumir con AngularJS y formatearlo muy simple.

Para esto utilizare MySQL, JSP y por supuesto AngularJS. Primeramente necesitaremos crear la BD con algunos registros:

mysql> CREATE TABLE Usuarios (Nombre VARCHAR(50), Edad INTEGER);
Query OK, 0 rows affected (0.35 sec)

mysql> INSERT INTO Usuarios VALUES ('Carlos',22);
Query OK, 1 row affected (0.18 sec)

mysql> INSERT INTO Usuarios VALUES ('Gustavo',45);
Query OK, 1 row affected (0.07 sec)

mysql> INSERT INTO Usuarios VALUES ('Luis',5);
Query OK, 1 row affected (0.00 sec)

Ahora necesitaremos un proyecto Web, podemos usar NetBeans o eclipse:

Despues necesitaremos nuestra clase para conectar a la BD:

 package com.brion.DAO;

import java.sql.*;

public class DBConnection {

    private Connection connection = null;
   
    public DBConnection(){
        try{
            //obtenemos el driver de para mysql
            Class.forName("com.mysql.jdbc.Driver");
            //obtenemos la conexión
            connection = DriverManager.getConnection

              ("jdbc:mysql://localhost/BLOG","root","PASSWORD");
           
            if(connection != null){
                System.out.println("Connection Ok!");
            }
        }catch(Exception ex){
            System.out.println(ex.getMessage());
        }
    }
   
    public Connection getConnection(){
        return connection;
    }
   
    public void closeConnection(){
        connection=null;
    }
}

Bien ahora necesitaremos otra clase la cual nos regrese los datos de la Tabla (comunmente llamadas clases DAO - Data Access Object). Esta clase nos regresara un String en cual tendra la forma de un objeto JSON:

 package com.brion.DAO;
import java.sql.*;

public class UsuariosDAO {
   
    public String result;
   
    public UsuariosDAO(){
        DBConnection con=new DBConnection();
        try{
            Statement query =

                con.getConnection().createStatement();
            ResultSet rs=

                query.executeQuery("SELECT * FROM Usuarios");
           
            result="{ Usuarios = [";
           
            boolean flag=false;
           
            while(rs.next()){
                if(flag){
                    result+=",{ \"Nombre\" : \""+rs.getString(1)+

                    "\", \"Edad\" : \""+rs.getString(2)+"\"}\n";
                }else{
                    result+="{ \"Nombre\" : \""+rs.getString(1)+

                    "\", Edad : \""+rs.getString(2)+"\"}\n";
                    flag=true;
                }
            }
           
            result+="]}";
           
            System.out.println(result);
        }catch(Exception ex){
            System.out.println(ex.getMessage());
        }
    }
}

Ahora nuestro archivo JSP, el cual invocara nuestra clase previamente creada:

<%@ page language="java" contentType="application/json" %>

<%@ page import="com.brion.DAO.*" %>
<%
    UsuariosDAO users=new UsuariosDAO();
    out.println(users.result);
%>

Como podemos ver hemos puesto un header de tipo JSON, esto nos indica que lo que regresa nuestro archivo sera tratado como un Objeto JSON. Bien ahora crearemos nuestro archivo HTML, el cual invocara a nuestro archivo JSP que regresara un objeto JSON:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UT

F-8">
<title>Java + AngularJS + MySQL"</title>
</head>
<body ng-app="app" ng-controller="mainCtrl">
    {{saludo}}
    <p ng-repeat="user in users">Nombre : {{user.Nombre}}, Eda

d : {{user.Edad}}</p>
    <script type="text/javascript"

src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/

angular.js"></script>
    <script>
        var myApp=angular.module("app",[]);
       
        myApp.factory("jsonObject",function($http){
            return $http.get("getProducts.jsp");
        });
       
        myApp.controller("mainCtrl",function($scope,jsonObject){
            $scope.saludo="Java + AngularJS + MySQL";
           
            jsonObject.success(function(data){
                console.log(data.Usuarios);
                $scope.users=data.Usuarios;
            });
        });
    </script>
</body>
</html>

Bien chavos hecho esto, tendremos un resultado como el siguiente: