Angular es un framework de JavaScript, creado por Misko Hevery y mantenido por Google. Esto es un modelo MVC (Controlador de Vista de Modelo). Puedes visitar la página oficial para aprender más sobre esto.
En este momento, la última versión de Angular es 5.2.10. Hay primera generación 1.x y segunda generation 2.x, y las dos generaciones son totalmente diferentes en su estructura y métodos. No te preocupes si te sientes confundido sobre la versión, porque en este artículo usaremos la segunda versión 2.x.
Tabla de contenido
- Agregar un elemento (aprenda a enviar un formulario en Angular)
- Eliminar un elemento (aprenda a agregar un evento en Angular)
- Animación en Angular (aprenda a animar los componentes)
Prerrequisitos:
- Node.js
Revisa que node.js esté instalado en tu computador. Aprende más sobre instalación.
- npm
npm (administrador de paquetes de nodo) se instala con Node.js
Revisa la versión node.js:
node -v
npm:
npm -v
Angular-CLI
Deberías tener la última versión de Angular-CLI. Aprende más sobre aquí, y encuentra las instrucciones de instalación.
Instalar Angular-cli:
npm install -g @angular/cli
Y finalmente, deberías tener:
- Conocimiento básico de JavaScript
- Fundamentos de HTML y CSS
No es necesario tener ningún conocimiento de Angular.
Ahora que tenemos el entorno para ejecutar nuestra aplicación de Angular, !Comencemos¡
Creando nuestra primera aplicación
Usaremos angular-cli para crear y generar nuestros componentes. Generará servicios, enrutadores, componentes y directivas.
Para crear un nuevo proyecto Angular con Angular-cli, solo ejecuta:
ng new my-app
El proyecto se generará automáticamente. ¡Creemos nuestra aplicación de tareas pendientes!
ng new todo-app
Luego, abra los archivos en tu editor de texto. Yo uso Sublime, pero puedes escoger cualquier editor.
Así es como se ve la estructura de la aplicación:
No te preocupes si estás confundido sobre los archivos. Todo nuestro trabajo estará en la carpeta app. Contiene cinco archivos:
Nota: Angular 2 usa TypeScript, en que los archivos terminan con la extensión “.ts”.
Para crear una interfaz agradable para nuestra aplicación, usaremos la Framework Bootstrap 4.
Incluir bootstrap cdn en index.html:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
correr la aplicación en tu terminal:
ng serve
La aplicación correrá en http://localhost:4200/
¡¿Todo está bien?!
Ahora hagamos una estructuración HTML. Usaremos clases de Bootstrap para crear un formulario simple.
app.component.html:
<div class="container"> <form> <div class="form-group"> <h1 class="text-center text-primary">Todo App</h1> <div class="input-group-prepend"> <input type="text" class="form-control" placeholder="Add Todo" name="todo"> <span class="input-group-text">Add</span> </div> </div> </form></div>
En app.component.css:
body{ padding: 0; margin: 0;
}form{ max-width: 25em; margin: 1em auto;}
Para calcular el valor de entrada en Angular 2, podemos usar la directiva ngModel. Puedes insertar una variable como un atributo dentro del elemento de entrada.
<input type="text" #todo class="form-control" placeholder="Add Todo" name="todo" ngModel>
Para crear una variable como un atributo, usa # seguido por el nombre de la variable.
<input #myVariable type="text" name="text" ngModel>
// get the value of the Variable<p>{{myVariable.value}}</p>
Ahora obtén el valor de la variable “todo”:
<p>{{todo.value}}</p>
¡¿Todo está bien?!
Ahora tenemos que almacenar el valor capturado en la entrada. Podemos crear un arreglo vacío en app.component.ts dentro de la clase AppComponent:
export class AppComponent { todoArray=[] }
Luego tenemos que agregar un evento de clic a nuestro botón que empuja el valor capturado en “todoArray”.
app.component.html:
<span class="input-group-text" (click)="addTodo(todo.value)">Add</span>
En app.component.ts:
export class AppComponent { todoArray=[]
addTodo(value){ this.todoArray.push(value) console.log(this.todos) } }
Usa console.log(this.todoArray) para ver el valor de Array
Obtener datos de “todoArray”
Ahora tenemos que recuperar los datos guardados en “todosArray.” Usaremos *ngFor directive para recorrer el arreglo y extraer los datos.
app.component.html:
<div class="data"> <ul class="list-instyled"> <li *ngFor="let todo of todoArray">{{todo}}</li> </ul> </div>
Después de recuperar los datos:
Los datos ahora se recuperarán automáticamente cuando hagamos clic en el botón Agregar.
Diseñando la aplicación
Me gusta usar Google-fonts y los Íconos de Material, que son de uso gratuito.
Incluye las fuentes de Google-fonts dentro de app.component.css:
/*Google fonts*/@import url('https://fonts.googleapis.com/css?family=Raleway');
Y los íconos de materiales dentro de index.html:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Después de agregar algo de estilo a nuestra aplicación, esta se verá así:
Para usar los íconos de material:
<i class="material-icons>iconName</i>
Agrega los íconos “delete” y “add” en app.component.html:
// put add icon inside "input-group-text" div
<span class="input-group-text" (click)="addTodo(todo.value)"><i class="material-icons">add</i></span>
// and delete icon inside list item <li *ngFor="let todo of todoArray">{{todo}}<i class="material-icons">delete</i></li>
Para estilos en app.component.css:
/*Google fonts*/@import url('https://fonts.googleapis.com/css?family=Raleway');
body{ padding: 0; margin: 0;
}form{ max-width: 30em; margin: 4em auto; position: relative; background: #f4f4f4; padding: 2em 3em;}form h1{ font-family: "Raleway"; color:#F97300; }form input[type=text]::placeholder{ font-family: "Raleway"; color:#666; }form .data{ margin-top: 1em;}form .data li{ background: #fff; border-left: 4px solid #F97300; padding: 1em; margin: 1em auto; color: #666; font-family: "Raleway";}form .data li i{ float: right; color: #888; cursor: pointer;}form .input-group-text{ background: #F97300; border-radius: 50%; width: 5em; height: 5em; padding: 1em 23px; color: #fff; position: absolute; right: 13px; top: 68px; cursor: pointer;}form .input-group-text i{ font-size: 2em;}form .form-control{ height: 3em; font-family: "Raleway";}form .form-control:focus{ box-shadow: 0;}
Nuestra aplicación está casi lista, pero necesitamos agregar algunas funciones. Una función de Eliminación debería permitir a los usuarios hacer clic en el ícono Eliminación y eliminar un elemento. También sería genial tener la opción de ingresar un nuevo artículo con la clave de retorno, en lugar de hacer clic en el botón Agregar.
Eliminar elementos:
Para agregar la funcionalidad de eliminación, usaremos el método de arreglo "empalme" y un bucle for. Recorreremos “todoarray” y extraeremos el elemento que queremos eliminar.
Agrega un evento (clic) para eliminar el ícono y darle “todo” como parámetro:
<li *ngFor="let todo of todoArray">{{todo}} <i (click)="deleteItem(todo)" class="material-icons">delete</i></li>
En app.component.ts:
/*delete item*/ deleteItem(){ console.log("delete item") }
Cuando haces clic en Eliminar, esto debería aparecer en la consola:
Ahora tenemos que recorrer “todoArray” y empalmar el elemento en el que hicimos clic.
En app.component.ts:
/*delete item*/ deleteItem(todo){ for(let i=0 ;i<= this.todoArray.length ;i++){ if(todo== this.todoArray[i]){ this.todoArray.splice(i,1) } } }
El resultado:
¡¡¿Increible ?!!
Ingresando para agregar elementos
Podemos agregar un evento de envío de formulario:
(ngSubmit)="TodoSubmit()"
Necesitamos agregar la variable “#todoForm” al formulario y darle “ngForm” como valor. En este caso, solo tenemos un campo, por lo que obtendremos un solo valor. Si tenemos varios campos, el evento de envío devolverá los valores de todos los campos del formulario.
app.component.html
<form #todoForm= "ngForm" (ngSubmit)="todoSubmit(todoForm.value)"></form>
en app.component.ts
// submit Form todoSubmit(value:any){ console.log(value) }
Verifica la consola. Devolverá un objeto de valores:
Así que ahora tenemos que enviar el valor devuelto a "todoArray":
// submit Form todoSubmit(value:any){ if(value!==""){ this.todoArray.push(value.todo) //this.todoForm.reset() }else{ alert('Field required **') } }
¿Aquí estamos?. El valor se inserta sin necesidad de hacer clic en el botón Agregar, simplemente haciendo clic en "Enter":
Una cosa más. Para restablecer el formulario después de enviarlo, agregue el método incorporado "resetForm ()" para enviar el evento.
<form #todoForm= "ngForm" (ngSubmit)="todoSubmit(todoForm.value); todoForm.resetForm()" ></form>
El formulario se restablecerá después de cada envío ahora:
Agregar animaciones
Me gusta agregar un pequeño toque de animaciones. Para agregar animación, importe los componentes de animaciones en su app.component.ts:
import { Component,trigger,animate,style,transition,keyframes } from '@angular/core';
Luego agregue la propiedad de animaciones al decorador "@component":
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], animations:[ trigger("moveInLeft",[ transition("void=> *",[style({transform:"translateX(300px)"}), animate(200,keyframes([ style({transform:"translateX(300px)"}), style({transform:"translateX(0)"}) ]))]),
transition("*=>void",[style({transform:"translateX(0px)"}), animate(100,keyframes([ style({transform:"translateX(0px)"}), style({transform:"translateX(300px)"}) ]))]) ])
]})
Ahora los elementos tienen un buen efecto cuando se ingresan y eliminan.
Todo el código
app.component.ts
import { Component,trigger,animate,style,transition,keyframes } from '@angular/core';
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], animations:[ trigger("moveInLeft",[ transition("void=> *",[style({transform:"translateX(300px)"}), animate(200,keyframes([ style({transform:"translateX(300px)"}), style({transform:"translateX(0)"}) ]))]),
transition("*=>void",[style({transform:"translateX(0px)"}), animate(100,keyframes([ style({transform:"translateX(0px)"}), style({transform:"translateX(300px)"}) ]))]) ])
]})export class AppComponent { todoArray=[]; todo; //todoForm: new FormGroup()
addTodo(value){ if(value!==""){ this.todoArray.push(value) //console.log(this.todos) }else{ alert('Field required **') } }
/*delete item*/ deleteItem(todo){ for(let i=0 ;i<= this.todoArray.length ;i++){ if(todo== this.todoArray[i]){ this.todoArray.splice(i,1) } } }
// submit Form todoSubmit(value:any){ if(value!==""){ this.todoArray.push(value.todo) //this.todoForm.reset() }else{ alert('Field required **') } } }
app.component.html
<div class="container"> <form #todoForm= "ngForm"(submit)="todoSubmit(todoForm.value); todoForm.resetForm()" > <div class="form-group"> <h1 class="text-center ">Todo App</h1> <div class="input-group-prepend"> <input type="text" #todo class="form-control" placeholder="Add Todo" name="todo" ngModel> <span class="input-group-text" (click)="addTodo(todo.value)"> <i class="material-icons">add</i></span> </div> </div> <div class="data"> <ul class="list-unstyled"> <li [@moveInLeft] *ngFor="let todo of todoArray">{{todo}} <i (click)="deleteItem(todo)" class="material-icons">delete</i></li> </ul> </div> </form></div>
app.component.css
/*Google fonts*/@import url('https://fonts.googleapis.com/css?family=Raleway');
body{ padding: 0; margin: 0;
}form{ max-width: 30em; margin: 4em auto; position: relative; background: #f4f4f4; padding: 2em 3em; overflow: hidden;}form h1{ font-family: "Raleway"; color:#F97300; }form input[type=text]::placeholder{ font-family: "Raleway"; color:#666; }form .data{ margin-top: 1em;}form .data li{ background: #fff; border-left: 4px solid #F97300; padding: 1em; margin: 1em auto; color: #666; font-family: "Raleway";}form .data li i{ float: right; color: #888; cursor: pointer;}form .input-group-text{ background: #F97300; border-radius: 50%; width: 5em; height: 5em; padding: 1em 23px; color: #fff; position: absolute; right: 13px; top: 68px; cursor: pointer;}form .input-group-text i{ font-size: 2em;}form .form-control{ height: 3em; font-family: "Raleway";}form .form-control:focus{ box-shadow: 0;}
¿ Hemos terminado ?. Puedes encontrar los archivos y el código en Github.
Mira el Demo
Conclusión
Angular es más fácil de lo que crees. Angular es una de las mejores bibliotecas de JavaScript y tiene un gran soporte y una buena comunidad. También tiene herramientas que hacen que trabajar con Angular sea rápido y fácil, como Angular-cli.
Suscríbete en esta lista de mail para aprender más sobreAngular.
SaidHayani@ (@hayanisaid1995) | Twitter
Los últimos tweets de SaidHayani@ (@hayanisaid1995). #Web_Developer /#Frontend / #Back_end(#PHP &…twitter.com
Traducido del artículo de Said Hayani - freeCodeCamp.org - Learn how to create your first Angular app in 20 minutes (freecodecamp.org)