En este webinar profundizamos en el framework Javascript Angular, una de las alternativas más poderosas para crear aplicaciones frontend modernas y progressive web apps.

1. Miguel Angel Alvarez
Angular
@midesweb
@EscuelaIT

2. Qué veremos hoy
▪ Índice
o Angular
• Qué es Angular
• Primeros pasos
o Artefactos de Angular
• Módulos
• Componentes
• Servicios

3. Angular

4. Angular es un framework para el desarrollo de
aplicaciones frontend modernas.
- Base sólida para el desarrollo de aplicaciones
- Arquitectura y patrones de diseño avanzados
- Incorporación sencilla de tecnologías punteras
Introducción a Angular
Qué es Angular

5. Introducción a Angular
Panorama frontend
Tipo de producto Framework Framework "progresivo"
Librería de interfaz
gráfica
Piezas
Integra todas sus piezas
en cada aplicación
Escogemos las piezas
que deseamos integrar
Sólo ofrece desarrollo de
componentes, las piezas
son proyectos aparte
Curva de aprendizaje Compleja Media Media
Tipo de proyecto
Aplicaciones de tamaño
mediano y grande
Aplicaciones y sitios web Aplicaciones y sitios web

6. Introducción a Angular
Angular es adecuado para el desarrollo de aplicaciones de tipo
- "SPA" (Single Page Application)
- "PWA" (Progressive Web App)
SPA / PWA
Sitio web tradicional SPA

7. Introducción a Angular
El desarrollo en Angular se realiza
mediante un lenguaje llamado TypeScript
TypeScript
TypeScript es un superset de Javascript que implementa diversas
mejoras en el lenguaje, principalmente el tipado estático.
Todo código Javascript es código válido TypeScript!

8. Introducción a Angular
Para usar Angular debemos comenzar por instalar el CLI.
Primeros pasos
CLI permite crear
aplicaciones, arrancar el
servidor de desarrollo,
construir para producción,
etc.

9. Artefactos

10. Artefactos de Angular
El desarrollo de una aplicación Angular se realiza por medio de
diversas piezas que conocemos comúnmente como artefactos.
- Módulos
- Componentes
- Servicios
- Pipes
- Directivas
Artefactos de Angular

11. Artefactos de Angular
Son contenedores de otros artefactos de la aplicación, como
componentes, servicios, etc.
Son como paquetes que nos permiten segmentar y organizar el
código de las aplicaciones.
Módulos

12. Artefactos de Angular
Un componente es una sección de la página, que tiene una
interfaz gráfica y cierta lógica de aplicación.
Componentes
ng generate component TodoList
ng g c TodoList

13. Artefactos de Angular
Los servicios nos permiten extraer la lógica de acceso a datos de
los componentes.
ng generate service task
ng g s task
Servicios

14. Gracias
Miguel Angel Alvarez
insight@insightcreativos.com
649 76 76 31
@midesweb