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?

Entorno dedesarrollo

Entorno de desarrollo

IDE:

y npmExtensión Extensión

Visual Studio CodeGitNodeJS

ColorZillaPage Ruler

https://code.visualstudio.com/Downloadhttps://git-scm.com/downloadshttps://nodejs.org/en/download/http://www.colorzilla.com/https://blarg.co.uk/tools/page-ruler

Git

Comandos básicos

Clonar un repositorio:

git clone URL Descargar última versión del repositorio:

git pull origin master

Configuración proxy

git config --global http.proxy http://username:password@host:port

git config --global https.proxy http://username:password@host:port

NodeJS y npm

npm

Instalar última versión después de instalar nodeJS(configurar proxy si es necesario)Repositorio de módulos distribuiblesMódulos globales y módulos localesLa carpeta node_modulesEl archivo package.json:

Registro de dependenciasDependencias de desarrollo y de producciónVersiones (SEMVER)Tareas (objeto scripts)

Comandos npm

Crear el archivo package.json: npm init -yInstalar un paquete de producción: npm install paqueteInstalar un paquete de desarrollo: npm install paquete --save-devInstalar todas las dependencias npm installInstalar las dependencias de desarrollo npm install [--production]

Configuración proxy

npm config set proxy http://username:password@host:port

npm config set https-proxy http://username:password@host:port

Bootstrap

Bootstrap

Cargar Bootstrap

npm bootstrap

BreakpointsLas zonas xs, sm, md y lgLa grid ( y )

12 columnasGutter.container > .row > .col-*.col-*-offset-*

ejemplo 1 ejemplo 2

https://codepen.io/mariogl/pen/XMPaEehttps://codepen.io/mariogl/pen/ZOrdYK

Bootstrap - clases útiles

hidden-*, visible-*, hide, showpull-left y pull-righttext-left, text-center, text-rightlist-unstyled, list-inlineclearfiximg-responsive, img-circle, img-thumbnailtext-primary, text-success, text-info, text-warning, text-dangerbg-primary, bg-success, bg-info, bg-warning, bg-dangercenter-block

Bootstrap - formularios

.form-group

.form-control

.btn, .btn-default, .btn-primary, etc.

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?¡Webpack!TS -> ES5 -> webpack -> bundle -> browser = angular-cli

ES6

let y constTemplate literalsfor ... ofFuncionesOperador spreadArrow functionClases

Propiedades y métodosHerencia con extends y super()Getters y settersMétodos estáticos

Módulos

Iterables

Propiedad lengthMétodos:

forEachmapfilterreducefindindexOf

Encadenamiento

TypeScript

TypeScript

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

TypeScript

Tipos básicos:numberstringbooleanArrayanyvoid

EnumUnion types

TypeScript

FuncionesSin flexibilidad en el número de parámetrosParámetros opcionales

ClasesPropiedades fuera del constructorVisibilidad de los miembros

Modificador readonlyPropiedades estáticasInterfaces

TypeScript

Decoradores (@)

Angular

ya era hora...

Primeros pasos

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

hmr

https://github.com/angular/angular-cli/wiki/stories-configure-hmr

Esqueleto de una pieza en Angular

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

Examinando un componente

Metadataselectortemplate / templateUrlstyles / styleUrls

Examinando un template

Custom elementsData bindingInterpolationProperty bindingClass & style bindingEvent bindingTwo-way binding

Examinando un template

Directivas de atributongClassngStyle

Directivas estructuralesngIfngForngSwitch

Pipes@Pipe, PipeTransform

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 HttpClientModule

Módulo HttpClientModule y servicio HttpClientMétodos del servicio HttpClient:get(), post(), put(), patch(), delete()

Navegación por la app

El routerLas rutas

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

El RouterOutletLinks de navegación: routerLink y routerLinkActiverouter.navigate()History APIEl servicio Title

Despliegue a producción

Pruebas con ng buildng build:

--prod: optimiza el código--base-href=: cambia el directorio base--sourcemaps: genera los source maps

Links

Documentación oficial de Bootstrap 3Documentació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 APIAngular en navegadores antiguosCDs y vinilos de El Fary

https://getbootstrap.com/docs/3.3/https://angular.io/docshttp://plnkr.co/edithttps://www.typescriptlang.org/play/index.htmlhttps://www.typescriptlang.org/docs/handbook/compiler-options.htmlhttps://github.com/angular/angular-cli/wikihttps://github.com/angular/angular-cli/wiki/angular-clihttps://developer.mozilla.org/en-US/docs/Web/JavaScripthttps://github.com/typicode/json-serverhttps://angular.io/guide/browser-supporthttps://www.amazon.es/El-Fary-CDs-vinilos/s?ie=UTF8&page=1&rh=n%3A599373031%2Ck%3AEl%20Fary

mario@mariogl.com

@marioglweb

mailto:mario@mariogl.comhttps://twitter.com/marioglweb