• react.png
  • angular.png
  • node.png
  • html5.png
  • php.png

Aprende AngularJS desde cero - 7 Formularios

angular.png

Buen día chicos, el día de hoy vamos a continuar con nuestro “Curso Aprende AngularJS desde cero”. Hoy trabajaremos con formularios haciendo uso de AngularJs, en especial veremos como publicar comentarios por medio de un formulario. 

Tenemos un formulario HTML con sus respectivos elementos (Un select,  un textarea, un input y un botón), nuestro formulario en el explorador se vera así:

 

formularioAngularjs.png

Si bien, también queremos que cuando el usuario este escribiendo su comentario el comentario tenga una vista previa en la página mientras el usuario lo va escribiendo. Lo que necesitamos es unir esta vista previa con las propiedades de los elementos del formulario, entonces ¿Cómo unimos esta vista previa con los elementos del formulario? Lo hacemos usando la directiva de AngularJs llamada ng-model.

¿Dónde colocaremos la directiva ng-model? La vamos a colocar en los elementos del formulario es decir en: < select ng-model="review.stars" >, < textarea ng-model="review.body" >,  etc.

AngularJs tiene la característica de binding (enlace) que sirve para hacer una unión entre unas cosas y otras. Suele mencionarse como Data binding (Enlace de datos). Otro termino importante que hace especial a Angular es el Two-way Data binding (doble enlace) que en términos generales lo que hace es que la información fluya desde el scope hacia la parte visual y también desde la parte visual hacia el scope. La directiva ng-model es Two-way Data binding.

Te dejo el código de nuestro ejemplo:

HTML

<!DOCTYPE html>
<html ng-app="tienda">
<head>
	<title>Aprende AngularJS desde cero - 7 Formularios</title>
</head>
<body ng-controller="tiendaCodejobs as latienda">
	<div ng-repeat="product in latienda.products" >
		<h1>{{product.name }}</h1>
		<h2>${{product.price}}</h2>
		<p>{{product.description}}</p>
		<button ng-show="product.canPurchase">Comprar</button>
		
		<ul>
<h4>Comentarios</h4>
<li ng-repeat="review in product.reviews">
	<blockquote>
		<b>stars: {{review.stars}}</b><br>
		{{review.body}}<br>
		<cite>by: {{review.author}}</cite>
	</blockquote>
</li>
		</ul>

            <!--  Formulario para escribir comentarios -->
            <form name="reviewForm">
              <!--  Vista en vivo -->
              	<ul>
              		<li>
		              <blockquote>
		                <strong>Stars: {{review.stars}} </strong><br>
		                {{review.body}}<br>
		                <cite>-{{review.author}}</cite>
		              </blockquote>
	              </li>
	            </ul>

              <h4>Enviar un comentario</h4>
              <fieldset>
                <select ng-model="review.stars" ng-options="stars for stars in [5,4,3,2,1]"  title="Stars">
                  <option value="">Rango del curso</option>
                </select>
              </fieldset>

              <fieldset class="form-group">
                <textarea ng-model="review.body" placeholder="Escribe un comentario sobre el curso" title="Review"></textarea>
              </fieldset>

              <fieldset>
                <input ng-model="review.author" type="email" placeholder="ejemplo@ejemplo.com" title="Email" />
              </fieldset>

              <fieldset>
                <input type="submit" value="Enviar comentario" />
              </fieldset>
            </form>
	</div>
<script type="text/javascript" src="lib/angular.min.js"></script>
<script type="text/javascript" src="controllers/controllerform.js"></script>
</body>
</html>

JS

// Encerrar nuestro javascript en paréntesis es buen hábito.
(function() { 
	var app = angular.module('tienda', []); // Declaramos un modulo y el nombre de la aplicación "tienda"

	app.controller('tiendaCodejobs', function(){ // Declaramos el controlador llamado "tiendaCodejobs"
		this.products = cursos; // Establecer nuestro propiedad (product) igual al objeto.
	});

	var cursos = [ // Esto es un array
		{ // Declaramos el objeto.
		name: 'CursoAngularJS',
		price: 45,
		description: 'Este es un curso de AngularJS.',
		canPurchase: true,
		reviews: [{
stars: 5,
body: "Este curso me encanta.",
author: "telecristy"
}, {
stars: 1,
body: "Este curso no me gusta.",
author: "czantany"
}]
		}, {
		name: 'CursoJQuery',
		price: 30,
		description: 'Este es un curso de JQuery.',
		canPurchase: true,
		reviews: [{
stars: 4,
body: "Este curso deberia ser gratis.",
author: "czantany"
},{
stars: 3,
body: "Este curso es bueno.",
author: "telecristy"
}]
	}];
})();

Así se ve nuestro ejemplo en el explorador cuando el usuario está escribiendo su comentario sobre el curso puede verse la vista previa de su comentario en la página:

comentario.png


@telecristy.

 

 

0/1000

Necesitas conectarte ó registrarte para comentar