Curso de Angular 5
Iniciación al desarrollo de aplicaciones frontend usando Angular 5
Material disponible
Intermedio
40 Clases 11 h
En este nuevo curso de Angular vamos a abordar la versión 5 del conocido framework Javascript, motor de aplicaciones de alto nivel y gran rendimiento. Angular es capaz de satisfacer los requisitos de los proyectos más exigentes y proporcionar una experiencia de desarrollo altamente amigable para los profesionales. Por esos motivos, Angular es una de las herramientas más usadas en la actualidad, con alta demanda en el mercado de trabajo.

Qué aprenderé en el Curso de Angular 5

  • CLI y Base para una aplicación Angular
    El curso comenzará desde cero, explicando la estructura de una aplicación en Angular 5. Veremos qué son los componentes, pieza fundamental en la arquitectura de las aplicaciones modernas, así como los módulos, capaces de organizar nuestro código y facilitar el mantenimiento de las aplicaciones.

  • Creación de aplicaciones con Angular
    Refuerzo práctico para el desarrollo de aplicaciones frontend con la última versión de framework de JavaScript Angular 5. Angular CLI, modificaciones del componente raíz, arranque de una aplicación Angular, String interpolation, Property binding,.....

  • SPA y formularios
    Abordaremos asuntos fundamentales en el desarrollo de aplicaciones para la web, como el trabajo con formularios y el sistema de rutas, con el que podemos crear las denominadas SPA (Single Page Applications).

  • Routing
    Sesión dedicada a realizar una implementación, paso por paso, del sistema de rutas de Angular. El objetivo es ver cómo se monta, en una aplicación creada desde cero, todo el sistema de rutas, con sus módulos, componentes, etc.

  • Flujo de datos e inyección de servicios
    El curso también dedicará un tiempo considerable en la enseñanza de los patrones de diseño de software que se usan dentro de Angular y piezas esenciales como son los servicios. Explicaremos mecanismos para facilitar la comunicación entre componentes y crear flujos de datos en la aplicación que aprovechen las características del framework y faciliten el mantenimiento de los proyectos.

  • Comunicaciones HTTP
    Como no, también veremos cómo se realizan las comunicaciones HTTP, para que nuestras aplicaciones frontend sean capaces de comunicar con el backend y las APIs REST en particular. Mediante estas comunicaciones se obtendrán datos, que serán usados en las aplicaciones para presentar la información al usuario, y se realizará la manipulación de la información que se encuentra del lado del servidor.

  • Seguridad y observables
    Por último abordaremos un asunto tan importante como la seguridad de las aplicaciones y otro tema de cierta complejidad como son los observables. Los observables resultan muy importantes para que las aplicaciones consuman menos tiempo de procesamiento y se mantenga una experiencia de usuario satisfactoria, tanto en en ordenadores como dispositivos móviles.

Objetivos del curso

El objetivo de este curso es introducir Angular 5, para desarrolladores con pocos o ningún conocimiento de este framework Javascript. Veremos a la largo de varias sesiones las herramientas principales que se disponen en Angular para desarrollar, junto con las piezas fundamentales que los programadores deben crear en el marco de una aplicación.

Qué tengo que saber

Para participar en este curso es esencial tener al menos un conocimiento medio de Javascript, del lado del cliente. Como herramientas usaremos el propio navegador (Chrome preferiblemente) y el editor Visual Studio Code.

Clases y contenidos

Iniciación al desarrollo de aplicaciones con Angular 5

Requisitos y materiales del curso de Angular Gratis
  • Localización del código del curso.
  • Materiales necesarios para desarrollar con Angular: editor, NodeJS y Angular CLI.
Crear una aplicación con Angular Gratis

Proceso de creación de una aplicación, con distintos modificadores que permitirán configurar la aplicación generada de un modo adecuado para impartir el curso.

Dependencias de la app Angular en package.json Gratis

Comenzamos el análisis de código observando el archivo package.json, situado en la raíz del proyecto, que contiene básicamente todo el listado de dependencias del proyecto de aplicación Angular.

Archivos tsconfig.json y angular-cli.json Gratis

Se ven dos de los archivos principales de la configuración del proyecto, situados en la carpeta raíz. Estos archivos permiten definir la configuración del TypeScript, con la configuración de la propia aplicación Angular.

Estructura y archivos dentro del directorio src (fuente) de la aplicación

En este vídeo se hace un resumen de todo lo que se encuentra en la carpeta src, el código fuente de la aplicación Angular.

Archivo main.ts

Revisión del código del archivo main.ts, que es el punto de arranque, que se ejecuta al iniciarse la aplicación. Contiene código TypeScript, aunque de momento nos centraremos en los imports, que permiten cargar nuevos archivos con pedazos de código, unos pertenecientes al propio Angular y otros pertenecientes a nuestra propia aplicación.

Carpeta enviroment

En esta carpeta se guardan archivos de configuración, que representan propiedades con valores diferentes para cada modalidad de ejecución, desarrollo y producción.

Carpeta app del proyecto Angular

En esta carpeta encontramos el código que generalmente iremos desarrollando. En la carpeta app pueden haber archivos diversos, con artefactos como módulos y componentes. En este artículo se muestran ambos artefactos.

Contenido global del curso y preguntas finales

Terminamos con un repaso al contenido que se verá en los próximos días y contestando una serie de preguntas realizadas durante la sesión en directo.

Refuerzo práctico iniciación en Angular

Crear una aplicación Angular Gratis

Mostramos rápidamente cómo generar una nueva aplicación Angular usando el "Angular CLI".

Modificaciones sobre el componente raíz Gratis

Realizamos una serie de modificaciones sencillas sobre el componente raíz, de modo que comprobemos que el código que estamos tocando corresponde con aquello que el navegador está visualizando. Se muestra que ese código que se modifica es un simple archivo HTML, que contiene la vista del componente raíz de la aplicación.

Selector del componente Gratis

Una de las configuraciones más importantes de un componente es el selector, definido en el decorador del componente. Mediante el selector le decimos a Angular qué elementos de la página se tienen que comportar como el componente que se está desarrollando.

Arranque de la aplicación Angular Gratis

Ahora nos centramos en el arranque de una aplicación Angular, lo que se llama el Bootstrap (nada que ver con el framework CSS Bootstrap). Mediante la configuración del arranque definimos qué componentes se deben interpretar en el index.html de nuestra aplicación. Podemos configurar un componente raíz como único componente de arranque, que es lo que normalmente se necesitará y tal como nos entregan la aplicación básica, pero también podríamos colocar varios componentes de arranque, como se demuestra en el vídeo. En este vídeo también se muestra cómo crear componentes nuevos.

Usar componentes creados por nosotros mismos

Después de crear nuestros propios componentes, demostramos cómo usarlos en nuestra aplicación.

Vista del componente

En este vídeo mostramos algunas de las cosas más básicas que somos capaces de realizar sobre la vista. En concreto se ve "String interpolation", mecanismo mediante el cual se vuelcan valores de propiedades del componente en el template y "Property binding", que nos permite asociar valores de todo tipo a propiedades del componente. Explicamos la sintaxis de ambas construcciones sobre elementos del template de un nuevo componente realizado.

Diferencias Property Binding y String Interpolation

Aquí hacemos un resumen de las diferencias entre los mecanismos de interpolación de strings y de bindeo a propiedad. Ambos mecanismos se podrían llegar a usar en casos similares, cuando estamos volcando una cadena en un atributo o propiedad, pero hay diferencias significativas, que salen a relucir especialmente cuando no es una cadena lo que se trata de asignar a una propiedad.

Bindeo a eventos (event binding)

El bindeo a eventos (event binding) nos permite asociar código como manejador de eventos sobre un elemento. Se explica la sintantaxis del bindeo a eventos y cómo se asocial código como respuesta al evento, generalmente a través de la invocación de un método de la lógica del componente. Veremos, aunque no sea muy buena práctica, que también hay atajos que nos pueden ahorrar la escritura del método en el componente, ya que es posible introducir expresiones en el bindeo a eventos, con código que queremos que se ejecute cuando se produzca el evento.

Crear módulos nuevos en la aplicación Angular

En este vídeo introducimos otro de los artefactos disponibles para crear el código de las aplicaciones en Angular, los módulos. Los módulos no son más que reuniones de código, con declaraciones que definen cosas como componentes, directivas, servicios, etc. Se muestra cómo se pueden crear módulos nuevos dentro de las aplicaciones Angular. Esos módulos son como paquetes u organizaciones de código que nos sirven para conseguir que nuestras aplicaciones estén más ordenadas. En el futuro también nos servirá para compartir código entre proyectos o incluso con otras personas de la comunidad.

Crear componentes dentro de los nuevos módulos

Después de haber creado un módulo nuevo en nuestra aplicación, en el vídeo anterior, a continuación crearemos un componente que estará alojado dentro de ese nuevo módulo. Para acabar mostramos cómo podemos importar ese módulo desde otros módulos, de modo que se puedan usar los artefactos definidos en un módulo desde otro. Es decir, se muestra cómo usar módulos en el contexto de aplicación, de modo que código de un módulo se pueda usar desde otros módulos de nuestra app.

Ejemplo de nuevo componente desarrollado, que usa la directiva ngIf

En este vídeo se muestra la creación de un nuevo componente, con código que repasa lo aprendido en el resto de la clase. Además como material nuevo se explica el trabajo con la directiva ngIf de Angular, que sirve para incorporar y retirar elementos de la página del DOM. Se explica por encima qué son las directivas en general y las directivas estructurales en particular.

Final de clase, conclusión y preguntas finales

Con el presente este vídeo llegamos al final de la clase de refuerzo práctico. Para acabar se realiza una serie de preguntas de diversa índole, relacionadas con Angular en general.

SPA y formularios

Módulos y componentes

En este vídeo damos un repaso a la organización del código mediante los módulos, y dentro de ellos a los componentes. En el vídeo se observa el estado del repositorio en la parte 1 (ver el repositorio GitHub del curso) y se van comentando las decisiones que han llevado al profesor a construir su aplicación de tal forma, explicando a la vez el código de módulos y de componentes de la aplicación y su anidación.

Módulo de enrutado RoutingModule

En este vídeo comenzamos a explicar el sistema de routing incorporado en el framework Angular, explicando el módulo de routing y las primeras configuraciones de rutas de la aplicación. Se explica también cómo se enganchan las rutas en el cuerpo de la aplicación por medio del Router Outlet.

Ruta de error 404

En este vídeo se muestra cómo se realizaría la lógica en el sistema de routing para crear una ruta de error 404, que se muestre cuando se intenta acceder a una ruta inexistente. Para la implementación de estas rutas de error 404 se explica también cómo realizar rutas con comodines y cómo hacer rutas que redirigen a otras.

Rutas con carga perezosa: lazy load

Ahora vamos a conocer el sistema de carga perezosa, conocido también por su denominación en inglés "lazy load". Gracias a esta utilidad podemos conseguir que no se carguen todos los archivos necesarios para todas las rutas, reduciendo el tiempo de carga de la primera pantalla de la aplicación. Veremos cómo configurar rutas para trabajar con lazy load y cómo estas rutas pueden tener un conjunto de archivos que sólo se descarga cuando se accede a ellas mediante los enlaces de la aplicación.

Enlaces de navegación a rutas y paso de parámetros
  • Sistema de routing de Angular
    • cómo crear enlaces en la página que funcionan mediante el sistema de routing,
    • que no son enlaces normales, porque tienen que ocuparse de no recargar la página de nuevo, sino simplemente cambiar la ruta ejecutando aquellas configuraciones de esa ruta en particular.
  • Cómo enviar parámetros a las rutas de Angular, mediante los cuales en un mismo componente podemos crear varias rutas, siendo uno, o varios de los bloques de la ruta uno, o varios, parámetros.
  • Alternativa de código para obtener los valores de los parámetros.
Comunicación de datos entre la vista y el modelo con formularios

En este vídeo comenzamos a trabajar con formularios y vemos una primera alternativa de código para enviar datos desde la lógica del componente (el TypeScript) hacia la vista (el HTML). Lo hacemos mediante un property binding y un event binding. Es una alternativa válida y que podría ser necesaria en algunos casos, pero no es el camino más corto, como veremos en la siguiente clase.

Directiva ngModel

Mediante la directiva ngModel tenemos el camino más directo para compartir datos entre la vista y la lógica. Se podrá usar en muchos casos, pues ofrece una alternativa muy resumida y con poco código para asociar lo que hay en un campo de formulario a una propiedad del componente. De hecho, el ngModel, que requiere una sintaxis especial llamada "Banana in a Box", es lo que también se conoce como "Doble binding" y es el motivo por el que Angular, ya en su versión anterior, AngularJS, obtuvo tanta repercusión, ya que nos permitía hacer un enlace a dos direcciones con prácticamente nada de código.

Directiva estructural *ngFor

En esta ocasión vemos un campo distinto de formulario, un campo select. Ese campo select en vez de construirse a mano, se construyó con opciones entregadas vía un array. Es decir, tiene opciones cargadas dinámicamente. Para recorrer todos los item del array, a fin de construir las opciones del select, se usa una directiva estructural llamada ngFor, que es la primera vez que la vemos en el curso. Para enviar los datos del modelo a la vista se sigue usando la directiva ngModel conocida en el vídeo anterior.

Operaciones del formulario, listados y directiva condicional *ngIf

En este vídeo se finaliza la parte de formularios básicos de Angular, explicando asuntos diversos. Recomendación de guardar datos siempre usando métodos del componente. Diferencia entre ngModel y el evento change, que guardan los datos en momentos distintos. Cómo mostrar los datos que hemos guardado de un formulario. Para esto, que no tiene que ver específicamente con formularios, se muestra algo nuevo, que es la directiva estructural para condicionales ngIf, que nos permite poner y quitar cosas del DOM. También se ve un nuevo ejemplo de *ngFor para recorrer los ítem guardados y componer el listado de movimientos que disponemos en un momento dado.

Preguntas finales de la clase

Se realizan varias preguntas relacionadas con temas que se han visto durante la clase y temas generales de Angular.

Clase Practica Routing

En estos vídeos vamos a realizar una implementación, paso por paso, del sistema de rutas de Angular. El objetivo es ver cómo se monta, en una aplicación creada desde cero, todo el sistema de rutas, con sus módulos, componentes, etc.

Configuración de la aplicación y del sistema de rutas

Comenzamos una aplicación de ejemplo, similar a la que se mostró en la clase 02 del curso, en la parte de routing. En este vídeo se muestra la creación de la app y las primeras rutas dirigidas a componentes de la aplicación. También se ve cómo se crean nuevos módulos y componentes, para reforzar lo aprendido en clases anteriores.

Enlaces para navegación entre rutas de aplicación

En este vídeo se muestra cómo crear enlaces para navegación por las rutas. Estos enlaces no serán etiquetas A con su href. En realidad serán elementos a los que les hemos colocado la directiva "routerLink", que sirve para indicar que ese enlace a una ruta debe ser procesado por el sistema de routing.

Rutas creadas con carga perezosa

En esta parte práctica del sistema de routing ponemos manos en el código para implementar un sistema de lazy load de rutas. Lo realizamos por medio de la creación de módulos que tienen su propio sistema de rutas particular. Luego creamos las rutas que permitirán cargar los módulos necesarios en el momento que se visiten.

Implementación del lazy load sin usar Angular CLI

En esta parte continuamos realizando nuevas rutas usando el sistema de lazy load, haciendo un ejercicio similar al del vídeo anterior. Solo que en esta ocasión no vamos a realizar mediante el angular cli la parte de creación del módulo de routing, sino que lo programaremos todo a mano, a partir de un módulo sin routing. Eso nos permitirá entender mejor cómo se construyen las rutas internas y su carga perezosa.

Gestión de las rutas para el error 404 de página no encontrada

En este vídeo se crea una ruta para mostrar el error de recurso no encontrado, además se aprenderá a crear rutas con redirecciones, que reenvían a otra ruta de aplicación.

Envío y recepción de parámetros en las rutas

En este vídeo práctico mostramos cómo se crean parámetros en las rutas. De nuevo se realiza otra sección del sitio cargada con lazy load, que nos permitirá tomar todavía más soltura con el proceso de crear rutas. Además en esta ocasión se crea una ruta que acepta parámetros. Se podrá aprender a enviar parámetros, configurar rutas que aceptan parámetros, en la declaración de la ruta, y recibir los parámetros enviados al sistema de rutas, en el código del componente asociado.

Flujo de datos e inyección de servicios

Flujo de datos. Trabajo con servicios

El curso también dedicará un tiempo considerable en la enseñanza de los patrones de diseño de software que se usan dentro de Angular y piezas esenciales como son los servicios. Explicaremos mecanismos para facilitar la comunicación entre componentes y crear flujos de datos en la aplicación que aprovechen las características del framework y faciliten el mantenimiento de los proyectos.

Comunicaciones HTTP

Comunicaciones HTTP con APIs REST

Vemos cómo se realizan las comunicaciones HTTP, para que nuestras aplicaciones frontend sean capaces de comunicar con el backend y las APIs REST en particular. Mediante estas comunicaciones se obtendrán datos, que serán usados en las aplicaciones para presentar la información al usuario, y se realizará la manipulación de la información que se encuentra del lado del servidor.

Seguridad y observables en Angular 5

Seguridad y observables en Angular 5

Abordamos un asunto tan importante como la seguridad de las aplicaciones y otro tema de cierta complejidad como son los observables. Los observables resultan muy importantes para que las aplicaciones consuman menos tiempo de procesamiento y se mantenga una experiencia de usuario satisfactoria, tanto en en ordenadores como dispositivos móviles.

Valoraciones

Matias Bayonés

Development

Ferran Llop

¿Conoces nuestra tarifa plana?

Toda la formación de EscuelaIT, con más de 130 cursos completos para aprender las más variadas tecnologías de programación, diseño y marketing online. Todo! con tu suscripción.

Suscríbete