Albert CoronadoAngularJS 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
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
En conclusión, AngularJS es un excelente Framework para crear aplicaciones web HTML5 que nos aporta una estructura robusta sobre la que desarrollar.
No esta funcionando ese ejemplo o no me funciona a mi, sale error en app.js
Hola Rodolfo,
Puedes dar un poco mas de información, por ejemplo, el número de línea?
Saludos,
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.
Y eso te lo da nada mas empezar o cuando empiezas a entrar información. Tiene pinta que le estas enviando información duplicada.
No puedes mostrar un ejemplo y poner esa conclusion sin argumentar, me parece pesimo.
Si puedo Lucas, es mi blog. Tu también podrías hacer comentarios mas constructivos…
lo recomendable es que subieras el repositorio a github
muy bueno! muchas gracias!!
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.
Me funcionó a la primera, gracias por el ejemplo.
Saludos amigo, tu ejemplo es totalmente funcional, alguna recomendación para aprender AngularJS.
Se me olvidaba… Algun ejemplo con MySQL? osea AngularJS+PHP+mySQL
De momento no, aunque no es muy difícil ampliar este. A ver si me animo en unos días.
Me correio a la primera, me parece un ejemplo basico para comprender la forma de trabajar, muchas gracias!
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?
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,
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.
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
Hola Lerkis,
Pues te debería funcionar. En la línea 9 solamente esta el escribir por consola, puedes eliminarlo, si quieres.
Saludos,
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?
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,
Buen ejemplo, pero donde se almacena esta informacion?
si no tiene ni base de datos, jaja la verdad no entiendo donde se almacena
Alex! Se almacena en la sesión 🙂
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
Un ejemplo genial para hacernos a la idea de la potente de este framework.
Muy bueno!! Saludos!
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
| |
| |
“`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!!!!
Muy buen apunte Ricardo!!!!
hola maigo..podrias poner el Codigo para poder descargar? por favor!!
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!
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!
Hola, veo que se hace una asignación var angularTodo = angular.module(‘lostsysApp’, []);
pero no veo que se use la variable angularTodo
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
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.