Angular

Licencia de Creative Commons mario@mariogl.com

Temario

  • Introducción a TypeScript    
  • Introducción a Angular 2
  • Herramientas de Desarrollo
  • Módulos
  • Plantillas
  • Formularios
  • Servicios
  • Acceso al servidor
  • Enrutamiento y navegación

Introducción a Angular

2

¿Qué es Angular?

  • Framework JS

  • SPA: Single Page Applications

  • ¿Angular 2? ¿4? ¿AngularJS?

JavaScript

JavaScript

  • Interpretado, compilado y ejecutado en el navegador

  • Cada navegador programa su propio motor de JS

  • Estandarización: ECMAScript

  • La versión ES6 o ES2015

  • Transpiladores: Babel, TypeScript

Organización del código JavaScript

  • Ejemplo de uso clásico de JS: utilizar un plugin de jQuery en nuestra web

  • Pocas líneas de código, todas en un mismo archivo

Organización del código JavaScript

  • Complicándonos un poco: programar unos tabs

  • Pocas líneas de código, todas en un mismo archivo

Organización del código JavaScript

  • Un paso de gigante: programar toda la UI de una página

  • ¿2000 líneas en un solo archivo?

Ventajas

Inconvenientes

  • Difícil de leer/entender
  • Difícil de mantener
  • Poca reusabilidad
  • Difícil encontrar código no usado
  • Colisiones de nombres
  • Una sola petición HTTP

Organización del código JavaScript

  • Optimización: dividir el código en varios archivos/módulos

Ventajas

Inconvenientes

  • Difícil encontrar código no usado (menos difícil que antes)
  • Colisiones de nombres
  • Muchas peticiones HTTP
  • El orden importa: dependencias
  • Legible e inteligible
  • Fácil de mantener
  • Reutilizable
  • Cargamos sólo lo que necesitamos

Organización del código JavaScript

  • Dependencias: es difícil asegurar el orden, y no es posible tener dependencias circulares

Organización del código JavaScript: módulos

  • Module loaders: ellos gestionan las dependencias y cargan los módulos (RequireJS, SystemJS)

  • Module bundlers: además de lo anterior, generan un solo código encadenado y minificado (browserify, webpack)

Organización del código JavaScript: módulos

  • ¿Puedo escribir mis módulos como yo quiera? ¿hay un estándar?

  • ¿AMD, CommonJS, UMD, ES6?

  • ¡TypeScript!

  • TS -> ES5 -> webpack -> bundle -> browser =

angular-cli

Entorno de desarrollo

Entorno de desarrollo

NodeJS y npm

npm

  • Instalar última versión después de instalar nodeJS

  • Módulos globales y módulos locales

  • La carpeta node_modules

  • El archivo package.json

  • npm init

TypeScript

TypeScript

  • Superconjunto de JavaScript

  • Transpila a ES5

  • Tipado

  • Errores en tiempo de compilación

  • tsc

  • tsconfig.json

TypeScript

  • let y const

  • Tipos básicos:

    • number

    • string

    • boolean

    • Array

    • any

    • void

  • Enum

  • Union types

TypeScript

  • Funciones

  • Arrow function

  • Clases

    • Visibilidad de los miembros

    • Getters y setters

    • Herencia

    • Interfaces

  • Template literals

  • Módulos

TypeScript

  • for...of, forEach

  • map, filter, reduce

  • find, indexOf

  • Promesas

  • Decoradores

Angular

ya era hora...

Primeros pasos

  • ng new para generar la app

  • ng serve -o para verla en el navegador

  • Componentes, templates, módulos

  • ~MVC

  • El módulo iniciador y el componente iniciador

  • Entornos dev y prod

  • Archivos de configuración

Esqueleto de una pieza en Angular

  • clase =>

  • => clase exportada =>

  • => clase exportada y decorada =>

  • => dependencias

Examinando un template

  • Custom elements

  • Data binding

  • Interpolation

  • Property binding

  • Class & style binding

  • Event binding

  • Two-way binding

Examinando un template

  • Directivas de atributo

    • ngClass

    • ngStyle

  • Directivas estructurales

    • ngIf

    • ngFor

    • ngSwitch

  • Pipes

Examinando un componente

  • Metadata

    • selector

    • template / templateUrl

    • styles / stylesUrl

  • Directivas estructurales

    • ngIf

    • ngFor

    • ngSwitch

  • Pipes

Formularios

  • [(ngModel)]: Two-way binding

  • ngForm, ngModel y ngSubmit

  • Variables de template con #

  • Validaciones: los diferentes estados

  • Resetear los estados

  • Template driven y Reactive forms

Servicios

  • Dependency Injection

  • Injectable()

  • Proveedores

  • Singleton

Conexiones con el servidor

  • Asincronía

  • Observables

  • Suscripciones

  • API REST

  • El módulo HttpClient

    • GET

    • POST

    • PUT

    • DELETE

    • ...

Navegación por la app

  • El router

  • Las rutas

  • El RouterOutlet

  • Links de navegación

  • History API

Links