Angular

00-ts-intro

Introduccion a typescript

• 01-tipos-basicos
• 02-arr-obj-interface
• 03-funciones
• 04-tarea-tipado
• 05-desestructuracion-basica
• 06-desestructuracion-funcion
• 07-import-export
• 08-clases
• 09-genericos
• 10-decoradores
• 11-optional-chaining

01-bases

• Contador (Module)
• Heroes (Module) (Directivas Estructurales)
• Dragon Ball Z (DBZ) (Module) (Inputs, Outpus, Services, ngModel, FormsModule)

02-gifsApp

• gifs (Module) (ViewChild, Http, LocalStorage)
• shared (Module) (pipe)

03-paisesApp

• SPA - Single Page Aplication
• Router
• RxJs - switchMap
• pipe: json
• HttpParams
• ngClass, class, [class]
• sugerencia - RxJs - autocomplete

04-paisesApp

• Todos los Pipes de Angular a la fecha
  • Uppercase
  • Lowercase
  • TitleCase
  • Date
  • Decimal
  • Currency
  • Percent
  • i18nSelect
  • i18Plural
  • KeyValue
  • Json
  • Async
• PrimeNG
• Módulo especializado para módulos de PrimeNG

05-paisesApp-onlyRoutesChildren

• Rutas Hijas
• Rutas Principales
• LazyLoad
• Multiples estilos en la misma SPA

05-paisesApp

• Rutas Hijas
• Rutas Principales
• LazyLoad
• Multiples estilos en la misma SPA
• Angular Material
• Interfaces y tipado
• Pipes personalizados
• Variables de entorno
• Autocomplete de AngularMaterial
• Peticiones HTTP
• JSON-Server
• Angular Flex y Flexbox
• CRUD
• Pipes Puros e Impuros
• Rutas publicas y Privadas
• Y más...

06-formulariosApp

• Template driven
• ViewChild
• Two way databinding
• Formularios dinámicos
• Checks, radios y switches
• Directivas personalizadas - Nota: este tema se cubre a profundidad después en una sección especializada
• Manejo del formulario y validaciones
• Encapsular módulos y scope de los mismos

Este es un tema fundamental, pero no es el único, hay varias formas de manejar el estado de un formulario, principalmente tenemos Template driven y Model Driven o formularios reactivos, en esta sección trabajaremos con formularios por template.

07-selectores

Esta sección es una extensión de los formularios reactivos, la cual cubre un tema, el manejo de selectores anidados usando RXJS.

08-lifecycle

Implementar los ciclo de vida de angular

09-mapasApp

• Manejo de librerías escritas en JavaScript en TypeScript
• Uso de Mapas basados en Mapbox (el API es similar a la de Google Maps)
• Marcadores
• Eventos
• FlyTo
• Coordenadas geográficas
• Componentes para re-utilización de mapas
• Mantener objetos de forma persistente
• @types
• Zoom
• Range
• Y más

Aunque el uso de mapas no es algo directamente relacionado con Angular, ya que todo se realiza mediante un objeto de una librería de terceros, en este caso Mapbox, es interesante comprender cómo funcionan esas librerías dentro de Angular y cómo poder tener control de los objetos como si fueran propiedades de nuestras clases.

10-graficasApp

• Gráficas dinámicas
• Gráficas de Barra y Dona
• Re-dibujar valores de gráfica
• Gráficas basadas en peticiones HTTP
• Componentes especializados para la re-utilización de gráficas
• Y más...

librería de terceros en Angular, para que comprendamos como mostrar de forma visual la data de nuestros componentes.

11-directivasApp

• Directivas personalizadas
• Directivas estructurales personalizadas
• Manipulación del elemento del DOM que es host de la directiva
• Cambio del HTML y estilos del objeto DOM host.
• Y más

El objetivo de esta sección es crear una directiva que nos ayude a pulir la parte de mensajes de validación de los formularios reactivos, es un ejemplo real y aplicado de una directiva personalizada funcionando.

11-MEAN

Backend

• Fundamentos de Node
• REST Services
• JWT
• MongoDB - Mongo Atlas
• Express framework
• Express validator
• CRUD
• Validaciones
• Modelos de base de datos
• Encriptar contraseñas
• Y más...

Frontend

• Conectar Angular con nuestro backend
• Manejo de JWT
• Lazyload y rutas
• Guards
• Mantener el estado del usuario
• Manejo de errores
• RXJS y Operadores
• SweetAlert