Angular 8: Arquitectura y Fundamentos

(Angular 8, TypeScript, RxJS, REST, CSS y Bootstrap)

Conceptualización, diseño, desarrollo y pruebas de aplicaciones web basadas en Angular 8, TypeScript y RxJS, consumiendo servicios REST en back-end. Se desarrollarán casos prácticos en cada sesión.

Categoría:
  • Descripción
  • Sesiones

Descripción

CURSO

Angular 8: Arquitectura y Fundamentos
(Angular 8, TypeScript, RxJS, REST, CSS y Bootstrap)

RESUMEN

Conceptualización, diseño, desarrollo y pruebas de aplicaciones web basadas en Angular 8, TypeScript y RxJS, consumiendo servicios REST en back-end. Se desarrollarán casos prácticos en cada sesión.

CAPACIDAD

Al culminar el curso, el alumno contará con sólidos conocimientos teóricos y prácticos para la conceptualización, diseño y desarrollo de aplicaciones web basadas en Angular 8 consumiendo de servicios REST; incluyendo el uso de herramientas de automatización para la creación de proyectos, pruebas y análisis de código.

REQUISITOS
  • Conocimientos básicos de JavaScript.
  • Conocimientos básicos de HTML, CSS.
  • Conocimientos básicos de servicios REST.
  • Conocimientos de arquitecturas (fullstack: back-end y front-end).
METODOLOGÍA
  • Exposición de aspectos teóricos.
  • Desarrollo de casos prácticos.
  • Compartir experiencias de los participantes (instructor y alumnos).
  • Discusión de casos empresariales (casuísticas).
  • Evaluación continua (teórica y práctica en cada sesión).
TECNOLOGÍAS Y RECURSOS
  • Servicios REST.
  • Angular 8, TypeScript y RxJS.
  • DOM, CSS y Bootstrap.
  • Augury y NGX Logger.
  • Node.js, npm, Angular CLI y Sass.
  • SPA, MPA y PWA.
Sesión 01:

INTRODUCCIÓN A ANGULAR Y AMBIENTE DE DESARROLLO

  • ¿Qué es Angular?
  • Herramientas de desarrollo (node.js, npm, Angular CLI, sass, WebStorm y VSC).
  • Configuración del ambiente de desarrollo.
  • Páginas SPA (Single Page Applications), MPA (Multiple Page Applications) y PWA (Progressive Web Apps).
  • Evolución de Angular 1.5, 2.x,...5 , 6 , 7 y 8. (En progreso)
  • Análisis comparativo de Angular con Vue.js y React JS.
  • Mi primera aplicación en Angular (BrowserModule, NgModule, AppRoutingModule y AppComponent).
Sesión 02:

INTRODUCCIÓN A TYPESCRIPT Y RXJS

  • Introducción a TypeScript y RxJS.
  • Tipos de datos primitivos (string, number, boolean).
  • Operadores matemáticos, lógicos y relacionales.
  • Variables(let) y constantes (const).
  • Arreglos, enum, any y object.
  • Clases (class) e interfaces(interface).
  • Herencia (extends).
  • Módulos (import y export) y namespaces.
Sesión 03:

ARQUITECTURA DE ANGULAR, LIBRERÍAS, MÓDULOS Y DIRECTIVAS

  • Arquitectura de Angular.
  • Principales librerías (@angular/core, @angular/platform-browser, @angular/forms, @angular/router y @angular/common/http).
  • El decorador (@NgModule, declarations, exports, imports, providers y bootstrap), módulo principal (root module).
  • Directivas de componente (component).
  • Directivas estructurales (*ngIf,*ngFor).
  • Directivas de atributos (NgSwitch, NgStyle y NgClass).
Sesión 04:

COMPONENTES, METADATOS, MODELOS Y SERVICIOS

  • El decorador @Component.
  • Tipos de componentes (públicos y privados), importar y exportar.
  • Ciclo de vida de componentes (ngOnInit, ngOnChanges y ngOnDestroy).
  • Atributos y métodos de un componente(@Input() y @Output()).
  • Metadatos (selector, moduleId, templateUrl/ template, styleUrls/ styles).
  • Modelos (class), atributos y métodos.
  • Servicios (@Injectable), atributos y métodos.
  • Inyección de dependencia (DI) usando providers en @NgModule, @Component y a nivel de constructor.
Sesión 05:

PLANTILLAS, ESTILOS, DATA BINDING Y RUTAS

  • Plantillas y estilos en línea (template y styles).
  • Plantillas y estilos en archivos separados (templateUrl y styleUrls).
  • Data binding (interpolación {{...}}, property binding, event binding y two-way binding).
  • Tuberías (pipes) ( currency, date, number, json, lowercase, uppercase, percent).
  • La liberia @angular/router.
  • Configurando rutas (routes, path, redirectTo y component).
  • Navegabilidad (href, router ,routerLink/routerLinkActive) y rutas no validas (path: “404” y path: “**”).
Sesión 06:

CONSUMO SERVICIOS REST PÚBLICOS (LISTADOS Y BÚSQUEDAS)

  • La librería @angular/common/http (HttpClientModule, HttpClient).
  • La librería @angular/forms (FormControl) .
  • Realización de pruebas de los servicios a consumir con Postman.
  • Implementación de listados simples (uso de GET).
  • Implementación de búsquedas (uso de GET, URL amigable (path) y parámetros (query).
  • Implementando paginación estándar (librerías) o personalizada (servicios utilitarios desarrollados en Angular).
  • Personalizando la presentación con Bootstrap.
Sesión 07:

CONSUMO SERVICIOS REST PRIVADOS (MANTENIMIENTO)

  • La librería @angular/comm.on/http (HttpEven.t, HttpInterceptor, HttpHandler y HttpRequest).
  • La librería @angular/forms (Formularios reactivos: FormGroup y FormBuilder).
  • Implementación de un CRUD (GET, POST, PUT Y DELETE); el servicio será publicado por el instructor.
  • Validación de formularios, mensajes personalizados (uso de estilos).
  • Trabajando con interceptors(HttpInterceptor) (RxJS).
  • Gestión de errores y excepciones.
  • Personalizando la presentación con Bootstrap.
Sesión 08:

DEPURACIÓN, REPASO Y EVALUACIÓN

  • Console.log, debbuger y breakpoints.
  • Herramientas y plugins (JSON pipe, NGX Logger y Augury).
  • Repaso general de un caso práctico.
  • Evaluación teórica y solución por parte del instructor.
  • Evaluación práctica y solución por parte del instructor.
  • Lecciones aprendidas.
  • Cierre del curso.