![Page 1: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/1.jpg)
IFC0219CL
Desarrollo web con Angular:aplicaciones innovadoras y
escalables
![Page 2: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/2.jpg)
TemarioTemario1. Introducción a JavaScript y Angular 7
Repaso de JS¿Por qué Angular?VentajasCaracterísticasInstalaciónCreación de proyecto
2. ES8ClasesArrow FunctionsÁmbitoOperador de programaciónArgumentos variablesCaracterísticasValores por defecto de los parámetrosDestructuring
3. TypeScriptTSCTypesFuncionesInterfacesDecoradores
4. ComponentesMetadatos de componentesCreación de un componenteData bindingAnidado de componentesPasando datos al componenteRespondiendo a eventosCiclo de VidaEstilos
5. Directivas y serviciosAttribute DirectivesStructural DirectivesProcesado de recursosClientes RESTful
6. RoutingIntroducciónImports del RouterConfiguraciónRouter OutletRouter LinksRutas con parámetrosUsando los parámetros del padreRouter Guards
![Page 3: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/3.jpg)
TemarioTemario7. Formularios
IntroducciónFormularios basados en plantillasCrear FormularioCrear componente del formularioRevisar app.module.tsCrear una plantilla HTML inicialAñadir selector con directivasControlar estado y validezEnviar formulario con ngSubmit
8. PipesDatePipeDecimalPipeCurrencyPipeLowerCasePipe y UpperCasePipeJSONpipePercentPipe y SlicePipe
9. HTTPIntroducciónImplementaciónObteniendo datos JSONPor qué implementar un servicioVerificación de tipo de respuestaLeyendo la respuesta completaManejar erroresObtener los detalles del errorRetryObservables y operadoresPetición de datos no JSONEnviar datos al servidorPetición POSTPetición DELETEPetición PUTAlternativa axios
10. TestingTestingKarmaTesting a componentes
11. Animaciones1. Translate2. Rotate3. Scale4. Animaciones
![Page 4: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/4.jpg)
TemarioTemario12. Angular Material Design
Introducción¿Qué es Material Design?InstalaciónComponentesButtonsNavigation – MenúMenú AnidadoNavigation – SidenavNavigation – ToolbarPosicionar toolbar contentControles de formularioLayout – GridLayout – CardComponente Mat-table
13. Creación de un proyecto simple con Angular 7Conexión a base de datosAlta, baja y modificación y consulta de datos
![Page 5: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/5.jpg)
Introducción aIntroducción aAngularAngular
![Page 6: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/6.jpg)
¿Qué es Angular?
![Page 7: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/7.jpg)
¿Qué es Angular?
Framework JS
![Page 8: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/8.jpg)
¿Qué es Angular?
Framework JSSPA: Single Page Applications
![Page 9: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/9.jpg)
¿Qué es Angular?
Framework JSSPA: Single Page ApplicationsTypeScript
![Page 10: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/10.jpg)
¿Qué es Angular?
Framework JSSPA: Single Page ApplicationsTypeScriptCódigo fuente y código compilado
![Page 11: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/11.jpg)
¿Qué es Angular?
Framework JSSPA: Single Page ApplicationsTypeScriptCódigo fuente y código compilado¿Angular 2? ¿8? ¿AngularJS?
![Page 12: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/12.jpg)
Entorno deEntorno dedesarrollodesarrollo
![Page 13: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/13.jpg)
Entorno de desarrollo
IDE:
Configurar:Format on Paste y Format on Save"editor.codeActionsOnSave": { "source.fixAll.tslint": true }
y npmExtensión para el navegador
Visual Studio CodeSpanish Language Pack for Visual Studio CodeEditorConfig for VS CodeTSLintAngular Language Service
GitNode.js
Augury
![Page 14: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/14.jpg)
GitGit
![Page 15: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/15.jpg)
Comandos básicos
![Page 16: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/16.jpg)
Comandos básicos
Clonar un repositorio: git clone URL
![Page 17: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/17.jpg)
Comandos básicos
Clonar un repositorio: git clone URL Descargar última versión del repositorio: git pull origin master
![Page 18: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/18.jpg)
Configuración proxy
git config --global http.proxy http://username:password@host:port
git config --global https.proxy http://username:password@host:port
![Page 19: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/19.jpg)
Node.js y npmNode.js y npm
![Page 20: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/20.jpg)
npm
![Page 21: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/21.jpg)
npm
Instalar última versión después de instalar Node.js (configurar proxy si es necesario): npm install -g npm
![Page 22: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/22.jpg)
npm
Instalar última versión después de instalar Node.js (configurar proxy si es necesario): npm install -g npmRepositorio de módulos distribuibles
![Page 23: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/23.jpg)
npm
Instalar última versión después de instalar Node.js (configurar proxy si es necesario): npm install -g npmRepositorio de módulos distribuiblesMódulos globales y módulos locales
![Page 24: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/24.jpg)
npm
Instalar última versión después de instalar Node.js (configurar proxy si es necesario): npm install -g npmRepositorio de módulos distribuiblesMódulos globales y módulos localesLa carpeta node_modules
![Page 25: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/25.jpg)
npm
Instalar última versión después de instalar Node.js (configurar proxy si es necesario): npm install -g npmRepositorio de módulos distribuiblesMódulos globales y módulos localesLa carpeta node_modulesEl archivo package.json:
![Page 26: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/26.jpg)
npm
Instalar última versión después de instalar Node.js (configurar proxy si es necesario): npm install -g npmRepositorio de módulos distribuiblesMódulos globales y módulos localesLa carpeta node_modulesEl archivo package.json:
Registro de dependencias
![Page 27: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/27.jpg)
npm
Instalar última versión después de instalar Node.js (configurar proxy si es necesario): npm install -g npmRepositorio de módulos distribuiblesMódulos globales y módulos localesLa carpeta node_modulesEl archivo package.json:
Registro de dependenciasDependencias de desarrollo y de producción
![Page 28: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/28.jpg)
npm
Instalar última versión después de instalar Node.js (configurar proxy si es necesario): npm install -g npmRepositorio 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)
![Page 29: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/29.jpg)
Comandos npm
![Page 30: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/30.jpg)
Comandos npmInstalar un paquete globalmente: npm install -g paquete
![Page 31: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/31.jpg)
Comandos npmInstalar un paquete globalmente: npm install -g paqueteInstalar un paquete de producción: npm install paquete
![Page 32: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/32.jpg)
Comandos npmInstalar un paquete globalmente: npm install -g paqueteInstalar un paquete de producción: npm install paqueteInstalar un paquete de desarrollo: npm install paquete --save-dev
![Page 33: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/33.jpg)
Comandos npmInstalar un paquete globalmente: npm install -g paqueteInstalar un paquete de producción: npm install paqueteInstalar un paquete de desarrollo: npm install paquete --save-devInstalar todas las dependencias: npm install
![Page 34: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/34.jpg)
Comandos npmInstalar un paquete globalmente: npm install -g paqueteInstalar 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 producción: npm install --production
![Page 35: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/35.jpg)
Comandos npmInstalar un paquete globalmente: npm install -g paqueteInstalar 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 producción: npm install --productionListar paquetes instalados: npm list --depth=0 (locales) npm list -g --depth=0 (globales)
![Page 36: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/36.jpg)
angular-cli
![Page 37: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/37.jpg)
angular-cliInstalación global: npm install -g @angular/cli
![Page 38: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/38.jpg)
Configuración proxy
npm config set proxy http://username:password@host:port
npm config set https-proxy http://username:password@host:port
![Page 39: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/39.jpg)
JavaScriptJavaScript
![Page 40: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/40.jpg)
JavaScript
![Page 41: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/41.jpg)
JavaScript
Interpretado, compilado y ejecutado en el navegador
![Page 42: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/42.jpg)
JavaScript
Interpretado, compilado y ejecutado en el navegadorCada navegador programa su propio motor de JS
![Page 43: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/43.jpg)
JavaScript
Interpretado, compilado y ejecutado en el navegadorCada navegador programa su propio motor de JSEstandarización: ECMAScript
![Page 44: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/44.jpg)
JavaScript
Interpretado, compilado y ejecutado en el navegadorCada navegador programa su propio motor de JSEstandarización: ECMAScriptLa versión ES6 o ES2015
![Page 45: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/45.jpg)
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 46: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/46.jpg)
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 47: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/47.jpg)
Organización del código JavaScript
![Page 48: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/48.jpg)
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 usuario
![Page 49: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/49.jpg)
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 50: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/50.jpg)
Organización del código JavaScript
![Page 51: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/51.jpg)
<head> <meta charset="UTF-8"> <title>Mi web</title> <script src="vendor/jquery/jquery.min.js"></script> <script src="js/tabs.js"></script> </head>
Organización del código JavaScript
![Page 52: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/52.jpg)
<head> <meta charset="UTF-8"> <title>Mi web</title> <script src="vendor/jquery/jquery.min.js"></script> <script src="js/tabs.js"></script> </head>
(function($) { $(document).ready(function() { // Al hacer clic en una pestaña $(".tab a").on("click", function(e) { // Anulamos el link e.preventDefault(); // Ocultamos todos los bloques de contenido // y mostramos sólo el que se ha elegido var content_id = $(this).attr("href"); $(".tab-content").hide(); $(content_id).show(); // Desmarcamos la pestaña que estuviera activa // y marcamos la clicada como activa $(".tab.active").removeClass("active"); $(this).closest(".tab").addClass("active"); }) }) })(jQuery);
Organización del código JavaScript
24 líneas
![Page 53: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/53.jpg)
Organización del código JavaScript
![Page 54: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/54.jpg)
Organización del código JavaScript
<head> <meta charset="UTF-8"> <title>Mi web</title> <script src="vendor/jquery/jquery.min.js"></script> <script src="js/ui.js"></script> </head>
![Page 55: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/55.jpg)
Organización del código JavaScript
<head> <meta charset="UTF-8"> <title>Mi web</title> <script src="vendor/jquery/jquery.min.js"></script> <script src="js/ui.js"></script> </head>
(function($) { $(document).ready(function() { $(document).on('click', '.tab_new', offerGroupSwitchTabs); $(document).on('click', '.navigationServices-li', jumpTo); $('.load-more_new').on('click', loadMore).each(function() { $(this).data('main', $(this).text()); }); }) var loadMore = function(e) { e.preventDefault(); var $list = $(this).prev('.promos-list_new'); var button_text = $(this).data('main'); var button_alt_text = $(this).data('alt'); if ($(window).width() > 992) { var hidden_classes = ".hidden"; var $hidden = $list.find(hidden_classes); var n_show = 3; } else if ($(window).width() > 768) { var hidden_classes = ".hidden, .hidden-sm"; var $hidden = $list.find(hidden_classes); var n_show = 2; } else { var hidden_classes = ".hidden, .hidden-sm, .hidden-xs"; var $hidden = $list.find(hidden_classes); var n_show = 1;
75 líneas
![Page 56: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/56.jpg)
Organización del código JavaScript
![Page 57: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/57.jpg)
Organización del código JavaScript
Programar toda la UI de una página
![Page 58: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/58.jpg)
Organización del código JavaScript
Programar toda la UI de una página(function() { CodeMirror.defineMode("javascript", function(config, parserConfig) { var indentUnit = config.indentUnit; var jsonMode = parserConfig.json; // Tokenizer var keywords = function(){ function kw(type) {return {type: type, style: "keyword"};} var A = kw("keyword a"), B = kw("keyword b"), C = kw("keyword c"); var operator = kw("operator"), atom = {type: "atom", style: "atom"}; return { "if": A, "while": A, "with": A, "else": B, "do": B, "try": B, "finally": B, "return": C, "break": C, "continue": C, "new": C, "delete": C, "throw": C, "var": kw("var"), "const": kw("var"), "let": kw("var"), "function": kw("function"), "catch": kw("catch"), "for": kw("for"), "switch": kw("switch"), "case": kw("case"), "default": kw("de "in": operator, "typeof": operator, "instanceof": operator, "true": atom, "false": atom, "null": atom, "undefined": atom, "NaN": atom, "Inf }; }(); var isOperatorChar = /[+\-*&%=<>!?|]/;
![Page 59: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/59.jpg)
Organización del código JavaScript
Programar toda la UI de una página(function() { CodeMirror.defineMode("javascript", function(config, parserConfig) { var indentUnit = config.indentUnit; var jsonMode = parserConfig.json; // Tokenizer var keywords = function(){ function kw(type) {return {type: type, style: "keyword"};} var A = kw("keyword a"), B = kw("keyword b"), C = kw("keyword c"); var operator = kw("operator"), atom = {type: "atom", style: "atom"}; return { "if": A, "while": A, "with": A, "else": B, "do": B, "try": B, "finally": B, "return": C, "break": C, "continue": C, "new": C, "delete": C, "throw": C, "var": kw("var"), "const": kw("var"), "let": kw("var"), "function": kw("function"), "catch": kw("catch"), "for": kw("for"), "switch": kw("switch"), "case": kw("case"), "default": kw("de "in": operator, "typeof": operator, "instanceof": operator, "true": atom, "false": atom, "null": atom, "undefined": atom, "NaN": atom, "Inf }; }(); var isOperatorChar = /[+\-*&%=<>!?|]/;
1445 líneas
![Page 60: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/60.jpg)
Organización del código JavaScript
![Page 61: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/61.jpg)
Organización del código JavaScript
¿2000 líneas en un solo archivo?
![Page 62: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/62.jpg)
Organización del código JavaScript
¿2000 líneas en un solo archivo?
Ventajas Inconvenientes
![Page 63: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/63.jpg)
Organización del código JavaScript
¿2000 líneas en un solo archivo?
Ventajas Inconvenientes
Difícil de leer/entender
![Page 64: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/64.jpg)
Organización del código JavaScript
¿2000 líneas en un solo archivo?
Ventajas Inconvenientes
Difícil de leer/entenderDifícil de mantener
![Page 65: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/65.jpg)
Organización del código JavaScript
¿2000 líneas en un solo archivo?
Ventajas Inconvenientes
Difícil de leer/entenderDifícil de mantenerPoca reusabilidad
![Page 66: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/66.jpg)
Organización del código JavaScript
¿2000 líneas en un solo archivo?
Ventajas Inconvenientes
Difícil de leer/entenderDifícil de mantenerPoca reusabilidadDifícil encontrar código nousado
![Page 67: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/67.jpg)
Organización del código JavaScript
¿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
![Page 68: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/68.jpg)
Organización del código JavaScript
¿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 69: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/69.jpg)
Organización del código JavaScript
![Page 70: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/70.jpg)
Organización del código JavaScript
Optimización: dividir el código en variosarchivos/módulos
![Page 71: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/71.jpg)
Organización del código JavaScript
Optimización: dividir el código en variosarchivos/módulos
![Page 72: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/72.jpg)
Organización del código JavaScript
Optimización: dividir el código en variosarchivos/módulos
<head> <meta charset="UTF-8"> <title>Mi web</title> <script src="vendor/jquery/jquery.min.js"></script> <script src="js/modules/tabs.js"></script> <script src="js/modules/banners.js"></script> <script src="js/modules/lightbox.js"></script> <script src="js/modules/scroll.js"></script> <script src="js/modules/carousel.js"></script> <script src="js/modules/slideshow.js"></script> <script src="js/modules/gallery.js"></script> <script src="js/modules/navigation.js"></script> </head>
![Page 73: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/73.jpg)
Organización del código JavaScript
![Page 74: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/74.jpg)
Organización del código JavaScript
Ventajas Inconvenientes
<head> <meta charset="UTF-8"> <title>Mi web</title> <script src="vendor/jquery/jquery.min.js"></script> <script src="js/modules/tabs.js"></script> <script src="js/modules/banners.js"></script> <script src="js/modules/lightbox.js"></script> <script src="js/modules/scroll.js"></script> <script src="js/modules/carousel.js"></script> <script src="js/modules/slideshow.js"></script> <script src="js/modules/gallery.js"></script> <script src="js/modules/navigation.js"></script> </head>
![Page 75: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/75.jpg)
Organización del código JavaScript
Ventajas Inconvenientes
Difícil encontrar código nousado (menos difícil queantes)
<head> <meta charset="UTF-8"> <title>Mi web</title> <script src="vendor/jquery/jquery.min.js"></script> <script src="js/modules/tabs.js"></script> <script src="js/modules/banners.js"></script> <script src="js/modules/lightbox.js"></script> <script src="js/modules/scroll.js"></script> <script src="js/modules/carousel.js"></script> <script src="js/modules/slideshow.js"></script> <script src="js/modules/gallery.js"></script> <script src="js/modules/navigation.js"></script> </head>
![Page 76: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/76.jpg)
Organización del código JavaScript
Ventajas Inconvenientes
Difícil encontrar código nousado (menos difícil queantes)Colisiones de nombres
<head> <meta charset="UTF-8"> <title>Mi web</title> <script src="vendor/jquery/jquery.min.js"></script> <script src="js/modules/tabs.js"></script> <script src="js/modules/banners.js"></script> <script src="js/modules/lightbox.js"></script> <script src="js/modules/scroll.js"></script> <script src="js/modules/carousel.js"></script> <script src="js/modules/slideshow.js"></script> <script src="js/modules/gallery.js"></script> <script src="js/modules/navigation.js"></script> </head>
![Page 77: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/77.jpg)
Organización del código JavaScript
Ventajas Inconvenientes
Difícil encontrar código nousado (menos difícil queantes)Colisiones de nombresMuchas peticiones HTTP
<head> <meta charset="UTF-8"> <title>Mi web</title> <script src="vendor/jquery/jquery.min.js"></script> <script src="js/modules/tabs.js"></script> <script src="js/modules/banners.js"></script> <script src="js/modules/lightbox.js"></script> <script src="js/modules/scroll.js"></script> <script src="js/modules/carousel.js"></script> <script src="js/modules/slideshow.js"></script> <script src="js/modules/gallery.js"></script> <script src="js/modules/navigation.js"></script> </head>
![Page 78: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/78.jpg)
Organización del código JavaScript
Ventajas Inconvenientes
Difícil encontrar código nousado (menos difícil queantes)Colisiones de nombresMuchas peticiones HTTPEl orden importa:dependencias
<head> <meta charset="UTF-8"> <title>Mi web</title> <script src="vendor/jquery/jquery.min.js"></script> <script src="js/modules/tabs.js"></script> <script src="js/modules/banners.js"></script> <script src="js/modules/lightbox.js"></script> <script src="js/modules/scroll.js"></script> <script src="js/modules/carousel.js"></script> <script src="js/modules/slideshow.js"></script> <script src="js/modules/gallery.js"></script> <script src="js/modules/navigation.js"></script> </head>
![Page 79: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/79.jpg)
Organización del código JavaScript
Ventajas Inconvenientes
Difícil encontrar código nousado (menos difícil queantes)Colisiones de nombresMuchas peticiones HTTPEl orden importa:dependencias
Legible e inteligible
<head> <meta charset="UTF-8"> <title>Mi web</title> <script src="vendor/jquery/jquery.min.js"></script> <script src="js/modules/tabs.js"></script> <script src="js/modules/banners.js"></script> <script src="js/modules/lightbox.js"></script> <script src="js/modules/scroll.js"></script> <script src="js/modules/carousel.js"></script> <script src="js/modules/slideshow.js"></script> <script src="js/modules/gallery.js"></script> <script src="js/modules/navigation.js"></script> </head>
![Page 80: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/80.jpg)
Organización del código JavaScript
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 mantener
<head> <meta charset="UTF-8"> <title>Mi web</title> <script src="vendor/jquery/jquery.min.js"></script> <script src="js/modules/tabs.js"></script> <script src="js/modules/banners.js"></script> <script src="js/modules/lightbox.js"></script> <script src="js/modules/scroll.js"></script> <script src="js/modules/carousel.js"></script> <script src="js/modules/slideshow.js"></script> <script src="js/modules/gallery.js"></script> <script src="js/modules/navigation.js"></script> </head>
![Page 81: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/81.jpg)
Organización del código JavaScript
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 mantenerReutilizable
<head> <meta charset="UTF-8"> <title>Mi web</title> <script src="vendor/jquery/jquery.min.js"></script> <script src="js/modules/tabs.js"></script> <script src="js/modules/banners.js"></script> <script src="js/modules/lightbox.js"></script> <script src="js/modules/scroll.js"></script> <script src="js/modules/carousel.js"></script> <script src="js/modules/slideshow.js"></script> <script src="js/modules/gallery.js"></script> <script src="js/modules/navigation.js"></script> </head>
![Page 82: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/82.jpg)
Organización del código JavaScript
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
<head> <meta charset="UTF-8"> <title>Mi web</title> <script src="vendor/jquery/jquery.min.js"></script> <script src="js/modules/tabs.js"></script> <script src="js/modules/banners.js"></script> <script src="js/modules/lightbox.js"></script> <script src="js/modules/scroll.js"></script> <script src="js/modules/carousel.js"></script> <script src="js/modules/slideshow.js"></script> <script src="js/modules/gallery.js"></script> <script src="js/modules/navigation.js"></script> </head>
![Page 83: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/83.jpg)
Organización del código JavaScript
![Page 84: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/84.jpg)
Dependencias: es difícil asegurar el orden, y no esposible tener dependencias circulares
Organización del código JavaScript
![Page 85: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/85.jpg)
Dependencias: es difícil asegurar el orden, y no esposible tener dependencias circulares
Organización del código JavaScript<head> <meta charset="UTF-8"> <title>Mi web</title> <script src="vendor/jquery/jquery.min.js"></script> <script src="js/modules/tabs.js"></script> <script src="js/modules/banners.js"></script> <script src="js/modules/lightbox.js"></script> <script src="js/modules/scroll.js"></script> <script src="js/modules/carousel.js"></script> <script src="js/modules/slideshow.js"></script> <script src="js/modules/gallery.js"></script> <script src="js/modules/navigation.js"></script> </head>
![Page 86: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/86.jpg)
Dependencias: es difícil asegurar el orden, y no esposible tener dependencias circulares
Organización del código JavaScript<head> <meta charset="UTF-8"> <title>Mi web</title> <script src="vendor/jquery/jquery.min.js"></script> <script src="js/modules/tabs.js"></script> <script src="js/modules/banners.js"></script> <script src="js/modules/lightbox.js"></script> <script src="js/modules/scroll.js"></script> <script src="js/modules/carousel.js"></script> <script src="js/modules/slideshow.js"></script> <script src="js/modules/gallery.js"></script> <script src="js/modules/navigation.js"></script> </head>
![Page 87: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/87.jpg)
Organización del código JavaScript: módulos
![Page 88: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/88.jpg)
Module loaders: ellos gestionan las dependencias ycargan los módulos (RequireJS, SystemJS)
Organización del código JavaScript: módulos
![Page 89: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/89.jpg)
Module loaders: ellos gestionan las dependencias ycargan los módulos (RequireJS, SystemJS)
Organización del código JavaScript: módulos
Ventajas Inconvenientes
![Page 90: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/90.jpg)
Module loaders: ellos gestionan las dependencias ycargan los módulos (RequireJS, SystemJS)
Organización del código JavaScript: módulos
Ventajas Inconvenientes
Difícil encontrar código nousado (menos difícil queantes)Muchas peticiones HTTP
![Page 91: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/91.jpg)
Module loaders: ellos gestionan las dependencias ycargan los módulos (RequireJS, SystemJS)
Organización del código JavaScript: módulos
Ventajas Inconvenientes
Difícil encontrar código nousado (menos difícil queantes)Muchas peticiones HTTP
Legible e inteligibleFácil de mantenerReutilizableCargamos sólo lo quenecesitamos
![Page 92: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/92.jpg)
Module loaders: ellos gestionan las dependencias ycargan los módulos (RequireJS, SystemJS)
Organización del código JavaScript: módulos
Ventajas Inconvenientes
Difícil encontrar código nousado (menos difícil queantes)Muchas peticiones HTTP
Legible e inteligibleFácil de mantenerReutilizableCargamos sólo lo quenecesitamosGestión automática dedependencias
![Page 93: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/93.jpg)
Module loaders: ellos gestionan las dependencias ycargan los módulos (RequireJS, SystemJS)
Organización del código JavaScript: módulos
Ventajas Inconvenientes
Difícil encontrar código nousado (menos difícil queantes)Muchas peticiones HTTP
Legible e inteligibleFácil de mantenerReutilizableCargamos sólo lo quenecesitamosGestión automática dedependenciasEncapsulación
![Page 94: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/94.jpg)
Organización del código JavaScript: módulos
![Page 95: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/95.jpg)
Module bundlers: además de lo anterior, generan unsolo código encadenado y minificado (Browserify,webpack, Parcel)
Organización del código JavaScript: módulos
![Page 96: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/96.jpg)
Module bundlers: además de lo anterior, generan unsolo código encadenado y minificado (Browserify,webpack, Parcel)
Organización del código JavaScript: módulos
Ventajas
![Page 97: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/97.jpg)
Module bundlers: además de lo anterior, generan unsolo código encadenado y minificado (Browserify,webpack, Parcel)
Organización del código JavaScript: módulos
Ventajas
Legible e inteligibleFácil de mantenerReutilizableCargamos sólo lo quenecesitamosGestión automática dedependenciasEncapsulación
![Page 98: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/98.jpg)
Una o muy pocasconexiones HTTP
Module bundlers: además de lo anterior, generan unsolo código encadenado y minificado (Browserify,webpack, Parcel)
Organización del código JavaScript: módulos
Ventajas
Legible e inteligibleFácil de mantenerReutilizableCargamos sólo lo quenecesitamosGestión automática dedependenciasEncapsulación
![Page 99: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/99.jpg)
Una o muy pocasconexiones HTTPEliminación de códigono usado (tree shaking)
Module bundlers: además de lo anterior, generan unsolo código encadenado y minificado (Browserify,webpack, Parcel)
Organización del código JavaScript: módulos
Ventajas
Legible e inteligibleFácil de mantenerReutilizableCargamos sólo lo quenecesitamosGestión automática dedependenciasEncapsulación
![Page 100: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/100.jpg)
Organización del código JavaScript: módulos
![Page 101: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/101.jpg)
Organización del código JavaScript: módulos
¿Puedo escribir mis módulos como yo quiera? ¿hay unestándar?
![Page 102: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/102.jpg)
Organización del código JavaScript: módulos
¿Puedo escribir mis módulos como yo quiera? ¿hay unestándar?AMD: Asynchronous Module Definition
![Page 103: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/103.jpg)
Organización del código JavaScript: módulos
¿Puedo escribir mis módulos como yo quiera? ¿hay unestándar?AMD: Asynchronous Module Definition
define(['myModule', 'myOtherModule'], function(myModule, myOtherModule) { return { hello: function() { console.log('hello'); }, goodbye: function() { console.log('goodbye'); } }; });
![Page 104: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/104.jpg)
Organización del código JavaScript: módulos
¿Puedo escribir mis módulos como yo quiera? ¿hay unestándar?AMD: Asynchronous Module Definition
CommonJS
![Page 105: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/105.jpg)
Organización del código JavaScript: módulos
¿Puedo escribir mis módulos como yo quiera? ¿hay unestándar?AMD: Asynchronous Module Definition
CommonJSvar myModuleA = require('myModuleA'); function myModuleB() { this.hello = function() { return 'hello!'; } this.goodbye = function() { return 'goodbye!'; } } module.exports = myModuleB;
![Page 106: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/106.jpg)
Organización del código JavaScript: módulos
¿Puedo escribir mis módulos como yo quiera? ¿hay unestándar?AMD: Asynchronous Module Definition
CommonJS
UMD: Universal Module Definition
![Page 107: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/107.jpg)
Organización del código JavaScript: módulos
¿Puedo escribir mis módulos como yo quiera? ¿hay unestándar?AMD: Asynchronous Module Definition
CommonJS
UMD: Universal Module Definition(function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD define(['myModule', 'myOtherModule'], factory); } else if (typeof exports === 'object') { // CommonJS module.exports = factory(require('myModule'), require('myOtherModule')); } else { // Browser globals (Note: root is window) root.returnExports = factory(root.myModule, root.myOtherModule); } }(this, function (myModule, myOtherModule) { // Methods function notHelloOrGoodbye(){}; // A private method
![Page 108: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/108.jpg)
Organización del código JavaScript: módulos
¿Puedo escribir mis módulos como yo quiera? ¿hay unestándar?AMD: Asynchronous Module Definition
CommonJS
UMD: Universal Module Definition
ES6 Modules
![Page 109: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/109.jpg)
Organización del código JavaScript: módulos
¿Puedo escribir mis módulos como yo quiera? ¿hay unestándar?AMD: Asynchronous Module Definition
CommonJS
UMD: Universal Module Definition
ES6 Modules
import { method1 } from './moduleA.js'; method1("hello"); export let method2 = function() { console.log("Method 2"); }
![Page 110: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/110.jpg)
Organización del código JavaScript: módulos
![Page 111: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/111.jpg)
Organización del código JavaScript: módulos
¿AMD, CommonJS, UMD, ES6?
![Page 112: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/112.jpg)
Organización del código JavaScript: módulos
¿AMD, CommonJS, UMD, ES6?Compatibilidad de los módulos ES6 en navegadores
![Page 113: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/113.jpg)
Organización del código JavaScript: módulos
¿AMD, CommonJS, UMD, ES6?Compatibilidad de los módulos ES6 en navegadores¡Webpack!
![Page 114: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/114.jpg)
Organización del código JavaScript: módulos
¿AMD, CommonJS, UMD, ES6?Compatibilidad de los módulos ES6 en navegadores¡Webpack!TypeScript usa la sintaxis ES6
![Page 115: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/115.jpg)
Organización del código JavaScript: módulos
¿AMD, CommonJS, UMD, ES6?Compatibilidad de los módulos ES6 en navegadores¡Webpack!TypeScript usa la sintaxis ES6TS -> ES5 -> webpack -> bundle -> browser =
![Page 116: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/116.jpg)
Organización del código JavaScript: módulos
¿AMD, CommonJS, UMD, ES6?Compatibilidad de los módulos ES6 en navegadores¡Webpack!TypeScript usa la sintaxis ES6TS -> ES5 -> webpack -> bundle -> browser = Angular CLI
![Page 117: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/117.jpg)
![Page 118: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/118.jpg)
ES6
![Page 119: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/119.jpg)
ES6
let y const
![Page 120: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/120.jpg)
ES6
let y const
let a = 3; let a = 10; // Error var a = 12; // Error const b = 10; b = 3; // Error const obj = { x: 10, y: 12 } obj.x = 15; // OK obj = { // Error x: 15, y: 12 }
![Page 121: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/121.jpg)
ES6
let y constTemplate literals
![Page 122: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/122.jpg)
ES6
let y constTemplate literals
let nombre = "Antonio"; let cuadrado = function(x) { return x * x; } let n = Math.floor(Math.random() * 10); let saludo1 = "Hola, " + nombre + ". El cuadrado de " + n + " es " + cuadrado(n) + ".let saludo2 = `Hola, ${nombre}. El cuadrado de ${n} es ${cuadrado(n)}.`;
![Page 123: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/123.jpg)
ES6
let y constTemplate literalsfor ... of
![Page 124: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/124.jpg)
ES6
let y constTemplate literalsfor ... of
let nombres = ["Patricia", "Zacarías", "Miguel", "Maite for (let i in nombres) { console.log(nombres[i]); } for (let nombre of nombres) { console.log(nombre); } let obj = { x: 3, y: 4 } for (let i in obj) { console.log(obj[i]); } let nombre = "Antonio Jesús"; for (let c of nombre) { console.log(c); }
![Page 125: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/125.jpg)
ES6
let y constTemplate literalsfor ... ofFunciones
![Page 126: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/126.jpg)
ES6
let y constTemplate literalsfor ... ofFunciones
Parámetros por defecto
![Page 127: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/127.jpg)
ES6
let y constTemplate literalsfor ... ofFunciones
Parámetros por defecto
function potencia(x, y = 2) { return Math.pow(x, y); } console.log(`10 elevado a 8 es ${potencia(10, 8)}`console.log(`El cuadrado de 5 es ${potencia(5)}`);
![Page 128: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/128.jpg)
ES6
let y constTemplate literalsfor ... ofFunciones
Parámetros por defectoFunción arrow:(parámetros) => expresión_devuelta;
![Page 129: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/129.jpg)
ES6
let y constTemplate literalsfor ... ofFunciones
Parámetros por defectoFunción arrow:(parámetros) => expresión_devuelta;
const potencia = function (x, y = 2) { return Math.pow(x, y); } const potencia = (x, y = 2) => Math.pow(x, y); setTimeout(() => console.log("pausa"), 2000);
![Page 130: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/130.jpg)
ES6
![Page 131: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/131.jpg)
ES6
Operador spread
![Page 132: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/132.jpg)
ES6
Operador spreadParámetros en funciones
![Page 133: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/133.jpg)
ES6
Operador spreadParámetros en funcionesEnviar varios parámetros a partir de un array
![Page 134: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/134.jpg)
ES6
Operador spreadParámetros en funcionesEnviar varios parámetros a partir de un arraypush y unshift
![Page 135: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/135.jpg)
ES6
Operador spreadParámetros en funcionesEnviar varios parámetros a partir de un arraypush y unshiftIntercalar un array dentro de otro
![Page 136: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/136.jpg)
ES6
Operador spreadParámetros en funcionesEnviar varios parámetros a partir de un arraypush y unshiftIntercalar un array dentro de otroCopiar un array en otro
![Page 137: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/137.jpg)
ES6
Operador spreadParámetros en funcionesEnviar varios parámetros a partir de un arraypush y unshiftIntercalar un array dentro de otroCopiar un array en otroCopiar un objeto en otro
![Page 138: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/138.jpg)
ES6
Operador spreadParámetros en funcionesEnviar varios parámetros a partir de un arraypush y unshiftIntercalar un array dentro de otroCopiar un array en otroCopiar un objeto en otro
// function(a, b, c) let nums = [1, 3, 6]; function sumar(a, b, c) { console.log(a + b + c); } sumar(...nums); // function(n parámetros) let a = 3; let b = 7; let c = 8; function sumar(...nums) { let suma = 0; for (n of nums) { suma += n; } console.log("La suma es " + suma); } sumar(a, b, c); // h hif
![Page 139: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/139.jpg)
ES6
![Page 140: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/140.jpg)
Destructuring
ES6
![Page 141: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/141.jpg)
DestructuringAsignar desde un array
ES6
![Page 142: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/142.jpg)
DestructuringAsignar desde un array
ES6
function medidasMueble() { // ... return [100, 70, 20]; } let [ancho, alto, profundo] = medidasMueble(); console.log(ancho, alto, profundo); // 100, 70, 20
![Page 143: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/143.jpg)
DestructuringAsignar desde un arrayAsignar desde un objeto
ES6
![Page 144: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/144.jpg)
DestructuringAsignar desde un arrayAsignar desde un objeto
ES6
function getRGB(colorHex) { // ... return { alias: 'deeppink', red: 255, green: 20, blue: 147, alpha: 0.8 } } let { red, green, blue } = getRGB("#ff1493"); console.log(red, green, blue); // 255, 20, 147
![Page 145: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/145.jpg)
DestructuringAsignar desde un arrayAsignar desde un objeto
ES6
let personas = [{ nombre: "Luis", apellido: "Herrera", edad: 23 }, { nombre: "Marta", apellido: "Nieto", edad: 29 }]; for (let {nombre, edad} of personas) { console.log(`Me llamo ${nombre} y tengo ${edad} años`} // Me llamo Luis y tengo 23 años // Me llamo Marta y tengo 29 años
![Page 146: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/146.jpg)
DestructuringAsignar desde un arrayAsignar desde un objetoRenombrar variables
ES6
![Page 147: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/147.jpg)
DestructuringAsignar desde un arrayAsignar desde un objetoRenombrar variables
ES6
let notas = { mat: 8, fis: 6, dib: 5, tec: 6 } let { mat: matematicas, fis: fisica, dib: dibujo, tec: tecnologia } = not console.log(matematicas, fisica, dibujo, tecnologia); // 8, 6, 5, 6
![Page 148: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/148.jpg)
DestructuringAsignar desde un arrayAsignar desde un objetoRenombrar variablesValores por defecto
ES6
![Page 149: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/149.jpg)
DestructuringAsignar desde un arrayAsignar desde un objetoRenombrar variablesValores por defecto
ES6
let persona = { nombre: "Luis", edad: 23 } let { nombre, edad, estado = "soltero" } = persona console.log(nombre, edad, estado); // Luis, 23, soltero
![Page 150: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/150.jpg)
DestructuringAsignar desde un arrayAsignar desde un objetoRenombrar variablesValores por defectoNested destructuring
ES6
![Page 151: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/151.jpg)
DestructuringAsignar desde un arrayAsignar desde un objetoRenombrar variablesValores por defectoNested destructuring
ES6
persona = { mbre: "Francisco José", ellidos: "González Primo", ad: 40, sidencia: { ciudad: "Cornellà de Llobregat", provincia: "Barcelona", direccion: { calle: "Londres", numero: 67, piso: ["2º", "B"] }
{ nombre, apellidos, residencia: { ciudad, direccion: { calle, numero, piso: [ planta, puerta ] }}
ole.log(nombre, apellidos, ciudad, calle, numero, planta, puerta);
rancisco José González Primo Cornellà de Llobregat Londres 67 2º B
![Page 152: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/152.jpg)
DestructuringAsignar desde un arrayAsignar desde un objetoRenombrar variablesValores por defectoNested destructuringIntercambiar variables
ES6
![Page 153: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/153.jpg)
DestructuringAsignar desde un arrayAsignar desde un objetoRenombrar variablesValores por defectoNested destructuringIntercambiar variables
ES6
let a = 10; let b = 20; [a, b] = [b, a]; console.log(a, b); // 20, 10
![Page 154: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/154.jpg)
DestructuringAsignar desde un arrayAsignar desde un objetoRenombrar variablesValores por defectoNested destructuringIntercambiar variablesArgumentos en las funciones
ES6
![Page 155: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/155.jpg)
DestructuringAsignar desde un arrayAsignar desde un objetoRenombrar variablesValores por defectoNested destructuringIntercambiar variablesArgumentos en las funciones
ES6
function area({radio = 0, base = 0, altura = 0, tipo = 'circulo'} = { console.log(radio, base, altura, tipo); } area({ tipo: 'rectangulo', base: 10, altura: 20 }); // 0, 10, 20, "rectangulo" area(); // 0, 0, 0, "circulo"
![Page 156: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/156.jpg)
ES6
![Page 157: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/157.jpg)
ES6
Clases
![Page 158: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/158.jpg)
ES6
ClasesPropiedades y métodos
![Page 159: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/159.jpg)
ES6
ClasesPropiedades y métodosclass A {
constructor(z) { this.x = 3; this.y = 10; this.z = z; } suma() { return this.x + this.y + this.z; } } let a = new A(20); console.log(a.suma());
![Page 160: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/160.jpg)
ES6
ClasesPropiedades y métodosGetters y setters
![Page 161: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/161.jpg)
ES6
ClasesPropiedades y métodosGetters y setters
class A { constructor(z) { this.x = 3; this.y = 10; this.z = z; } suma() { return this.x + this.y + this.z; } set zeta(z) { this.z = z * 2; } get zeta() { return this.z / 2; } } let a = new A(20); a.zeta = 15; console.log(a.zeta);
![Page 162: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/162.jpg)
ES6
ClasesPropiedades y métodosGetters y settersMétodos estáticos
![Page 163: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/163.jpg)
ES6
ClasesPropiedades y métodosGetters y settersMétodos estáticos
class A { constructor(z) { this.x = 3; this.y = 10; this.z = z; } static getPI() { return 3.14159; } suma() { return this.x + this.y + this.z; } set zeta(z) { this.z = z * 2; } get zeta() { return this.z / 2; } } let a = new A(20); a.zeta = 15; console.log(a.zeta); console.log(A.getPI());
![Page 164: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/164.jpg)
ES6
ClasesPropiedades y métodosGetters y settersMétodos estáticosHerencia con extends y super()
![Page 165: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/165.jpg)
ES6
ClasesPropiedades y métodosGetters y settersMétodos estáticosHerencia con extends y super()
class A { constructor(z) { this.x = 3; this.y = 10; this.z = z; } static getPI() { return 3.14159; } suma() { return this.x + this.y + this.z; } set zeta(z) { this.z = z * 2; } get zeta() { return this.z / 2; } } class B extends A { constructor() { super(100); this.x = 20; } suma() { return this.x + this.z;
}
![Page 166: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/166.jpg)
ES6
![Page 167: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/167.jpg)
ES6
Módulosimportimport { literal } from 'ruta_modulo'; import literal from 'ruta_modulo'; import * as literal from 'ruta_modulo'; import 'ruta_modulo';export export let a = 3; export let class Clase { ... } export default { key: value }
![Page 168: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/168.jpg)
ES6
![Page 169: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/169.jpg)
ES6
Módulosimport dinámicos import('ruta_modulo').then( modulo => ... );
![Page 170: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/170.jpg)
Programación funcional con arrays
Métodos:map
![Page 171: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/171.jpg)
Programación funcional con arrays
Métodos:map let nombres = ["juan", "luisa", "amparo", "arturo"];
nombres = nombres.map(nombre => nombre.toUpperCase()); console.log(nombres);
![Page 172: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/172.jpg)
Programación funcional con arrays
Métodos:mapfilter
![Page 173: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/173.jpg)
Programación funcional con arrays
Métodos:mapfilter
let personas = [ { nombre: "juan", edad: 15 }, { nombre: "luisa", edad: 35 }, { nombre: "amparo", edad: 17 }, { nombre: "arturo", edad: 32 } ]; let mayoresEdad = personas.filter(persona => persona.edad >= 18 console.log(mayoresEdad);
![Page 174: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/174.jpg)
Programación funcional con arrays
Métodos:mapfilterreduce
![Page 175: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/175.jpg)
Programación funcional con arrays
Métodos:mapfilterreduce
let nums = [2, 4, 10, 15, 12]; let suma = nums.reduce((x, y) => x + y); let objs = [ { x: 3, y: 2 }, { x: 8, y: 10 }, { x: 10, y: 15 } ] let sumaX = objs.reduce((x, o2) => x + o2.x, 0); // Método 1let sumaX = objs.map(o => o.x).reduce((x, y) => x + y); // Método 2
![Page 176: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/176.jpg)
Programación funcional con arrays
Métodos:mapfilterreducefind
![Page 177: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/177.jpg)
Programación funcional con arrays
Métodos:mapfilterreducefind
let notas = [ { nombre: "juan", nota: 6 }, { nombre: "luisa", nota: 8 }, { nombre: "amparo", nota: 4 }, { nombre: "arturo", nota: 3 } ]; let notaArturo = notas.find(n => n.nombre === "arturo");
![Page 178: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/178.jpg)
Programación funcional con arrays
Métodos:mapfilterreducefind
Encadenamiento
![Page 179: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/179.jpg)
Programación funcional con arrays
Métodos:mapfilterreducefind
Encadenamiento
let notas = [ { nombre: "juan", nota: 6 }, { nombre: "luisa", nota: 8 }, { nombre: "amparo", nota: 4 }, { nombre: "arturo", nota: 3 } ]; let notasAprobados = notas.filter(n => n.nota >= 5).map(n => n.nota) console.log(notasAprobados);
![Page 180: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/180.jpg)
TypeScriptTypeScript
![Page 181: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/181.jpg)
TypeScript
![Page 182: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/182.jpg)
TypeScript
Superconjunto de JavaScript
![Page 183: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/183.jpg)
TypeScript
Superconjunto de JavaScriptTranspila a ES5 (o a otra versión)
![Page 184: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/184.jpg)
TypeScript
Superconjunto de JavaScriptTranspila a ES5 (o a otra versión)
![Page 185: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/185.jpg)
TypeScript
Superconjunto de JavaScriptTranspila a ES5 (o a otra versión)
![Page 186: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/186.jpg)
TypeScript
Superconjunto de JavaScriptTranspila a ES5 (o a otra versión)Tipado
![Page 187: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/187.jpg)
TypeScript
Superconjunto de JavaScriptTranspila a ES5 (o a otra versión)TipadoErrores en tiempo de compilación
![Page 188: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/188.jpg)
TypeScript
Superconjunto de JavaScriptTranspila a ES5 (o a otra versión)TipadoErrores en tiempo de compilación
![Page 189: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/189.jpg)
TypeScript
Superconjunto de JavaScriptTranspila a ES5 (o a otra versión)TipadoErrores en tiempo de compilacióntsconfig.json
![Page 190: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/190.jpg)
TypeScript
Superconjunto de JavaScriptTranspila a ES5 (o a otra versión)TipadoErrores en tiempo de compilacióntsconfig.json
{ "compilerOptions": { "target": "es5", "module": "es2015", "moduleResolution": "node", "sourceMap": true, "outDir": "./public/js/", } }
tsconfig.json
![Page 191: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/191.jpg)
TypeScript - Tipos
![Page 192: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/192.jpg)
TypeScript - Tipos
Tipos básicos:
![Page 193: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/193.jpg)
TypeScript - Tipos
Tipos básicos:number
![Page 194: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/194.jpg)
TypeScript - Tipos
Tipos básicos:numberstring
![Page 195: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/195.jpg)
TypeScript - Tipos
Tipos básicos:numberstringboolean
![Page 196: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/196.jpg)
TypeScript - Tipos
Tipos básicos:numberstringbooleanArray
![Page 197: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/197.jpg)
TypeScript - Tipos
Tipos básicos:numberstringbooleanArrayany
![Page 198: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/198.jpg)
TypeScript - Tipos
Tipos básicos:numberstringbooleanArrayanyvoid
![Page 199: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/199.jpg)
TypeScript - Tipos
Tipos básicos:numberstringbooleanArrayanyvoid
let peso: number; peso = 89.5; let saludo: string; saludo = 'Vais a petarlo con TypeScript'; let esVerano: boolean; esVerano = false; let nums: Array<number>; nums = [10, 55, -3, 4.14]; let nombres: string[]; nombres = ['Juan', 'Paqui', 'Lorenzo', 'Alicia']; let cosas: any[]; cosas = [10, 'Teruel', -5, true, [0, -10, 15], false function imprimeSaludo(s: string): void { console.log(s); } imprimeSaludo('Buenas tardes');
![Page 200: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/200.jpg)
TypeScript - Tipos
Tipos básicos:numberstringbooleanArrayanyvoid
Enum
![Page 201: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/201.jpg)
TypeScript - Tipos
Tipos básicos:numberstringbooleanArrayanyvoid
Enum
enum FormasPago { TPV, PayPal, transferencia } let pago: FormasPago; pago = FormasPago.PayPal; procesarPago(pago); function procesarPago(formaPago: FormasPago): void switch (formaPago) { case FormasPago.TPV: // ... break; case FormasPago.PayPal: // ... break; case FormasPago.transferencia: // ... break; } }
![Page 202: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/202.jpg)
TypeScript - Tipos
Tipos básicos:numberstringbooleanArrayanyvoid
EnumUnion types
![Page 203: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/203.jpg)
TypeScript - Tipos
Tipos básicos:numberstringbooleanArrayanyvoid
EnumUnion types
let numeros: Array<number | string>; numeros = ['3', 6, '15.8', 0]; function procesar(a: string | number): void { if (typeof a === 'string') { console.log(a.toUpperCase()); } else { console.log(a.toFixed(2)); } }
![Page 204: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/204.jpg)
TypeScript - Tipos
Tipos básicos:numberstringbooleanArrayanyvoid
EnumUnion typesGenéricos
![Page 205: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/205.jpg)
TypeScript - Tipos
Tipos básicos:numberstringbooleanArrayanyvoid
EnumUnion typesGenéricos
function verDoble<T>(elem: T): T[] { let elemDoble: T[] = [elem, elem]; return elemDoble; }
![Page 206: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/206.jpg)
TypeScript - Tipos
Tipos básicos:numberstringbooleanArrayanyvoid
EnumUnion typesGenéricosType assertion
![Page 207: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/207.jpg)
TypeScript - Tipos
Tipos básicos:numberstringbooleanArrayanyvoid
EnumUnion typesGenéricosType assertion
const inputText = <HTMLInputElement>document.getElementById("nombr inputText.select();
![Page 208: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/208.jpg)
TypeScript - Funciones
![Page 209: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/209.jpg)
TypeScript - Funciones
Sin flexibilidad en el número de parámetros
![Page 210: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/210.jpg)
TypeScript - Funciones
Sin flexibilidad en el número de parámetros
function sumar(a: number, b: number): number return a + b; } sumar(); // Error sumar(3); // Error sumar(10, 2); // OK sumar(4, -3, 10, 8) // Error
![Page 211: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/211.jpg)
TypeScript - Funciones
Sin flexibilidad en el número de parámetrosParámetros opcionales
![Page 212: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/212.jpg)
TypeScript - Funciones
Sin flexibilidad en el número de parámetrosParámetros opcionales
function sumar(a: number, b: number, c?: number): numbe if (c) { return a + b + c; } else { return a + b; } } sumar(10, 2); sumar(10, 2, 15);
![Page 213: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/213.jpg)
TypeScript - Funciones
Sin flexibilidad en el número de parámetrosParámetros opcionalesSobrecarga
![Page 214: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/214.jpg)
TypeScript - Funciones
Sin flexibilidad en el número de parámetrosParámetros opcionalesSobrecarga
function nChars(a: number): string; function nChars(a: string): number; function nChars(a: string | number): number | string { if (typeof a === 'number') { return '¡Es un número!'; } else if (typeof a === 'string') { return a.length; } } type RGB = [number, number, number]; function convierteColor(color: string): RGB; function convierteColor(color: RGB): string; function convierteColor(color: string | RGB): string | RGB { if (typeof color === 'string') { return [0, 128, 0]; } else { return '#006600'; } } const colorRGB = convierteColor('#006600'); const colorHEX = convierteColor([0, 128, 0]);
![Page 215: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/215.jpg)
TypeScript - Funciones
Sin flexibilidad en el número de parámetrosParámetros opcionalesSobrecargaFunction types
![Page 216: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/216.jpg)
TypeScript - Funciones
Sin flexibilidad en el número de parámetrosParámetros opcionalesSobrecargaFunction types
function transformaNumero(x: number, callback: (n: number) => voi callback(x); } let a = 10; transformaNumero(a, m => console.log(m * 2));
![Page 217: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/217.jpg)
TypeScript - Módulos
![Page 218: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/218.jpg)
TypeScript - Módulos
Sintaxis ES6:import { literal } from 'ruta_modulo';import literal from 'ruta_modulo'; import * as literal from 'ruta_modulo'; import 'ruta_modulo';export let a = 3; export class Clase { ... } export default { key: value }
![Page 219: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/219.jpg)
TypeScript - Módulos
![Page 220: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/220.jpg)
TypeScript - Módulos
Módulosimport dinámicos import('ruta_modulo').then( modulo => ... );
![Page 221: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/221.jpg)
TypeScript - Módulos
![Page 222: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/222.jpg)
TypeScript - Módulos
Sintaxis ES6
![Page 223: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/223.jpg)
TypeScript - Módulos
Sintaxis ES6Se omite la extensión .ts
![Page 224: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/224.jpg)
TypeScript - Módulos
Sintaxis ES6Se omite la extensión .tsImportar de paquetes npm: nombre del paquete import { } from 'paquete';
![Page 225: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/225.jpg)
TypeScript - Módulos
Sintaxis ES6Se omite la extensión .tsImportar de paquetes npm: nombre del paquete import { } from 'paquete';Importar de nuestros módulos: rutas relativas import { } from './modulo';
![Page 226: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/226.jpg)
TypeScript - Clases
![Page 227: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/227.jpg)
TypeScript - Clases
Propiedades fuera del constructor
![Page 228: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/228.jpg)
TypeScript - Clases
Propiedades fuera del constructorclass Factura { numero: string; base: number; tipoIva: number; constructor(numero: string, base: number, tipoIva: number = 21 this.numero = numero; this.base = base; this.tipoIva = tipoIva; } }
![Page 229: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/229.jpg)
TypeScript - Clases
Propiedades fuera del constructorVisibilidad de los miembros
![Page 230: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/230.jpg)
TypeScript - Clases
Propiedades fuera del constructorVisibilidad de los miembrosGetters y setters
![Page 231: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/231.jpg)
TypeScript - Clases
Propiedades fuera del constructorVisibilidad de los miembrosGetters y settersModificador readonly
![Page 232: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/232.jpg)
TypeScript - Clases
Propiedades fuera del constructorVisibilidad de los miembrosGetters y settersModificador readonlyPropiedades estáticas
![Page 233: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/233.jpg)
TypeScript - Clases
Propiedades fuera del constructorVisibilidad de los miembrosGetters y settersModificador readonlyPropiedades estáticas
class Factura { private static caracteresSerie = 2; public num: string; public serie: string; public base: number; private readonly intTipoIva: number; constructor(base: number, tipoIva: number = 21) { this.base = base; this.intTipoIva = tipoIva; } get numero(): string { return this.serie + this.num; } set numero(n: string) { this.serie = n.slice(0, Factura.caracteresSerie - 1); this.num = n.slice(Factura.caracteresSerie); } } let f = new Factura(100); f.numero = 'AB600'; console.log(f.numero);
![Page 234: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/234.jpg)
TypeScript - Clases
Propiedades fuera del constructorVisibilidad de los miembrosGetters y settersModificador readonlyPropiedades estáticasMétodos abstractos
![Page 235: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/235.jpg)
TypeScript - Clases
Propiedades fuera del constructorVisibilidad de los miembrosGetters y settersModificador readonlyPropiedades estáticasMétodos abstractos
abstract class Vehiculo { public manual: boolean; constructor(public ruedas: number, public motor: Motor) this.manual = this.motor === Motor.ninguno; } public abstract arrancar(): void; } class Bici extends Vehiculo { public arrancar(): void { console.log('Me pongo de pie y pedaleo'); } }
![Page 236: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/236.jpg)
TypeScript - Clases
Propiedades fuera del constructorVisibilidad de los miembrosGetters y settersModificador readonlyPropiedades estáticasMétodos abstractosInterfaces
![Page 237: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/237.jpg)
TypeScript - Clases
Propiedades fuera del constructorVisibilidad de los miembrosGetters y settersModificador readonlyPropiedades estáticasMétodos abstractosInterfaces
interface Arrancable { arrancar(): void; apagar(): void; } abstract class Vehiculo { public manual: boolean; constructor(public ruedas: number, public motor: Motor) { this.manual = this.motor === Motor.ninguno; } } class Bici extends Vehiculo implements Arrancable { public arrancar(): void { console.log('Me pongo de pie y pedaleo'); } public apagar(): void { console.log('Me bajo de la bici'); } }
![Page 238: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/238.jpg)
TypeScript - Clases
Propiedades fuera del constructorVisibilidad de los miembrosGetters y settersModificador readonlyPropiedades estáticasMétodos abstractosInterfaces
interface Arrancable { arrancar(): void; apagar(): void; } abstract class Vehiculo { public manual: boolean; constructor(public ruedas: number, public motor: Motor) { this.manual = this.motor === Motor.ninguno; } } class Bici extends Vehiculo implements Arrancable { public arrancar(): void { console.log('Me pongo de pie y pedaleo'); } public apagar(): void { console.log('Me bajo de la bici'); } }
interface Cliente { id: number; login: string; nombre: string; tipo: TiposCliente; fechaAlta: Date; } function getClientes(): Cliente[] { let clientes: Cliente[] = conectaBD('clientes'); return clientes; }
![Page 239: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/239.jpg)
TypeScript - Decoradores
![Page 240: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/240.jpg)
@
TypeScript - Decoradores
![Page 241: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/241.jpg)
@Asignar metadatos
TypeScript - Decoradores
![Page 242: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/242.jpg)
@Asignar metadatosMuy utilizados en Angular
TypeScript - Decoradores
![Page 243: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/243.jpg)
@Asignar metadatosMuy utilizados en Angular
import { Component, Input } from '@angular/core' @Component({ selector: 'app-factura', templateUrl: './factura.component.html', styleUrls: ['./factura.component.css'] }) export class FacturaComponent { @Input() facturaId: number; }
TypeScript - Decoradores
![Page 244: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/244.jpg)
AngularAngular
![Page 245: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/245.jpg)
Primeros pasos
![Page 246: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/246.jpg)
Primeros pasos
Generar la app: ng new <nombre-app> --prefix <prefijo>
![Page 247: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/247.jpg)
Primeros pasos
Generar la app: ng new <nombre-app> --prefix <prefijo>Ejecutar la app y verla en el navegador: ng serve -o
![Page 248: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/248.jpg)
Primeros pasos
Generar la app: ng new <nombre-app> --prefix <prefijo>Ejecutar la app y verla en el navegador: ng serve -oEntornos dev y prod
![Page 249: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/249.jpg)
Primeros pasos
Generar la app: ng new <nombre-app> --prefix <prefijo>Ejecutar la app y verla en el navegador: ng serve -oEntornos dev y prodArchivos de configuraciónMódulos: contenedores lógicosComponentes
Divisiones de la UITienen clase y template
![Page 250: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/250.jpg)
Primeros pasos
Generar la app: ng new <nombre-app> --prefix <prefijo>Ejecutar la app y verla en el navegador: ng serve -oEntornos dev y prodArchivos de configuraciónMódulos: contenedores lógicosComponentes
Divisiones de la UITienen clase y template
Creando piezas: ng generate <tipo-pieza> <nombre-pieza> [params]
![Page 251: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/251.jpg)
Esqueleto de una pieza en Angular
![Page 252: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/252.jpg)
Esqueleto de una pieza en Angular
clase =>
![Page 253: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/253.jpg)
Esqueleto de una pieza en Angular
clase =>=> clase exportada =>
![Page 254: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/254.jpg)
Esqueleto de una pieza en Angular
clase =>=> clase exportada =>=> clase decorada =>
![Page 255: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/255.jpg)
Esqueleto de una pieza en Angular
clase =>=> clase exportada =>=> clase decorada =>=> dependencias
![Page 256: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/256.jpg)
Examinando un módulo
![Page 257: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/257.jpg)
Examinando un módulo
Metadata
![Page 258: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/258.jpg)
Examinando un módulo
Metadatadeclarations: - componentes, directivas y pipes del módulo
![Page 259: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/259.jpg)
Examinando un módulo
Metadatadeclarations: - componentes, directivas y pipes del móduloimports: - otros módulos cuyos componentes, directivas opipes exportados queremos usarexports: - componentes, directivas o pipes que exponemospara que los usen otros módulosproviders: - objetos inyectables que están disponibles para elinyector del módulo
![Page 260: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/260.jpg)
Examinando un módulo
Metadatadeclarations: - componentes, directivas y pipes del móduloimports: - otros módulos cuyos componentes, directivas opipes exportados queremos usarexports: - componentes, directivas o pipes que exponemospara que los usen otros módulosproviders: - objetos inyectables que están disponibles para elinyector del módulobootstrap: - componente(s) inicial de la app
![Page 261: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/261.jpg)
Examinando un componente
![Page 262: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/262.jpg)
Examinando un componente
Metadata
![Page 263: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/263.jpg)
Examinando un componente
Metadataselector: Selector CSS que se corresponde con una etiquetaHTML
![Page 264: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/264.jpg)
Examinando un componente
Metadataselector: Selector CSS que se corresponde con una etiquetaHTMLtemplate / templateUrl: String con el HTML / fichero con el HTML
![Page 265: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/265.jpg)
Examinando un componente
Metadataselector: Selector CSS que se corresponde con una etiquetaHTMLtemplate / templateUrl: String con el HTML / fichero con el HTMLstyles / styleUrls: Strings con los estilos / ficheros con los estilos
![Page 266: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/266.jpg)
Examinando un componente
Metadataselector: Selector CSS que se corresponde con una etiquetaHTMLtemplate / templateUrl: String con el HTML / fichero con el HTMLstyles / styleUrls: Strings con los estilos / ficheros con los estilos
ngOnInit Componente inicializado (con su vista renderizada ysus valores cargados), se usa para los procesosiniciales (no usar el constructor).
![Page 267: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/267.jpg)
Examinando un componente
Metadataselector: Selector CSS que se corresponde con una etiquetaHTMLtemplate / templateUrl: String con el HTML / fichero con el HTMLstyles / styleUrls: Strings con los estilos / ficheros con los estilos
ngOnInit Componente inicializado (con su vista renderizada ysus valores cargados), se usa para los procesosiniciales (no usar el constructor).ngOnDestroy
![Page 268: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/268.jpg)
Examinando un template
![Page 269: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/269.jpg)
Examinando un template
Custom elements
![Page 270: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/270.jpg)
Examinando un template
Custom elementsData binding
![Page 271: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/271.jpg)
Examinando un template
Custom elementsData bindingInterpolation
![Page 272: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/272.jpg)
Examinando un template
Custom elementsData bindingInterpolationProperty binding
![Page 273: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/273.jpg)
Examinando un template
Custom elementsData bindingInterpolationProperty bindingClass & style binding
![Page 274: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/274.jpg)
Examinando un template
Custom elementsData bindingInterpolationProperty bindingClass & style bindingEvent binding
![Page 275: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/275.jpg)
Examinando un template
Custom elementsData bindingInterpolationProperty bindingClass & style bindingEvent bindingTwo-way binding
![Page 276: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/276.jpg)
Examinando un template
![Page 277: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/277.jpg)
Examinando un template
Directivas de atributo
![Page 278: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/278.jpg)
Examinando un template
Directivas de atributongClass
![Page 279: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/279.jpg)
Examinando un template
Directivas de atributongClassngStyle
![Page 280: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/280.jpg)
Examinando un template
Directivas de atributongClassngStyle
Directivas estructurales
![Page 281: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/281.jpg)
Examinando un template
Directivas de atributongClassngStyle
Directivas estructuralesngIf
![Page 282: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/282.jpg)
Examinando un template
Directivas de atributongClassngStyle
Directivas estructuralesngIfngFor
![Page 283: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/283.jpg)
Examinando un template
Directivas de atributongClassngStyle
Directivas estructuralesngIfngForngSwitch
![Page 284: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/284.jpg)
Examinando un template
Directivas de atributongClassngStyle
Directivas estructuralesngIfngForngSwitch
Pipes
![Page 285: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/285.jpg)
Examinando un template
Directivas de atributongClassngStyle
Directivas estructuralesngIfngForngSwitch
Pipes@Pipe, PipeTransform
![Page 286: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/286.jpg)
Examinando un template
Directivas de atributongClassngStyle
Directivas estructuralesngIfngForngSwitch
Pipes@Pipe, PipeTransform
Directivas propias
![Page 287: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/287.jpg)
Examinando un template
Directivas de atributongClassngStyle
Directivas estructuralesngIfngForngSwitch
Pipes@Pipe, PipeTransform
Directivas propiasDe atributo (ElementRef.nativeElement)
![Page 288: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/288.jpg)
Examinando un template
Directivas de atributongClassngStyle
Directivas estructuralesngIfngForngSwitch
Pipes@Pipe, PipeTransform
Directivas propiasDe atributo (ElementRef.nativeElement)Estructurales (ViewContainerRef y TemplateRef)
![Page 289: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/289.jpg)
Servicios
![Page 290: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/290.jpg)
Servicios
Dependency Injection: Proveedores y jerarquía de inyectores
![Page 291: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/291.jpg)
Servicios
Dependency Injection: Proveedores y jerarquía de inyectoresInjectable()
![Page 292: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/292.jpg)
Servicios
Dependency Injection: Proveedores y jerarquía de inyectoresInjectable()Singleton: tiene como ámbito su inyector y todos susinyectores hijos.
![Page 293: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/293.jpg)
Formularios
![Page 294: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/294.jpg)
Formularios
[(ngModel)]: Two-way binding
![Page 295: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/295.jpg)
Formularios
[(ngModel)]: Two-way bindingngForm, ngModel y ngSubmit
![Page 296: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/296.jpg)
Formularios
[(ngModel)]: Two-way bindingngForm, ngModel y ngSubmitVariables de template con #
![Page 297: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/297.jpg)
Formularios
[(ngModel)]: Two-way bindingngForm, ngModel y ngSubmitVariables de template con #Validaciones: los diferentes estados
![Page 298: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/298.jpg)
Formularios
[(ngModel)]: Two-way bindingngForm, ngModel y ngSubmitVariables de template con #Validaciones: los diferentes estadosResetear los estados
![Page 299: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/299.jpg)
Formularios
[(ngModel)]: Two-way bindingngForm, ngModel y ngSubmitVariables de template con #Validaciones: los diferentes estadosResetear los estadosTemplate driven y Reactive forms
![Page 300: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/300.jpg)
Conexiones con el servidor
![Page 301: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/301.jpg)
Conexiones con el servidor
Asincronía
![Page 302: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/302.jpg)
Conexiones con el servidor
AsincroníaObservables
![Page 303: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/303.jpg)
Conexiones con el servidor
AsincroníaObservablesSuscripciones
![Page 304: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/304.jpg)
Conexiones con el servidor
AsincroníaObservablesSuscripcionesAPI REST
![Page 305: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/305.jpg)
Conexiones con el servidor
AsincroníaObservablesSuscripcionesAPI RESTEl módulo HttpClientModule
![Page 306: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/306.jpg)
Conexiones con el servidor
AsincroníaObservablesSuscripcionesAPI RESTEl módulo HttpClientModule
Módulo HttpClientModule y servicio HttpClient
![Page 307: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/307.jpg)
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()
![Page 308: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/308.jpg)
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()Obteniendo la respuesta completa: { observe: 'response' }
![Page 309: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/309.jpg)
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()Obteniendo la respuesta completa: { observe: 'response' }Interceptors y autentificación
![Page 310: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/310.jpg)
Navegación por la app
![Page 311: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/311.jpg)
Navegación por la app
El router
![Page 312: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/312.jpg)
Navegación por la app
El routerEl RouterOutlet
![Page 313: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/313.jpg)
Navegación por la app
El routerEl RouterOutletLas rutas
![Page 314: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/314.jpg)
Navegación por la app
![Page 315: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/315.jpg)
Navegación por la app
El router
![Page 316: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/316.jpg)
Navegación por la app
El routerEl RouterOutlet
![Page 317: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/317.jpg)
Navegación por la app
El routerEl RouterOutletLas rutas
Página por defecto
![Page 318: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/318.jpg)
Navegación por la app
El routerEl RouterOutletLas rutas
Página por defecto404
![Page 319: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/319.jpg)
Navegación por la app
El routerEl RouterOutletLas rutas
Página por defecto404Parámetros: los observables paramMap y data deActivatedRoute
![Page 320: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/320.jpg)
Navegación por la app
El routerEl RouterOutletLas rutas
Página por defecto404Parámetros: los observables paramMap y data deActivatedRouteGuards y resolvers
![Page 321: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/321.jpg)
Navegación por la app
El routerEl RouterOutletLas rutas
Página por defecto404Parámetros: los observables paramMap y data deActivatedRouteGuards y resolvers
Links de navegación: routerLink y routerLinkActive
![Page 322: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/322.jpg)
Navegación por la app
El routerEl RouterOutletLas rutas
Página por defecto404Parámetros: los observables paramMap y data deActivatedRouteGuards y resolvers
Links de navegación: routerLink y routerLinkActiverouter.navigate()
![Page 323: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/323.jpg)
Navegación por la app
El routerEl RouterOutletLas rutas
Página por defecto404Parámetros: los observables paramMap y data deActivatedRouteGuards y resolvers
Links de navegación: routerLink y routerLinkActiverouter.navigate()Lazy loading
![Page 324: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/324.jpg)
Navegación por la app
El routerEl RouterOutletLas rutas
Página por defecto404Parámetros: los observables paramMap y data deActivatedRouteGuards y resolvers
Links de navegación: routerLink y routerLinkActiverouter.navigate()Lazy loadingEl servicio Title
![Page 325: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/325.jpg)
Despliegue a producción
![Page 326: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/326.jpg)
Despliegue a producción
Pruebas con ng build
![Page 327: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/327.jpg)
Despliegue a producción
Pruebas con ng buildng build:
![Page 328: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/328.jpg)
Despliegue a producción
Pruebas con ng buildng build:
--prod: código optimizado para producción
![Page 329: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/329.jpg)
Despliegue a producción
Pruebas con ng buildng build:
--prod: código optimizado para producción--base-href=: cambia el directorio base
![Page 330: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/330.jpg)
Despliegue a producción
Pruebas con ng buildng build:
--prod: código optimizado para producción--base-href=: cambia el directorio base--sourcemaps: genera los source maps
![Page 331: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/331.jpg)
Despliegue a producción
Pruebas con ng buildng build:
--prod: código optimizado para producción--base-href=: cambia el directorio base--sourcemaps: genera los source maps
Entornos propios
![Page 332: IFC0219CL Desarrollo web con Angular: aplicaciones ... · Desarrollo web con Angular: aplicaciones innovadoras y escalables. Temario 1. Introducción a JavaScript y Angular 7 Repaso](https://reader033.vdocumento.com/reader033/viewer/2022052303/5f08b1647e708231d423430e/html5/thumbnails/332.jpg)
Links
Documentación oficial de AngularPlayground para AngularDocumentación de TypeScriptPlayground para TypeScriptConfiguración del compilador TypeScriptDocumentación de Angular CLIDocumentación sobre todas las API de JavaScriptJSON Server APITablas de compatibilidad en navegadoresAngular en navegadores antiguos