Angular 7 desde cero

(Angular, TypeScript, RxJS, REST, Postman, SPA, Logger y Augury)

Conceptualización, diseño, desarrollo y pruebas aplicaciones web basadas en Angular JS 6, TypeScript y RxJS, consumiendo servicios REST en back-end. Se desarrollará un caso práctico empresarial incluyendo pruebas, depuración y monitoreo.

  • Descripción
  • Sesiones

Descripción

CURSO

Angular 7 desde cero
(Angular 7, TypeScript, RxJS, REST, Postman, SPA, MPA y PWA, NGX Logger y Augury)

RESUMEN

Conceptualización, diseño, desarrollo y pruebas aplicaciones web basadas en Angular 7, TypeScript y RxJS, consumiendo servicios REST en back-end. Se desarrollará un caso práctico empresarial incluyendo pruebas, depuración y monitoreo.

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 7 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 7, TypeScript y RxJS.
  • DOM, CSS, 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.