Programación en Angular

TEMARIO

CLASE 1

• ¿Qué es Angular?

• Herramientas a usar

• Instalación de Angular

• Herramienta Angular CLI

• Comandos (ng new – generate – serve –update – doc)

• Creación del proyecto y prueba

CLASE 2

• Archivos y carpetas del proyecto Angular

• Explicación de patrón a MVC vs MVVM

• Interpolación en los archivos HTML de Angular

• Directivas *ngIf y *ngFor

CLASE 3

• Captura de Eventos

• Directiva ngModel

• Introducción a componentes

• Creación de un componente

CLASE 4

• Pasar datos de la componente padre a la hija

• Disparo de eventos de la componente hija a la componente padre

• Llamar a métodos de la componente hija desde el template del padre

• Llamar a métodos de la componente hija desde la clase padre

• Enlace de propiedades (Property Binding)

CLASE 5

• Introducción a módulos

• Creación y uso

• Petición de un archivo Json a un servidor

• Definición de rutas (Router)

CLASE 6

• Introducción a servicios

• Concepto, creación y usos

• Recuperación de datos de un servidor web en un servicio

• Definición de pipes

• Creación de pipes personalizados

CLASE 7

• Introducción a TypeScript

• Tipado Estático

• Clases

• Funciones y Métodos

• Herencia

• Interfaces

• Clases Genéricos

CLASE 8

• Angular Material

• Extensión para Visual Studio

• Formularios

• Input

• Selectores mat-radio-button

• Mat-radio-group

• mat-checkbox

• mat-select

• mat-slider

• mat-slide-toggle

CLASE 9

• Angular Material Layouts – tabs

• Tablas (mat-table)

• Paginación (mat-paginator)

• Ordenamiento (matSort)

• Diálogos (MatDialog)

CLASE 10

• Menú (mat-menu)

• Menú anidado

• Menú (mat-card y mat-toolbar)

• Panel (max-expansion-panel)

• Otras Componentes

• Librerias que compiten con Angular Material

CLASE 11

• Instalar Bootstrap

• Creación barra de menu

• Creación alerta

• Creación de tablas

• Creación de tarjetas

CLASE 12

• Introducción a ng-bootstrap y ngx-bootstrap

• Creación de proyecto con ng-bootstrap

• Creación de proyecto con ngx-bootstrap

• Estructura completa *ngIf

• Estructura completa *ngFor

• Estructuras *ngSwitchCase, *ngSwitchDefault, *ngSwitch

CLASE 13

• Directiva atributo [ngStyle] y estilos individuales

• Directiva atributo [ngClass] y clases individuales

• Directiva de atributo - creación personalizada

• Directiva de atributo – definición de propiedades

• Directiva de atributo – responder a eventos del usuario

CLASE 14

• Directiva estructural – creación

• Router – parámetros en una ruta

• Router – Captura de ruta no existente

• Router – Rutas anidadas

• Router – Lazy Loading (Carga perezosa)

CLASE 15

• Formularios basados en plantillas y reactivos

• Formularios Reactivos – ReactiveFormsModule, FormControl, FormGroup

• Formularios Reactivos – Checkbox, radio y select

• Formularios Reactivos – FormFroup anidados

• Formularios Reactivos Validación

• Formularios Reactivos – Validación personalizada

• Formulario Reactivo- FormBuilder