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.

hq0cvYK9ku0jw7BckSTe1bQyVtDh2PVSZeMu

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:

ptdxoFrfKYkg1O7Kjzfm2vfQxlsrM5ggfSoR

No te preocupes si estás confundido sobre los archivos. Todo nuestro trabajo estará en la carpeta app. Contiene cinco archivos:

icEs5nlfczvJiEgX7j4EUCcevZFnKCOXocqD
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/

gwml-v8qHlrNVra-yfJOZH1Kdqx2oRnwrWYF

¡¿Todo está bien?!

Ahora hagamos una estructuración HTML. Usaremos clases de Bootstrap para crear un formulario simple.

ioyTYMvqC7Izykcin7U1OAEE9pIO7Tn9CWGB

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.

9x5e9yWah1OqD5OpVTfMAxz5fzEjn1e3jLjD
<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”.

YiBkAM7A8VteVRe3Ok0KBWaVscJ1QRk9ciL9

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:

IdbbBDKFN29rGZisR0ygAKwKdTUPexZ7-hYD

Los datos ahora se recuperarán automáticamente cuando hagamos clic en el botón Agregar.

Yyeff6WTcxF-b39yi6zMtpe9UWzjZ9NhZBWs

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í:

Bb8mPSgYnJuwIEHA3-cRc8yR0q1YId96ppmi

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:

nWS2NAJXn4iaQL6vqGwiaUBVSY64XUxerN4w

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:

bJVYplDX6DgQ39ZaN3eYhBcenCi86fqxbov0

¡¡¿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:

HBlkb6jnVHcHyTGJ1lEff1dcy2ok-T7glk42

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":

OWpohuUVC7SjOCGfavFkTnoU2D1sR1CgQj8r

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:

0w5t7IIt4Wj4KBolctdZBNFQrwr4ucCLL6or

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.

4ugLJyeDD6oGnKg6jc47KqRc692d4H376pqr

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)