angular · ¿qué es angular? framework js spa: single page applications ¿angular 2? ¿4?...

34
Angular

Upload: others

Post on 07-Jun-2020

2 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Angular · ¿Qué es Angular? Framework JS SPA: Single Page Applications ¿Angular 2? ¿4? ¿AngularJS? JavaScript. JavaScript Interpretado, compilado y ejecutado en el navegador

Angular

Page 2: Angular · ¿Qué es Angular? Framework JS SPA: Single Page Applications ¿Angular 2? ¿4? ¿AngularJS? JavaScript. JavaScript Interpretado, compilado y ejecutado en el navegador

TemarioIntroducción a TypeScript Introducción a Angular 2Herramientas de DesarrolloMódulosPlantillasFormulariosServiciosAcceso al servidorEnrutamiento y navegación

Page 3: Angular · ¿Qué es Angular? Framework JS SPA: Single Page Applications ¿Angular 2? ¿4? ¿AngularJS? JavaScript. JavaScript Interpretado, compilado y ejecutado en el navegador

Introducción aAngular 2

Page 4: Angular · ¿Qué es Angular? Framework JS SPA: Single Page Applications ¿Angular 2? ¿4? ¿AngularJS? JavaScript. JavaScript Interpretado, compilado y ejecutado en el navegador

¿Qué es Angular?

Framework JSSPA: Single Page Applications¿Angular 2? ¿4? ¿AngularJS?

Page 5: Angular · ¿Qué es Angular? Framework JS SPA: Single Page Applications ¿Angular 2? ¿4? ¿AngularJS? JavaScript. JavaScript Interpretado, compilado y ejecutado en el navegador

JavaScript

Page 6: Angular · ¿Qué es Angular? Framework JS SPA: Single Page Applications ¿Angular 2? ¿4? ¿AngularJS? JavaScript. JavaScript Interpretado, compilado y ejecutado en el navegador

JavaScript

Interpretado, compilado y ejecutado en el navegadorCada navegador programa su propio motor de JSEstandarización: ECMAScriptLa versión ES6 o ES2015Transpiladores: Babel, TypeScript

Page 7: Angular · ¿Qué es Angular? Framework JS SPA: Single Page Applications ¿Angular 2? ¿4? ¿AngularJS? JavaScript. JavaScript Interpretado, compilado y ejecutado en el navegador

Organización del código JavaScript

Ejemplo de uso clásico de JS: utilizar un plugin dejQuery en nuestra web, o implementar algunainteracción con el usuarioPocas líneas de código, todas en un mismo archivo

Page 8: Angular · ¿Qué es Angular? Framework JS SPA: Single Page Applications ¿Angular 2? ¿4? ¿AngularJS? JavaScript. JavaScript Interpretado, compilado y ejecutado en el navegador

Organización del código JavaScript

Programar toda la UI de una página¿2000 líneas en un solo archivo?

Ventajas Inconvenientes

Difícil de leer/entenderDifícil de mantenerPoca reusabilidadDifícil encontrar código nousadoColisiones de nombres

Una sola peticiónHTTP

Page 9: Angular · ¿Qué es Angular? Framework JS SPA: Single Page Applications ¿Angular 2? ¿4? ¿AngularJS? JavaScript. JavaScript Interpretado, compilado y ejecutado en el navegador

Organización del código JavaScript

Optimización: dividir el código en variosarchivos/módulos

Ventajas Inconvenientes

Difícil encontrar código nousado (menos difícil queantes)Colisiones de nombresMuchas peticiones HTTPEl orden importa:dependencias

Legible e inteligibleFácil de mantenerReutilizableCargamos sólo lo quenecesitamos

Page 10: Angular · ¿Qué es Angular? Framework JS SPA: Single Page Applications ¿Angular 2? ¿4? ¿AngularJS? JavaScript. JavaScript Interpretado, compilado y ejecutado en el navegador

Organización del código JavaScript

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

Page 11: Angular · ¿Qué es Angular? Framework JS SPA: Single Page Applications ¿Angular 2? ¿4? ¿AngularJS? JavaScript. JavaScript Interpretado, compilado y ejecutado en el navegador

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

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

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

Page 12: Angular · ¿Qué es Angular? Framework JS SPA: Single Page Applications ¿Angular 2? ¿4? ¿AngularJS? JavaScript. JavaScript Interpretado, compilado y ejecutado en el navegador

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

¿Puedo escribir mis módulos como yo quiera? ¿hay unestándar?¿AMD, CommonJS, UMD, ES6?¡TypeScript!TS -> ES5 -> webpack -> bundle -> browser = angular-cli

Page 13: Angular · ¿Qué es Angular? Framework JS SPA: Single Page Applications ¿Angular 2? ¿4? ¿AngularJS? JavaScript. JavaScript Interpretado, compilado y ejecutado en el navegador
Page 14: Angular · ¿Qué es Angular? Framework JS SPA: Single Page Applications ¿Angular 2? ¿4? ¿AngularJS? JavaScript. JavaScript Interpretado, compilado y ejecutado en el navegador

Entorno dedesarrollo

Page 16: Angular · ¿Qué es Angular? Framework JS SPA: Single Page Applications ¿Angular 2? ¿4? ¿AngularJS? JavaScript. JavaScript Interpretado, compilado y ejecutado en el navegador

NodeJS y npm

Page 17: Angular · ¿Qué es Angular? Framework JS SPA: Single Page Applications ¿Angular 2? ¿4? ¿AngularJS? JavaScript. JavaScript Interpretado, compilado y ejecutado en el navegador

npm

Instalar última versión después de instalar nodeJSRepositorio de módulos distribuiblesMódulos globales y módulos localesLa carpeta node_modulesEl archivo package.jsonnpm initnpm install (--production)

Page 18: Angular · ¿Qué es Angular? Framework JS SPA: Single Page Applications ¿Angular 2? ¿4? ¿AngularJS? JavaScript. JavaScript Interpretado, compilado y ejecutado en el navegador

TypeScript

Page 19: Angular · ¿Qué es Angular? Framework JS SPA: Single Page Applications ¿Angular 2? ¿4? ¿AngularJS? JavaScript. JavaScript Interpretado, compilado y ejecutado en el navegador

TypeScript

Superconjunto de JavaScriptTranspila a ES5TipadoErrores en tiempo de compilacióntsctsconfig.json

Page 20: Angular · ¿Qué es Angular? Framework JS SPA: Single Page Applications ¿Angular 2? ¿4? ¿AngularJS? JavaScript. JavaScript Interpretado, compilado y ejecutado en el navegador

TypeScript

let y constTipos básicos:

numberstringbooleanArrayanyvoid

EnumUnion types

Page 21: Angular · ¿Qué es Angular? Framework JS SPA: Single Page Applications ¿Angular 2? ¿4? ¿AngularJS? JavaScript. JavaScript Interpretado, compilado y ejecutado en el navegador

TypeScript

FuncionesArrow functionClases

Visibilidad de los miembrosGetters y settersHerenciaInterfaces

Template literalsMódulos

Page 22: Angular · ¿Qué es Angular? Framework JS SPA: Single Page Applications ¿Angular 2? ¿4? ¿AngularJS? JavaScript. JavaScript Interpretado, compilado y ejecutado en el navegador

TypeScript

for...of, forEachmap, filter, reducefind, indexOfPromesasDecoradores

Page 23: Angular · ¿Qué es Angular? Framework JS SPA: Single Page Applications ¿Angular 2? ¿4? ¿AngularJS? JavaScript. JavaScript Interpretado, compilado y ejecutado en el navegador

Angular

ya era hora...

Page 24: Angular · ¿Qué es Angular? Framework JS SPA: Single Page Applications ¿Angular 2? ¿4? ¿AngularJS? JavaScript. JavaScript Interpretado, compilado y ejecutado en el navegador

Primeros pasos

ng new para generar la appng serve -o para verla en el navegadorEntornos dev y prodComponentes, templates, módulos~MVCEl módulo iniciador y el componente iniciadorArchivos de configuración

Page 25: Angular · ¿Qué es Angular? Framework JS SPA: Single Page Applications ¿Angular 2? ¿4? ¿AngularJS? JavaScript. JavaScript Interpretado, compilado y ejecutado en el navegador

Esqueleto de una pieza en Angular

clase =>=> clase exportada =>=> clase exportada y decorada =>=> dependencias

Page 26: Angular · ¿Qué es Angular? Framework JS SPA: Single Page Applications ¿Angular 2? ¿4? ¿AngularJS? JavaScript. JavaScript Interpretado, compilado y ejecutado en el navegador

Examinando un template

Custom elementsData bindingInterpolationProperty bindingClass & style bindingEvent bindingTwo-way binding

Page 27: Angular · ¿Qué es Angular? Framework JS SPA: Single Page Applications ¿Angular 2? ¿4? ¿AngularJS? JavaScript. JavaScript Interpretado, compilado y ejecutado en el navegador

Examinando un template

Directivas de atributongClassngStyle

Directivas estructuralesngIfngForngSwitch

Pipes

Page 28: Angular · ¿Qué es Angular? Framework JS SPA: Single Page Applications ¿Angular 2? ¿4? ¿AngularJS? JavaScript. JavaScript Interpretado, compilado y ejecutado en el navegador

Examinando un componente

Metadataselectortemplate / templateUrlstyles / stylesUrl

Page 29: Angular · ¿Qué es Angular? Framework JS SPA: Single Page Applications ¿Angular 2? ¿4? ¿AngularJS? JavaScript. JavaScript Interpretado, compilado y ejecutado en el navegador

Formularios

[(ngModel)]: Two-way bindingngForm, ngModel y ngSubmitVariables de template con #Validaciones: los diferentes estadosResetear los estadosTemplate driven y Reactive forms

Page 30: Angular · ¿Qué es Angular? Framework JS SPA: Single Page Applications ¿Angular 2? ¿4? ¿AngularJS? JavaScript. JavaScript Interpretado, compilado y ejecutado en el navegador

Servicios

Dependency InjectionInjectable()ProveedoresSingleton

Page 31: Angular · ¿Qué es Angular? Framework JS SPA: Single Page Applications ¿Angular 2? ¿4? ¿AngularJS? JavaScript. JavaScript Interpretado, compilado y ejecutado en el navegador

Conexiones con el servidor

AsincroníaObservablesSuscripcionesAPI RESTEl módulo HttpClient

GETPOSTPUTDELETE...

Page 32: Angular · ¿Qué es Angular? Framework JS SPA: Single Page Applications ¿Angular 2? ¿4? ¿AngularJS? JavaScript. JavaScript Interpretado, compilado y ejecutado en el navegador

Navegación por la app

El routerLas rutas

Parámetros: ActivatedRoute.params (observable)Página por defecto404Guards

El RouterOutletLinks de navegación: routerLinkrouter.navigate()History API

Page 33: Angular · ¿Qué es Angular? Framework JS SPA: Single Page Applications ¿Angular 2? ¿4? ¿AngularJS? JavaScript. JavaScript Interpretado, compilado y ejecutado en el navegador

Links

Documentación oficial de AngularPlayground para AngularPlayground para TypeScriptConfiguración del compilador TypeScriptDocumentación de Angular CLIConfiguración de Angular CLI: angular-cli.jsonDocumentación sobre todas las API de JavaScriptJSON Server API