Get it on Google Play

Ejemplo de uso de AngularJS + PHP

17-06-2014
 

AngularJS es un Framework Javascript para crear aplicaciones web mantenido por Google. Implementa el patrón MVC(Modelo-Vista-Controlador), nuevas directivas, uso de plantillas, componentes reutilizables, localización, validación de formularios entre otros.

AngularJS trabaja bien con otras tecnologías, es decir, que podemos usarlo conjuntamente con otras librerías o frameworks como JQuery o YUI. Además, la comunicación entre el cliente y el servidor es mediante JSON, con lo que podemos usar cualquier Framework/Libreria estándar en el servidor para implementar la lógica de negocio.

En el ejemplo que os he preparado, tenemos una aplicación web donde hay un formulario para dar de alta teléfonos. Los teléfonos se guardarán en la sesión del usuario. También utilizaremos un poco de Bootstrap que nos ayudará con la UI(User Interface). Aquí os paso un pequeño esquema:

AngularJS test application architecture

AngularJS test application architecture

La implementación de esto queda de la siguiente manera:

index.html – Vemos como la definición del HTML 5 estático.

<!doctype html>
<html ng-app="lostsysApp">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.11/angular.min.js"></script>
		<script src="app.js"></script>
	</head>
	<body ng-controller="mainController">
		<div class="jumbotron text-center">
			<h1>Angular Test</h1>
		</div>
		<div class="col-sm-8 col-sm-offset-2 text-center">
			<div class="form-group">
				<input type="text" ng-model="nom" placeholder="Contact Name" class="form-control input-lg text-center" />
			</div>
			<div class="form-group">
				<input type="text" ng-model="telefon" placeholder="Phone Number" class="form-control input-lg text-center" />
			</div>
			<div class="form-group">
				<button class="btn btn-primary btn-lg" ng-click="addNom()">Añadir</button>
			</div>

			<div ng-repeat="n in names">
				<p>
					{{n.nom}} ({{n.phone}}) 
					<a href="#" ng-click="delNom(n.nom)">[X]</a> 
				</p>
			</div>
		</div>
	</body>
</html>

app.js – Definimos la parte dinámica de nuestra aplicación.

var angularTodo = angular.module('lostsysApp', []);

function mainController($scope, $http) {
	$scope.names = [ ];

	$http.get('model.php')
        	.success(function(data) {
            		$scope.names = eval(data);
            		console.log(data)
        		})
        	.error(function(data) {
            		console.log('Error: ' + data);
	        });

	$scope.addNom = function() {
		$http.post('model.php', { op: 'append', nom: $scope.nom, telefon: $scope.telefon } )
	        	.success(function(data) {
        	    		$scope.names = eval(data);
        	    		console.log(data)
        			})
        		.error(function(data) {
        	    		console.log('Error: ' + data);
		        });

		$scope.nom="";
		$scope.telefon="";
		}

	$scope.delNom = function( nom ) {
		if ( confirm("Seguro?") ) {
			$http.post('model.php', { op: 'delete', nom: nom } )
				.success(function(data) {
			    		$scope.names = eval(data);
			    		console.log(data)
					})
				.error(function(data) {
			    		console.log('Error: ' + data);
				});
			}
		}

	}

model.php – Finalmente definimos la parte de servidor, con el modelo de nuestra aplicación.

<?php
session_start();
if ( !isSet($_SESSION['data']) ) $_SESSION['data']=array();

$data = json_decode(file_get_contents('php://input'), true);

if ( isSet( $data["op"] ) ) {
	if ( $data["op"]=="append" ) {
		$pos=count($_SESSION['data']);
		$_SESSION['data'][ $pos ]=array( 'nom'=>$data["nom"], 'phone'=>$data["telefon"] );
		}

	if ( $data["op"]=="delete" ) {
		for($i=0; $i<count($_SESSION['data']); $i++)
			if ( $_SESSION['data'][$i]["nom"]==$data["nom"] ) {
				unset($_SESSION['data'][$i]);
				$_SESSION['data']=array_values( $_SESSION['data'] );
				}
		}
	}

echo "names: ".json_encode( $_SESSION['data'] );
?>

El resultado final es una aplicación es esto:

AngularJS Test App

AngularJS Test App

En conclusión, AngularJS es un excelente Framework para crear aplicaciones web HTML5 que nos aporta una estructura robusta sobre la que desarrollar.

Comments

35 Responses to “Ejemplo de uso de AngularJS + PHP”
  1. Rodolfo says:

    No esta funcionando ese ejemplo o no me funciona a mi, sale error en app.js

  2. Hola Rodolfo,

    Puedes dar un poco mas de información, por ejemplo, el número de línea?

    Saludos,

  3. Rodolfo says:

    Me sale error en la linea 9 y donde está el siguiente codigo: console.log(data), luego en console de chrome me sale este error https://docs.angularjs.org/error/ngRepeat/dupes?p0=name%20in%20names&p1=string:%22, estoy investigando más de como hacerlo funcionar porque estoy comenzando en angular, saludos.

  4. Y eso te lo da nada mas empezar o cuando empiezas a entrar información. Tiene pinta que le estas enviando información duplicada.

  5. lucas says:

    No puedes mostrar un ejemplo y poner esa conclusion sin argumentar, me parece pesimo.

  6. Si puedo Lucas, es mi blog. Tu también podrías hacer comentarios mas constructivos…

  7. oscar says:

    lo recomendable es que subieras el repositorio a github

  8. Lucas Moyano says:

    muy bueno! muchas gracias!!

  9. Diego says:

    A mi me sirvió muchísimo tu Ejemplo Alberto Coronado, lo hice e incluso le implemente otras cosas y funciono de maravilla.
    Muchas gracias por el post.

  10. Luis says:

    Me funcionó a la primera, gracias por el ejemplo.

  11. David Salazar says:

    Saludos amigo, tu ejemplo es totalmente funcional, alguna recomendación para aprender AngularJS.

  12. David Salazar says:

    Se me olvidaba… Algun ejemplo con MySQL? osea AngularJS+PHP+mySQL

  13. De momento no, aunque no es muy difícil ampliar este. A ver si me animo en unos días.

  14. Albin says:

    Me correio a la primera, me parece un ejemplo basico para comprender la forma de trabajar, muchas gracias!

  15. Alejandro says:

    Funciono perfecto, solo que no se por que http.get y scope.addnom, la de get es solo para avisar en la consola sobre le resultado?

  16. Hola Alejando,

    El ‘http.get’ es porque queremos hacer una petición al servidor de tipo get, normalmente se hacen peticiones tipo get para leer datos y post cuando quieres realizar alguna operación, por ejemplo guardar o eliminar.

    El tema de definir ‘$scope.addNom’, addNom es la función que se llama cuando pulsan el botón “Añadir”. Básicamente estamos añadiendo un método que será llamado desde la vista.

    Saludos,

  17. sergio says:

    muy bueno, claro que si funciona, lo que pasa que queremos que funcione así tal como nos muestran el código sin de perdido revisar las rutas que es el único problema que podemos tener, saludos.

  18. lerkis says:

    compañero al igual que el compañero de arriba ambien me sale error en la linea 9 si me puedes ayudar porque pasa esto

  19. Hola Lerkis,

    Pues te debería funcionar. En la línea 9 solamente esta el escribir por consola, puedes eliminarlo, si quieres.

    Saludos,

  20. luis says:

    Hola, una consulta, con respecto a la seguridad de los datos. cualquier usuario avanzado podría entrar y ver la configuración de mi php o mas aun podria ver la del js y llamar los datos desde otro sitio?

  21. Hola Luis,

    Esto tiene la misma seguridad que cualquier desarrollo web. Es decir, que corre de tu cuenta si lo que desarrolles sobre esto debe tener en cuenta los permisos del usuario, etc.

    Saludos,

  22. Alex says:

    Buen ejemplo, pero donde se almacena esta informacion?
    si no tiene ni base de datos, jaja la verdad no entiendo donde se almacena

  23. Alex! Se almacena en la sesión 🙂

  24. David says:

    Hola,

    supongo que el problema que tienen con la línea 9 es porque están ejecutando el test fuera de un servidor PHP

    Un saludo

  25. Alejandro Cabrera says:

    Un ejemplo genial para hacernos a la idea de la potente de este framework.

  26. Eduardo says:

    Muy bueno!! Saludos!

  27. Cristobal Lopez says:

    Hola amigo, me surge un error: Al hacer la llamada post dentro del controller en Angular me imprime en consola esto
    Error: Cannot POST /contacto.php, pienso que se debe a la estructura de mi directorio me podrías explicar como se debe manejar el directorio.

    MyWebsite/

    |–app/
    | |–index.html
    | |
    | |–contacto/
    | | |–contacto.html
    | | |–contacto.js
    | | |–mensaje.php
    | |
    | |

  28. RicardoGeek says:

    “`eval(data)“`

    eval es malvado!!!! usar mejor JSON.parse
    si corremos eval, podria meter una función malvada en mi nombre y bueno… ya saben el resto!!!!

  29. Muy buen apunte Ricardo!!!!

  30. franck says:

    hola maigo..podrias poner el Codigo para poder descargar? por favor!!

  31. Diego Diaz says:

    Albert, excelente aporte! ya estoy modificando para reemplazar las sessiones por mysql. Esta es mi base para generar algo mas grande, la verdad que no encontraba algo de codigo simple y practico para implementar el binding doble de angular. Mil gracias!

  32. Hernan says:

    Me vino muy bien este ejemplo, alguna idea de como leer parámetros pasados vía httpget? no le encuentro la vuelta (soy nuevo en PHP), muchas gracias!

  33. Mario Cortes says:

    Hola, veo que se hace una asignación var angularTodo = angular.module(‘lostsysApp’, []);
    pero no veo que se use la variable angularTodo

  34. Mario Cortes says:

    También estoy tratando de hacer el ejemplo usando mySql pero me marca un error que no tengo idea a que se deba:
    Error: [$controller:ctrlreg] http://errors.angularjs.org/1.6.4/$controller/ctrlreg?p0=mainController
    at angular.min.js:6
    at angular.min.js:93
    at ba (angular.min.js:76)
    at n (angular.min.js:68)
    at g (angular.min.js:61)
    at g (angular.min.js:62)
    at angular.min.js:61
    at angular.min.js:22
    at m.$eval (angular.min.js:148)
    at m.$apply (angular.min.js:149)

    Agradecería mucho la ayuda ya que apenas estoy empezando a usar angular. Gracias de antemano

  35. Mario Cortes says:

    Hola de nuevo…..
    Ya encontré lo que estaba fallando, lo dejé así usando la variable angularTodo:

    var angularTodo = angular.module(‘lostsysApp’, []);

    angularTodo.controller(‘mainController’, function ($scope, $http) {…….

    También me marcaba que .success() no se reconocía como función, por lo que investigué un poco y encontré que ya está deprecada, así que encontré la alternativa y me quedó como sigue:

    $http.get(‘procesa.php’)
    .then(function (response) {
    $scope.names = eval(response);
    console.log($scope.names);
    return false;
    }, function (response) {
    console.log(‘Error: ‘ + response);
    });

    En vez de usar .success uso ahora .then y me funciona correctamente todo aún con base de datos.

    Saludos.

Leave a Reply

© Albert Coronado Calzada