Angular es un marco de JavaScript, creado por Misko Hevery y mantenido por Google. Es un MVC (Model View Vontroller). Puede visitar la página oficial para obtener más información al respecto.
En este momento, la última versión de Angular es 5.2.10. Existe la primera generación 1.xy la segunda generación 2.x, y las dos generaciones son totalmente diferentes en sus estructuras y métodos. No se preocupe si se siente confundido acerca de la versión, porque en este artículo usaremos la segunda generació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 angular (aprenda a animar los componentes)
Prerrequisitos:
- Node.js
Verifique si node.js está instalado en su computadora. Obtenga más información sobre la instalación.
- npm
npm (administrador de paquetes de nodos) está instalado con Node.js
Verifique la versión de node.js :
node -v
npm:
npm -v
Angular-CLI
Debería tener la última versión de Angular-CLI. Más información sobre angular CLI aquí , y encontrar las instrucciones para su instalación.
Instalar Angular-cli:
npm install -g @angular/cli
Y finalmente, deberías tener:
- Conocimientos básicos 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 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, simplemente ejecute:
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 su editor de texto. Yo uso texto Sublime, pero puedes elegir cualquier editor.
Así es como se ve la estructura de la aplicación:

No se preocupe si está confundido acerca de los archivos. Todo nuestro trabajo estará en la carpeta de la aplicación . Contiene cinco archivos:

Para crear una interfaz agradable para nuestra aplicación, usaremos Bootstrap 4 Framework.
Incluya bootstrap cdn en index.html :
Ejecute la aplicación en su terminal:
ng serve
La aplicación se ejecutará en // localhost: 4200 /

Todo está bien ?!
Ahora hagamos una estructuración HTML. Usaremos clases de Bootstrap para crear un formulario simple.

app.component.html :
Todo App
Add
En app.component.css :
body{ padding: 0; margin: 0;
}form{ max-width: 25em; margin: 1em auto;}
Para capturar el valor de entrada en Angular 2, podemos usar la directiva ngModel . Puede insertar una variable como atributo dentro del elemento de entrada.

Para crear una variable como atributo, use # seguido del nombre de la variable.
// get the value of the Variable{{myVariable.value}}
Ahora obtenga el valor de la variable "todo":
{{todo.value}}
Todo está bien ?!
Ahora tenemos que almacenar el valor capturado de la entrada. Podemos crear una matriz vacía 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 :
Add
En app.component.ts :
export class AppComponent { todoArray=[]
addTodo(value){ this.todoArray.push(value) console.log(this.todos) } }
Utilice console.log (this.todoArray) para ver el valor de la matriz
Obtener datos de "todoArray"
Now we have to fetch data stored in “todosArray.” We will use the *ngFor directive to loop through the array and extract the data.
app.component.html:
- {{todo}}
After fetching data:

The data will now be fetched automatically when we click the add button.

Styling the app
I like to use Google-fonts and Material-icons, which are free to use.
Include Google fonts inside app.component.css:
/*Google fonts*/@import url('//fonts.googleapis.com/css?family=Raleway');
And Material-icons inside index.html:
After adding some styling to our app, it will look like this:

To use Material icons:
iconName
Add “delete” and “add” icons in app.component.html:
// put add icon inside "input-group-text" div
add
// and delete icon inside list item {{todo}}delete
For styles in app.component.css:
/*Google fonts*/@import url('//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;}
Our app is almost done, but we need to add some features. A delete functionality should let users click a delete icon and delete an item. It would also be great to have the option to enter a new item with the return key, instead of clicking the add button.
Deleting items
To add the delete functionality, we will use the “splice” array method and a for loop. We will loop through “todoarray” and extract the item we want to delete.
Add a (click) event to delete icon and give it “todo” as parameter :
{{todo}} delete
In app.component.ts:
/*delete item*/ deleteItem(){ console.log("delete item") }
When you click delete, this should show up in the console:

Now we have to loop through “todoArray” and splice the item we clicked.
In 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) } } }
The result:

Awesome ?!!
Entering to add items
We can add a submit event to the form:
(ngSubmit)="TodoSubmit()"
We need to add the variable “#todoForm” to the form and give it “ngForm” as a value. In this case, we just have one field so we will just get a single value. If we have multiple fields, the submit event will return the values of all the fields in the form.
app.component.html
in app.component.ts
// submit Form todoSubmit(value:any){ console.log(value) }
Check the console. It will return an object of values:

So now we have to push the returned value to “todoArray”:
// submit Form todoSubmit(value:any){ if(value!==""){ this.todoArray.push(value.todo) //this.todoForm.reset() }else{ alert('Field required **') } }
Here we are ?. The value is inserted without needing to click the add button, just by clicking “enter”:

One more thing. To reset the the form after submitting, add the “resetForm()” build-in method to submit the event.
The form will reset after each submit now:

Adding animations
I like to add a little touch of animations. To add animation, import the animations components in your app.component.ts:
import { Component,trigger,animate,style,transition,keyframes } from '@angular/core';
Then add the animations property to “@component” decorator:
@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)"}) ]))]) ])
]})
Now the items have a nice effect when they’re entered and deleted.

All the code
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
Todo App
add
- {{todo}} delete
app.component.css
/*Google fonts*/@import url('//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;}
We are done ?. You can find the files and code on Github.
See the Demo
Conclusion
Angular is easier than you think. Angular is one of the best JavaScript libraries, and it has great support and a nice community. It also has tools that make working with Angular fast and easy, like Angular-cli.
Subscribe to this mail-list to learn more about Angular.
SaidHayani@ (@hayanisaid1995) | Twitter
The latest Tweets from SaidHayani@ (@hayanisaid1995). #Web_Developer /#Frontend / #Back_end(#PHP &…twitter.com
Here are some of the best online courses to learn Angular for free:
Angular 1.x
- Shaping with Angular
- Learn Angular
Angular 2.x (recommended)
- learn Angular2 (coursetro)
- YouTube playlist