Capacitación Angular

Setup

Prerrequisitos

• NodeJs

• Angular CLI

  Para instalar le Angular Cli ejecutar el siguiente comando en la consola.

   npm install -g @angular/cli
  

• Visual Studio Code

  Recomendación: Instalar la extensión Angular Essentials ya que contiene otras extensiones muy utiles para el desarrollo de aplicaciones Angular en Visual Studio Code.

  NOTA: La extensión de Angular Essentials instala una extensión que se ejecuta en el puerto 8888

Día 1: Introducción

• Javascript Moderno
  • Funciones Flecha
  • Let & Const
  • Destructuración
  • Parametro con valor por defecto
  • Parametros Rest
  • Operador de propagación (Spread)
  • For..of
  • Más información aquí
• Typescript
  • Tipos de Datos
    • Boolean
    • String
    • Number
    • Array
    • Tuple
    • Enum
    • Any
    • Void
    • Null o Undefined
    • Mas información aquí
  • Clases
  • Interfaces
  • Union Type
  • Intersection Type
  • Optional

Día 2: Básico

• Verificar la Instalación
• Que es Angular
• Crear un proyecto
• Estructura del Proyecto
  • Root
  • Source Folder
  • App Folder
• Conceptos Importantes
  • Decoradores
    • Decoradores de Clase
    • Decoradores de Propiedad
  • Módulos
  • Componentes

Día 3: Databinding

• Databinding
  • Interpolación
  • Property Binding
  • Event Binding
  • Attribute Binding
  • Class Binding
  • Style Binding
  • Two-way Data Binding
• Directivas
  • ngIf
  • ngFor
  • ngStyle
• Debugging

Día 4: Proyecto de Práctica

• Angular Material
• Angular Flex Layout
• Código guía
• Paso a Paso
  • Crear el proyecto
  • Agregar Angular Material
  • Agregar Flex Layout
  • Crear los componentes
  • Importar los módulos de Angular Material
  • Crear los modelos
  • NavbarComponent
  • BookListComponent
  • BookDetailComponent
  • BooksComponent
  • AppComponent
  • Ejecutar

Día 5: Reto

• Todo App

  • Crear una aplicación que sirva para agregar tareas pendientes y luego marcarlas como finalizadas o eliminarlas. (usando @input() y @Output())

  

Día 6: Servicios y Routing

• Servicios
• Routing
• Pipes

Día 7: Forms (Template Driven / Reactive)

• Forms
  • Template Driven
    • Configuración
    • Formulario Básico
    • Mensaje de Error / Validaciones
    • Estilos
  • Reactive Forms

Día 8: Peticiones Http y Deploy

• Http Request
• Deploy