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