Angular 6 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 6 desde cero
(Angular, TypeScript, RxJS, REST, Postman, SPA, Logger y Augury)

RESUMEN

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.

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 JS 6 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 avanzados 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, Vue Js y React
  • TypeScript y RxJS
  • DOM y CSS
  • Angular Logger y Augury
  • Node.js, npm, gulp, bower y sass
  • PA(Single Page Applications)
Sesión 01:

INTRODUCCIÓN A ANGULAR Y AMBIENTE DE DESARROLLO

  • ¿Qué es Angular? y ¿El Zen de Angular?
  • Herramientas de desarrollo (node.js, gulp, bower y sass)
  • Configuración del ambiente de desarrollo
  • Páginas SPA(Single Page Applications) y PWA (Progressive Web Apps)
  • Evolución de Angular 1.5, 2.x,...5 y 6
  • Análisis comparativo de Angular con Vue Js y React
  • 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:

CREACIÓN DE SERVICIOS REST

  • Introducción a REST (Representational State Transfer)
  • JAX-RS 2.0 y RESTful
  • Recursos, métodos y anotaciones: @Path, Métodos HTTP (@GET, @PUT, @POST y @DELETE)
  • Producción y consumo (@Produces, @Consumes y application/json)
  • Creando un servicio REST CRUD con acceso a base de datos
  • Pruebas del servicio usando Postman.
Sesión 07:

CONSUMO SERVICIOS REST

  • La librería @angular/common/http (HttpClientModule, HttpClient, HttpEvent, HttpInterceptor, HttpHandler y HttpRequest)
  • La librería @angular/forms
  • Consulta de datos del servidor (GET)
  • Envío de datos al servidor (POST, PUT Y DELETE)
  • Validación de formularios y estados
  • Trabajando con interceptors (HttpInterceptor) (RxJS)
  • Gestión de errores y excepciones.
Sesión 08:

DEPURACIÓN, REPASO Y EVALUACIÓN

  • Console.log, debbuger y breakpoints
  • Herramientas y plugins (JSON pipe, ng.probe, Angular 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.