En cualquier aplicación web, necesitamos guardar, actualizar, insertar y obtener datos hacia y desde una base de datos. AngularJS es un marco JavaScript MVC o Model-View-Controller desarrollado por Google. Ayuda a los desarrolladores a crear aplicaciones front-end bien estructuradas, fácilmente comprobables y mantenibles.
Características Los conceptos importantes en Angular JS Library se dan a continuación:
- Concepto
- Modelo
- Directivas
- Modelo
- Alcance
- Expresiones
- Compilador
- Filtrar
- El enlace de datos
- Controlador
- Módulo
- Servicio
Necesidad de la explicación de AngularJS Framework con un ejemplo básico Con las directivas de los elementos y atributos HTML, las páginas web dinámicas se crean fácilmente agregando codificación adicional. AngularJS es bastante útil para mostrar datos de una base de datos. Los datos proporcionados deben estar en formato JSON. Veamos un ejemplo de ello. Los datos están en MySQL y en el lado del servidor, PHP interactúa con MySQL y obtiene los datos en formato JSON. Angular JS muestra la salida. Con el ejemplo básico a continuación, veamos en detalle sobre Angular JS SQL.
Ejemplo:
<html>
<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>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<body>
<div ng-app="empApp"
ng-controller="employeeCtrl">
<table>
<tr ng-repeat="output in names">
<td>{{ output.Name }}</td>
<td>{{ output.Country }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module("empApp", []);
app.controller(
"employeeCtrl", function ($scope, $http) {
$http.get(
"employee_mysql.php").then(function (response) {
$scope.names = response.data.records;
});
});
</script>
</body>
</html>
Explicación: La directiva ng-app es un punto de partida. Aquí «empApp» se da en ng-app, aquí se inicia la inicialización y compila la plantilla HTML ng-controller se usa para especificar un controlador en el elemento HTML. Este controlador agregará comportamiento o mantendrá los datos en ese elemento HTML y sus elementos secundarios Código del servidor PHP y MySQL Lo principal aquí es que la salida debe estar en formato JSON
Código de servidor PHP y MySQL:
<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
$connection = new mysqli("myServer",
"<username>",
"<password>",
"<dbname>");
$result = $connection->query(
"SELECT EmployeeName, EmployeeCity,
EmployeeCountry FROM Employees");
$output = "";
while ($rs = $result->fetch_array(MYSQLI_ASSOC)) {
if ($output != "") {
$output = ", ";
}
$output .= '{"Name":"' . $rs["EmployeeName"] . '", ';
$output .= '"City":"' . $rs["EmployeeCity"] . '", ';
$output .= '"Country":"' .
$rs["EmployeeCountry"] . '"}';
}
$output = '{"records":[' . $output . ']}';
$connection->close();
echo $output;
?>
Suponga que la tabla Empleados tiene 6 registros y están en MySQL. El código PHP recupera los datos de MySQL en formato JSON y angular JS muestra el resultado.
Producción:
Código HTML:
<!DOCTYPE html>
<html>
<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>
<table>
<tr>
<td>Avinash</td>
<td>USA</td>
</tr>
<tr>
<td>Aisha</td>
<td>UK</td>
</tr>
<tr>
<td>Emma</td>
<td>Australia</td>
</tr>
<tr>
<td>Shreyas</td>
<td>India</td>
</tr>
<tr>
<td>Rachel</td>
<td>USA</td>
</tr>
<tr>
<td>Shravan</td>
<td>India</td>
</tr>
</table>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por priyarajtt y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA