Curso de Angular 5

• Localización del código del curso.
• Materiales necesarios para desarrollar con Angular: editor, NodeJS y Angular CLI.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

• 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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.