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
@marioglweb
mailto:[email protected]://twitter.com/marioglweb