Aprende a crear tu primera aplicación angular en 20 minutos

Foto de Kelly Sikkema en Unsplash

Angular es un marco de JavaScript, creó mi Misko Hevery y lo mantiene 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 cómo animar los componentes)

Prerrequisitos:

  • Node.js

Compruebe si node.js está instalado en su computadora. Obtenga más información sobre la instalación.

  • npm

npm (administrador de paquetes de nodo) se instala con Node.js

Verifique la versión de node.js:

nodo -v

npm:

npm -v

Angular-CLI

Debe tener la última versión de Angular-CLI. Obtenga más información sobre CLI angular aquí y encuentre las instrucciones para la 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 necesita 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 nueva my-app

El proyecto se generará automáticamente. ¡Creemos nuestra aplicación de tareas pendientes!

ng nueva aplicación todo

Luego, abra los archivos en su editor de texto. Utilizo 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:

Nota: Angular 2 usa TypeScript, en el que los archivos terminan con la extensión ".ts".

Para hacer una buena interfaz para nuestra aplicación, utilizaremos el Framework Bootstrap 4.

Incluye bootstrap cdn en index.html:

Ejecute la aplicación en su terminal:

ng servir

La aplicación se ejecutará en http: // localhost: 4200 /

Todo está bien !

Ahora hagamos una estructuración HTML. Utilizaremos las clases Bootstrap para crear una forma simple.

app.component.html:

 
  
  

Aplicación Todo

   
             Agregar    
  
 

En app.component.css:

cuerpo{
 relleno: 0;
 margen: 0;
}
formar{
 ancho máximo: 25em;
 margen: 1em automático;
}

Para capturar el valor de entrada en Angular 2, podemos usar la directiva ngModel. Puede insertar una variable como un atributo dentro del elemento de entrada.

Para crear una variable como atributo, use # seguido del nombre de la variable.

// obtener el valor de la variable

{{myVariable.value}}

Ahora obtenga el valor 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:

clase de exportación AppComponent {
  todoArray = []
 
}

Luego tenemos que agregar un evento de clic a nuestro botón que empuja el valor capturado en "todoArray".

app.component.html:

 Agregar 

En app.component.ts:

clase de exportación AppComponent {
 todoArray = []
addTodo (valor) {
    this.todoArray.push (valor)
    console.log (this.todoArray)
  }
 
}
Use console.log (this.todoArray) para ver el valor de la matriz

Obtener datos de "todoArray"

Ahora tenemos que buscar datos almacenados en "todosArray". Usaremos la directiva * ngFor para recorrer la matriz y extraer los datos.

app.component.html:

  
       
  • {{todo}}
  •   
  

Después de buscar datos:

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

Estilizando la aplicación

Me gusta usar fuentes de Google e iconos de material, que son de uso gratuito.

Incluya las fuentes de Google dentro de app.component.css:

/ * Fuentes de Google * /
@import url ('https://fonts.googleapis.com/css?family=Raleway');

Y los iconos de material dentro de index.html:

Después de agregar un poco de estilo a nuestra aplicación, se verá así:

Para usar iconos de material:

// pon el ícono agregar dentro del div "input-group-text"

 agregar 
// y eliminar el icono dentro del elemento de la lista
 
  • {{todo}} eliminar
  • Para estilos en app.component.css:

    / * Fuentes de Google * /
    @import url ('https://fonts.googleapis.com/css?family=Raleway');
    cuerpo{
     relleno: 0;
     margen: 0;
    }
    formar{
     ancho máximo: 30em;
     margen: 4em automático;
     posición: relativa;
     fondo: # f4f4f4;
     acolchado: 2em 3em;
    }
    forma h1 {
        font-family: "Raleway";
        color: # F97300;
    }
    entrada de formulario [tipo = texto] :: marcador de posición {
       font-family: "Raleway";
       color: # 666;
    }
    formulario .data {
        margen superior: 1em;
    }
    form .data li {
     fondo: #fff;
     borde izquierdo: 4px sólido # F97300;
     relleno: 1em;
     margen: 1em automático;
     color: # 666;
     font-family: "Raleway";
    }
    formulario .data li i {
        flotar derecho;
        color: # 888;
        cursor: puntero;
    }
    form .input-group-text {
        fondo: # F97300;
        radio de borde: 50%;
        ancho: 5em;
        altura: 5em;
        acolchado: 1em 23px;
        color: #fff;
        posición: absoluta;
        derecha: 13px;
        arriba: 68 px;
        cursor: puntero;
    }
    form .input-group-text i {
        tamaño de fuente: 2em;
    }
    formulario .form-control {
     altura: 3em;
        font-family: "Raleway";
    }
    form .form-control: focus {
     cuadro-sombra: 0;
    }

    Nuestra aplicación está casi terminada, pero necesitamos agregar algunas características. Una funcionalidad de eliminación debería permitir a los usuarios hacer clic en un icono de eliminación y eliminar un elemento. También sería genial tener la opción de ingresar un nuevo elemento con la tecla de retorno, en lugar de hacer clic en el botón Agregar.

    Eliminar elementos

    Para agregar la funcionalidad de eliminación, utilizaremos el método de matriz de "empalme" y un bucle for. Recorreremos "todoarray" y extraeremos el elemento que deseamos eliminar.

    Agregue un evento (clic) para eliminar el icono y dele "todo" como parámetro:

  • {{todo}} delete
  • En app.component.ts:

    /*Eliminar elemento*/
      Eliminar elemento(){
       console.log ("eliminar elemento")
      }

    Cuando hace 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:

    /*Eliminar elemento*/
      deleteItem (todo) {
       for (let i = 0; i <= this.todoArray.length; i ++) {
        if (todo == this.todoArray [i]) {
         this.todoArray.splice (i, 1)
        }
       }
      }

    El resultado:

    Impresionante !!

    Entrar para agregar elementos

    Podemos agregar un evento de envío al 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 en el formulario.

    app.component.html

    en app.component.ts

    // enviar formulario
      todoSubmit (valor: cualquiera) {
     console.log (valor)
      }

    Revisa la consola. Devolverá un objeto de valores:

    Así que ahora tenemos que empujar el valor devuelto a "todoArray":

    // enviar formulario
      todoSubmit (valor: cualquiera) {
         if (value! == "") {
        this.todoArray.push (value.todo)
         //this.todoForm.reset ()
        }más{
          alerta ('Campo requerido **')
        }
        
      }

    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.

    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:

    importar {Componente, disparador, animar, estilo, transición, fotogramas clave} desde '@ angular / core';

    Luego agregue la propiedad de animaciones al decorador "@component":

    @Componente({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
      animaciones: [
       disparador ("moveInLeft", [
          transición ("void => *", [estilo ({transform: "translateX (300px)"}),
            animado (200, fotogramas clave ([
             estilo ({transform: "translateX (300px)"}),
             estilo ({transform: "translateX (0)"})
     
              ]))]),
    transición ("* => vacío", [estilo ({transform: "translateX (0px)"}),
            animar (100, fotogramas clave ([
             estilo ({transform: "translateX (0px)"}),
             estilo ({transform: "translateX (300px)"})
     
              ]))])
         
        ])
    ]
    })

    Ahora los elementos tienen un efecto agradable cuando se ingresan y eliminan.

    Todo el código

    app.component.ts

    importar {Componente, disparador, animar, estilo, transición, fotogramas clave} desde '@ angular / core';
    @Componente({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
      animaciones: [
       disparador ("moveInLeft", [
          transición ("void => *", [estilo ({transform: "translateX (300px)"}),
            animado (200, fotogramas clave ([
             estilo ({transform: "translateX (300px)"}),
             estilo ({transform: "translateX (0)"})
     
              ]))]),
    transición ("* => vacío", [estilo ({transform: "translateX (0px)"}),
            animar (100, fotogramas clave ([
             estilo ({transform: "translateX (0px)"}),
             estilo ({transform: "translateX (300px)"})
     
              ]))])
         
        ])
    ]
    })
    clase de exportación AppComponent {
      todoArray = [];
      que hacer;
      // todoForm: nuevo FormGroup ()
    addTodo (valor) {
        if (value! == "") {
         this.todoArray.push (valor)
        //console.log(this.todos)
      }más{
        alerta ('Campo requerido **')
      }
        
      }
    /*Eliminar elemento*/
      deleteItem (todo) {
       for (let i = 0; i <= this.todoArray.length; i ++) {
        if (todo == this.todoArray [i]) {
         this.todoArray.splice (i, 1)
        }
       }
      }
    // enviar formulario
      todoSubmit (valor: cualquiera) {
         if (value! == "") {
        this.todoArray.push (value.todo)
         //this.todoForm.reset ()
        }más{
          alerta ('Campo requerido **')
        }
        
      }
     
    }

    app.component.html

     
      
      

    Aplicación Todo

       
                      agregar    
      
      
      
         
    • {{todo}} delete
    •   
     
     

    app.component.css

    / * Fuentes de Google * /
    @import url ('https://fonts.googleapis.com/css?family=Raleway');
    cuerpo{
     relleno: 0;
     margen: 0;
    }
    formar{
     ancho máximo: 30em;
     margen: 4em automático;
     posición: relativa;
        fondo: # f4f4f4;
        acolchado: 2em 3em;
        desbordamiento: oculto;
    }
    forma h1 {
        font-family: "Raleway";
        color: # F97300;
    }
    entrada de formulario [tipo = texto] :: marcador de posición {
       font-family: "Raleway";
       color: # 666;
    }
    formulario .data {
        margen superior: 1em;
    }
    form .data li {
     fondo: #fff;
     borde izquierdo: 4px sólido # F97300;
     relleno: 1em;
     margen: 1em automático;
     color: # 666;
     font-family: "Raleway";
    }
    formulario .data li i {
        flotar derecho;
        color: # 888;
        cursor: puntero;
    }
    form .input-group-text {
        fondo: # F97300;
        radio de borde: 50%;
        ancho: 5em;
        altura: 5em;
        acolchado: 1em 23px;
        color: #fff;
        posición: absoluta;
        derecha: 13px;
        arriba: 68 px;
        cursor: puntero;
    }
    form .input-group-text i {
        tamaño de fuente: 2em;
    }
    formulario .form-control {
     altura: 3em;
        font-family: "Raleway";
    }
    form .form-control: focus {
     cuadro-sombra: 0;
    }

    Hemos terminado . Puede encontrar los archivos y el código en Github.

    Ver la demo

    Conclusión

    Angular es más fácil de lo que piensas. 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íbase a esta lista de correo para obtener más información sobre Angular.

    Estos son algunos de los mejores cursos en línea para aprender Angular gratis:

    Angular 1.x

    • Formando con Angular
    • Aprender angular

    Angular 2.x (recomendado)

    • aprender Angular2 (curso)
    • Lista de reproducción de YouTube