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)

En este tutorial, te mostraré cómo recrear este beneficio en cualquiera de tus proyectos web gracias a Webpack (y supongo que sabes cómo usarlo). Para empezar, queremos que Webpack agrupe nuestros archivos fuente en una carpeta dist/ estática.

Puedes revisar el código fuente aquí.

1. Configura nuestra aplicación

La parte aburrida

Crea una carpeta para este tutorial, abre tu terminal, e inicia un proyecto:

npm init -y

Lo primero es lo primero, si aún no está hecho, instala node.js y Webpack:

npm install webpack webpack-cli --save-dev

Vamos a crear un script en nuestro package.json que le dice a Webpack que use nuestro archivo de configuración:

  "scripts": {
    "build": "webpack --config webpack.config.js"
  }

En la root de tu carpeta, cree un archivo globals.js, donde nuestras variables serán guardadas:

module.exports = {
  myTitle: 'Hello freeCodeCamp!',
  myColor: '#42ff87',
};

El archivo de configuración de Webpack se ve así (webpack.config.js). Créelo en el root de tu carpeta:

module.exports = {
  entry: __dirname + '/app/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
};

Nuestro código fuente estará ubicado en una carpeta app. Créelo de esta forma:

mkdir app && cd app

Necesitarás index.html y index.js archivos en este punto. Crea estos archivos en la carpeta app:

touch index.html index.js

¡Perfecto! ¿Ya está todo listo?

Tu carpeta debería verse así:

|-- node_modules/
|-- package.json
|-- webpack.config.js
|-- globals.js
|-- app/
	|-- index.html
	|-- index.js

2. Renderiza nuestros archivos HTML con el html-webpack-plugin

Esta app/index.html está vacía. Vamos a añadir algo de marcado en él y luego agregue una variable personalizada:

<html lang="en">
<head>
  <title>Webpack shared variables!</title>
</head>
<body>
  <h1><%= myTitle %></h1>
</body>
</html>

Como puedes ver, estamos tratando de imprimir una variable en nuestro HTML... ¡Lo cual es imposible! Para hacer que funciones usaremos el html-webpack-plugin que nos brinda la habilidad de usar la sintaxis EJS e inyectar datos en el.

El complemento generará un archivo HTML válido. Mientras tanto, debes cambiar el nombre de tu archivo app/index.html a app/index.ejs.

npm install --save-dev html-webpack-plugin

Volvamos a nuestro archivo de configuración. html-webpack-plugin tiene una interesante opción templateParameters que nos permite pasar un objeto como parámetro. Habilita el complemento de la siguiente manera en webpack.config.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const globals = require('./globals.js')

module.exports = {
	// ... previous config, entry, output...
  plugins: [
    new HtmlWebpackPlugin({
      template: 'app/index.ejs',
      templateParameters: globals,
    })
  ]
};

Corre npm run build y ta-daaaaa « <%= myTitle %> » se convirtió « Hello freeCodeCamp » ! El trabajo está hecho por Webpack durante la compilación cuando corre el  html-webpack-plugin.

¿Ves? Esto fue bastante sencillo con la herramienta correcta: HTML ✅

3.  Usa nuestras variables en JavaScript

¡Uf, tantas líneas solo para imprimir una variable! ? Con Webpack, las cosas a menudo se complican. Bueno, esta es muy simple: en JavaScript simplemente importa tu archivo. En tu app/index.js:

import globals from '../globals.js'

document.write(
'<pre>' +
  JSON.stringify(globals, null, 2) +
'</pre>'
);

Esta imprimirá nuestros objetos globales en la página. Ahora pasemos al CSS.

4. Usa variables compartidas en nuestro CSS

¿Aquí es nuestro final jefe?

De acuerdo, chicos, me atraparon… Mentí. No podemos usar nuestros globales en CSS  – Tenemos que usar un preprocesador. En este ejemplo, usaremos SASS.

En lado de Webpack, un complemento no será suficiente. Tenemos que usar un cargador para convertir SASS en CSS. En este caso necesitamos el paquete de sass-loader, así que instálalo de acuerdo con los documentos:

npm install sass-loader node-sass css-loader style-loader --save-dev

De vuelta a la codificación. Ahora que tenemos SASS, crea tu archivo de hoja de estilo, app/style.scss:

h1 {
  color: $myColor;
}

Nuestro SASS está configurado – ahora, cómo podemos inyectarle datos? ¡El paquete sass-loader tiene una opción anteponer datos! Pero toma una cadena como parámetro, lo cual significa que tus datos deberían verse así: "$myColor: red; myTitle: '...'";.

Teneos que automatizar eso y convertir un objeto de JavaScript en una cadena. No encontré un paquete en  npm que me satisficiera, entonces escribí mi propio convertidor. Descarga el archivo y agrégalo en tu proyecto (en mi ejemplo es utils/jsToScss.js).

Tu final webpack.config.js debería verse así:

const globals = require("./globals.js");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const jsToScss = require("./utils/jsToScss.js");

module.exports = {
  entry: __dirname + "/app/index.js",
  output: {
    path: __dirname + "/dist",
    filename: "index_bundle.js"
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "app/index.ejs",
      templateParameters: globals
    })
  ],
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          {
            loader: "sass-loader",
            options: {
              prependData: jsToScss(globals)
            }
          }
        ]
      }
    ]
  }
};

Esto es lo que debería ver:

Si todavía estás leyendo este tutorial, gracias por tu atención. ¡Espero que te ayude! Webpack es una poderosa herramienta que deberías profundizar.

NB: en tu carpeta dist/ puedes ver que no se genera ningún CSS. Eso es porque uso el style-loader para mantener este demo simple. Para generar el archivo CSS, echa un vistazo a la mini-css-extract-plugin.

Traducido del artículo de: Adrien Zaganelli - How to share variables across HTML, CSS, and JavaScript using Webpack