Introducción a Angular 6

El desarrollar aplicaciones web hoy en día, se ha popularizado tanto que todos los desarrolladores están tratando de crear Aplicaciones modernas en la web, y para tal objetivo se necesitan herramientas modernas, una de esas herramientas es Angular 5, el Framework de desarrollo web para hacer Single Page Aplications o Aplicaciones de una sola página, este framework de javascript propuesto por Google y al mismo tiempo ayudado por Microsoft es uno de los más populares y en esta ocasión te enseñare las bases para que puedas crear tus siguientes aplicaciones usando la ultima versión 5 de Angular, pero antes de empezar te recomiendo cumplir con algunos requerimientos para que pueda ser mucho más sencillo aprenderlo.

Indice

  • Requerimientos para aprender Angular
  • ¿Qué es Angular?
  • ¿Porque aprender Angular?
  • Instalando Angular y sus herramientas
  • Conceptos Básicos de Angular
  • Ejemplos Prácticos de Angular
  • Más Recursos de Angular

Requerimientos Para Aprender Angular

  • HTML, al ser Angular un framework del Frontend, es necesario conocer los conceptos básicos del lenguaje de marcado de la web para entender bien como diseñar nuestras aplicaciones web.
  • CSS. aunque las hojas de estilo en cascadas o CSS son útiles para hacer lucir bien nuestras aplicaciones web, no son necesarias para conocer Angular 5, ya que cuando hablamos de Angular, hablamos de funcionalidad de programación en Javascript. 
  • Javascript, conocer la sintaxis basica como variables, funciones, objetos, y demás temas relacionados al lenguaje de programación es fundamental para poder dominar este framework.

¿Qué es Angular?

Para entender Angular debemos tener en cuenta lo Siguiente:
  • Es un Framework del Lado Cliente, esto quiere decir que sirve para crear aplicaciones que funcionan en un navegador web, mientras que los datos lo solicita de un servidor. Hay formas de Ejecutarlo en el Servidor con su variante llamada Angular Universal, pero lo mayor parte del tiempo hablamos del framework del lado cliente. 
  • Es Creado y Mantenido Por Google y es uno de frameworks del Lado Cliente Más Populares de Javascript, lo que influye en su comunidad y ecosistema gigantesco.
  • Permite crear Aplicaciones Web de una Sola Página (SPA, Single Page Applications)
  • Es Parte de una de las partes más importantes del Stack MEAN.

¿Porque Aprender Angular?

  • HTML Dinámico
  • Componentes y Templates
  • Template Syntax
  • Renderizado Veloz
  • Servicios usando Injeccción de Dependecnias 
  • Manejo de HTTP y Datos
  • Encapsulación de Componentes, los componentes simplemente sirven para hacer reusable tu código, 
  • Manejo de formularios y eventos
  • Enrutamiento (Routing)
  • Soporte a Ultimas versiones de Javascript

Instalando Angular y sus herramientas

Muy bien ahora es tiempo de instalar Angular 5. así que las herramientas que necesitaremos serán las siguientes:
  • Visual Studio Code, Si bien Angular 5 es desarrollado por Google, el lenguaje con el que han desarrollado Angular es Typescript, y este es creado Por Microsoft, el cual también ha creado VSCode, que es el editor que como es natural ya tiene integración con Typescript, lo que lo hace la herramienta más adecuada para trabajar con Angular, aunque es posible instalar Typescript en otros editores de Codigo e IDEs. 
  • Node.js, es la herramienta por defecto de todos los frameworks y bibliotecas de javascript, y Angular 5, no es la excepción. ya he escrito acerca de NodeJs antes, pero si no lo conoces tampoco es un requerimiento, así que hay que instalarlo yendo a la página oficial de nodejs.
  • Angular cli. Antiguamente teníamos que configurar muchos archivos de javascript para hacer funcionar Angular, pero hoy en día tenemos una manera de crear aplicaciones a través de la linea de comando usando Nodejs. debido a que ya hemos instalado nodejs ahora podemos:
    • Instalar un generador de proyectos de Angular 5, a través del comando: npm install @angular/cli -g 
    • Comprobar su instalación podemos ejecutar el comando ng -v
    • comprobar todos los comandos disponibles a través del comando ng
    • ademas posee su documentación en github en donde puedes encontrar todos los comandos que puedes ejecutar más una breve explicación
  • now. cuando desarrolles tu app, es muy probable que quieras verlo en un servidor real. Now es una herramienta de Nodejs, que te permite subir tu aplicación a un servidor real con un dominio para que puedas verlo.

Conceptos Básicos de Angular

Componentes de Angular

Los componentes son tan solo una forma de subdividir una aplicación en pequeñas partes que están conformadas por un html, css y typescript, y si bien nosotros podemos crear nuestros propios componentes creando estos archivos, es mucho más facil si utilizamos el cli de Angular con los siguientes comandos.
  • ng generate component micomponente el cual permite crear un componente de manera automática
  • ng g c micomponente. que es el mismo comando anterior solo que escrito de manera abreviada.

Templates y Styling

Recuerda que cada componente esta conformado por un:
  • HTML, que es aquí en donde vamos a diseñar nuestra interfaz a través de las etiquetas, así mismo que podemos utilizar otros componentes que creemos.
  • CSS, que es aquí en donde colocaremos tan solo los estilos que afectan al componente
  • Typescript, aunque Angular es un framework de javascript, en realidad usa un lenguaje basado en javascript, el cual es muy similar tan solo que utiliza tipos de datos. pero el objetivo de este archivo es almacenar toda la lógica del componente.
Por lo general empezamos creando nuestro archivo typescript que se encarga de enlazar estos archivos a traves de sus propiedades, las cuales podemos usar para:
  • los Templates, con templateUrl, que recibe la dirección del html y template, que recibe un string con lo que tiene que renderizar en pantalla.
  • Los estilos, con styles el cual recive un arreglo de string, en el que cada string puede contener nuestros estilos css, o styleUrls el cual recibe la dirección del Css a enlazar.

Data Binding

Data binding hace referencia a la manera en la que los datos se comportan de acuerdo a la interacción del usuario, y tenemos las siguientes formas de data binding.
  • Interpolación es la manera en la que la clase comunica datos al template a traves de {{}}
  • property binding, es la manera en la que podemos enlazar datos sin utilizar las llaves y usando los corchetes [] en las propiedades de las etiquetas html, directivas o componentes por ejemplo [value]="somevariable"
  • event binding hasta este punto tan solo enlazamos datos, si queremos utilizar los eventos de los componentes podemo usar los  dentro de los parentesis y el nombre del evento, por ejemplo: (click)="miMetodo()"
  • two way data binding. con las opciones anteriores tan solo enviamos datos desde el componente al template, pero si queremos que nuestra template tambien actualice el componente entonces podemos usar el doble enlaze de datos a traves de ngModel, pero para utilizarlo debemos primero importar el modulo FormsModule:  import { FormsModule } from '@angular/forms'; y agregarlo a la sección de imports.

ANGULAR ANIMATIONS

Una parte importante de nuestras aplicaciones es como lucen, así que angular 5 considera ayuda a agregar animaciones a tu aplicación de una manera simple, para instalar las animaciones tan solo tendemos que hacer lo siguiente:
  • instalar angular animations en nuestro proyecto: npm install @angular/animations
  • ir app.module.ts e impotar el modulo las animaciones a través:  import {BrowserAnimationsModule} from '@angular/platform-browser/animations'
  • y agregar el modulo a imports

Ejemplo Prácticos de Angular

    A continuación te listo algunos ejemplos prácticos que he ido grabando en mi canal Fazt Code, para que puedas aprender angualr en la práctica.


    Más Recurso de Angular

    • Rxjs
    • Typescript, es un lenguaje basado en Javascript, el cual los creadores de Angular lo usaron para mejorar el Framework, para aprender mas de el es mejor ir al curso de Typescript.

    Comentarios

    1. Hola Julia , te felicito por tu sitio web de cursos.

      Como sugerencia, podrias reducir los videos a no mas de 15 minutos. De esta forma no se pierde el foco y se puede continuar luego con el próximo video.

      Consulta y verifica si lo que indicó te hara mejorar aún más tu sitio web.

      ResponderBorrar
    2. hola necesito ayuda con una aplicación en lanzar la distribución a producción del angular con lazy loading su apoyo

      ResponderBorrar
    3. Donde de encuentra el video? Saludos

      ResponderBorrar
    4. Hola Fazt, excelente videos y tutoriales, pudiera ayudarme con angular routing

      ResponderBorrar
    5. Estupendo!!!
      Sería de gran ayuda nos facilitaras un enlace a cursos buenos como los tuyos de CSS y HTML, JavaScript....
      Si es posible

      ResponderBorrar
    6. Estoy de acuerdo, te recomiendo hacer videos de 30 min max, por que mucha informacion de un solo golpe es dificil de asimilar, sigue asi eres el mejor.

      ResponderBorrar
    7. Para mi, tus videos tutoriales son Geniales, si bien es cierto son largo, son bien completos. No dejas nada en el vacio y explicas todo con detalle y seguridad. Cuando hay interes hasta 120min me banco tus videos!

      ResponderBorrar
    8. Buen día Estimados, quisiera hacer un app parecido a un calendario en Angular. data=[{id:1, fecha:09/05/2019, evento: taller, ponente: juan xxx}, {id:2, fecha:09/05/2019, evento: taller, ponente: Pedro yyy},{id:3, fecha:09/05/2019, evento: charla, ponente: Felipa zzz},{id:4, fecha:10/05/2019, evento: taller, ponente: aaa},{id:5, fecha:11/05/2019, evento: conferencia, ponente: bbb}], agrupar por fecha que sería como parent, luego agrupar por evento que puede ser (taller, conferencia, charla, etc.) Qué sería como child. Por favor alguien que me pueda ayudar con esta idea, de antemano agradezco con su apoyo.

      ResponderBorrar

    Publicar un comentario