Listar datos con Angular (1.4.8), MySQL y PHP

Nube Colectiva

hace 8 años

En esta página:

Demo Github

Demo Github

Si necesitas listar registros desde una base de datos MySQL con Angular JS, lo podemos hacer con el servicio $htpp, este servicio envía una petición al servidor y este nos devuelve lo solicitado. Para este tutorial estoy usando angular 1.4.8 y tengo pensado hacerlo con la versión 2 de Angular mas adelante. Bueno vamos al tutorial.

Primero creamos la vista de nuestro modulo, le asignamos un nombre a nuestra aplicación e instanciamos al nuestro controllador


<!-- 
Doy un nombre a mi aplicacion, la llamo 'listarRegistros'
Instancio el Controllador 'postresController'
-->
<div ng-app="listarRegistros" ng-controller="postresController">

<!-- 
Creamos una tabla de la siguiente manera para listar los registros: 
-->

   <table class="table table-striped">
      <thead>
         <tr>
            <th>Nombre</th>
            <th>Precio</th>
            <th>Stock</th>
         </tr>          
      </thead>
      <tbody>
         <tr ng-repeat="x in names">
            <td>{{ x.Nombre }}</td>
            <td>S/. {{ x.Precio }}</td>
            <td>{{ x.Stock }} unidades</td>
         </tr>
      </tbody>
   </table> 
           
</div>

<!--

Doy un nombre a mi aplicacion, la llamo 'listarRegistros'

Instancio el Controllador 'postresController'

-->

<!--

Creamos una tabla de la siguiente manera para listar los registros:

-->

<thead>

<tr>

<th>Nombre</th>

<th>Precio</th>

<th>Stock</th>

</tr>

</thead>

<tbody>

<td>{{ x.Nombre }}</td>

<td>S/. {{ x.Precio }}</td>

<td>{{ x.Stock }} unidades</td>

</tr>

</tbody>

</table>

</div>

Listo ya tenemos nuestra vista creada, ahora vamos a crear el codigo javascript en angular:


<script type="text/javascript">
   // Creamos la variable 'app' y le damos el nombre del modulo
   var app = angular.module('listarRegistros', []);

   // Creamos el controllador 'postresController'
   app.controller('postresController', function($scope, $http) {

   // Mediante el servicio $http hacemos una petición 'get' a un archivo PHP que nos
      devuelve los registros de la base de datos en formato JSON
   $http.get("archivo.php")
     .then(function (response) {$scope.names = response.data.records;});
   });       
</script>

// Creamos la variable 'app' y le damos el nombre del modulo

var app = angular.module('listarRegistros', []);

// Creamos el controllador 'postresController'

app.controller('postresController', function($scope, $http) {

// Mediante el servicio $http hacemos una petición 'get' a un archivo PHP que nos

devuelve los registros de la base de datos en formato JSON

$http.get("archivo.php")

.then(function (response) {$scope.names = response.data.records;});

});

</script>

Ahora en nuestro ‘archivo.php’ colocamos lo siguiente:


<?php
  // Declaramos el header como aplicación json y que interprete los caracteres especial UTF-8
  header("Access-Control-Allow-Origin: *");
  header("Content-Type: application/json; charset=UTF-8");

  // Conectamos a la base de datos y hacemos un select
  $conn = new mysqli("localhost", "usuario", "password", "basededatos");

  $result = $conn->query("SELECT * FROM tabla");

  $outp = "";
  
  // Formateamos nuestro JSON
  while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
      if ($outp != "") {$outp .= ",";}
      $outp .= '{"Nombre":"'  . $rs["nombre"] . '",';
      $outp .= '"Precio":"'   . $rs["precio"]        . '",';
      $outp .= '"Stock":"'. $rs["stock"]     . '"}';
  }
  $outp ='{"records":['.$outp.']}';
  $conn->close();

  echo($outp);
?>

<?php

// Declaramos el header como aplicación json y que interprete los caracteres especial UTF-8

header("Access-Control-Allow-Origin: *");

header("Content-Type: application/json; charset=UTF-8");

// Conectamos a la base de datos y hacemos un select

$conn = new mysqli("localhost", "usuario", "password", "basededatos");

$result = $conn->query("SELECT * FROM tabla");

$outp = "";

// Formateamos nuestro JSON

while($rs = $result->fetch_array(MYSQLI_ASSOC)) {

if ($outp != "") {$outp .= ",";}

$outp .= '{"Nombre":"' . $rs["nombre"] . '",';

$outp .= '"Precio":"' . $rs["precio"] . '",';

$outp .= '"Stock":"'. $rs["stock"] . '"}';

}

$outp ='{"records":['.$outp.']}';

$conn->close();

echo($outp);

Con esto ya podemos listar datos desde el servidor.

La ventaja de usar Angular JS para listar datos es que la respuesta es mas rápida, ya que usa javascript el cual contiene el navegador del cliente y hacer que el trabajo con angular fluya mas rápido.

Espero que sirva de mucho este tutorial y por favor Síguenos en las redes sociales, eso nos motiva a seguir adelante.