Angular

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

Introducción aAngular 2

¿Qué es Angular?

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

JavaScript

JavaScript

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

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

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

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

Organización del código JavaScript

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

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)

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

Entorno dedesarrollo

Entorno de desarrollo

IDE: (Atom, Angular IDE...)

y npm

Visual Studio CodeGitNodeJSAngular CLITypeScript

NodeJS y npm

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)

TypeScript

TypeScript

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

TypeScript

let y constTipos básicos:

numberstringbooleanArrayanyvoid

EnumUnion types

TypeScript

FuncionesArrow functionClases

Visibilidad de los miembrosGetters y settersHerenciaInterfaces

Template literalsMódulos

TypeScript

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

Angular

ya era hora...

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

Esqueleto de una pieza en Angular

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

Examinando un template

Custom elementsData bindingInterpolationProperty bindingClass & style bindingEvent bindingTwo-way binding

Examinando un template

Directivas de atributongClassngStyle

Directivas estructuralesngIfngForngSwitch

Pipes

Examinando un componente

Metadataselectortemplate / templateUrlstyles / stylesUrl

Formularios

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

Servicios

Dependency InjectionInjectable()ProveedoresSingleton

Conexiones con el servidor

AsincroníaObservablesSuscripcionesAPI RESTEl módulo HttpClient

GETPOSTPUTDELETE...

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

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

mario@mariogl.com

@marioglweb