angular - mariogl.com · ¿qué es angular? framework js spa: single page applications typescript...
TRANSCRIPT
Angular
+
TypeScript
TemarioTemarioIntroducción a AngularEntorno de desarrolloJavascript modernoIntroducción a TypeScriptPrimeros pasos en AngularModelos, componentes y vistasServiciosFormulariosAcceso al servidorEnrutamiento y navegaciónDespliegue a producción
Introducción aIntroducción aAngularAngular
¿Qué es Angular?
¿Qué es Angular?
Framework JS
¿Qué es Angular?
Framework JSSPA: Single Page Applications
¿Qué es Angular?
Framework JSSPA: Single Page ApplicationsTypeScript
¿Qué es Angular?
Framework JSSPA: Single Page ApplicationsTypeScriptCódigo fuente y código compilado
¿Qué es Angular?
Framework JSSPA: Single Page ApplicationsTypeScriptCódigo fuente y código compilado¿Angular 2? ¿6? ¿AngularJS?
Entorno deEntorno dedesarrollodesarrollo
Entorno de desarrollo
Entorno de desarrollo
IDE: Visual Studio CodeGit
Entorno de desarrollo
IDE:
y npm
Visual Studio CodeGitNodeJS
GitGit
Comandos básicos
Comandos básicos
Clonar un repositorio: git clone URL
Comandos básicos
Clonar un repositorio: git clone URL Descargar última versión del repositorio: git pull origin master
Configuración proxy
git config --global http.proxy http://username:password@host:port
git config --global https.proxy http://username:password@host:port
Node.js y npmNode.js y npm
npm
npm
Instalar última versión después de instalar Node.js (configurar proxy si es necesario)
npm
Instalar última versión después de instalar Node.js (configurar proxy si es necesario)Repositorio de módulos distribuibles
npm
Instalar última versión después de instalar Node.js (configurar proxy si es necesario)Repositorio de módulos distribuiblesMódulos globales y módulos locales
npm
Instalar última versión después de instalar Node.js (configurar proxy si es necesario)Repositorio de módulos distribuiblesMódulos globales y módulos localesLa carpeta node_modules
npm
Instalar última versión después de instalar Node.js (configurar proxy si es necesario)Repositorio de módulos distribuiblesMódulos globales y módulos localesLa carpeta node_modulesEl archivo package.json:
npm
Instalar última versión después de instalar Node.js (configurar proxy si es necesario)Repositorio de módulos distribuiblesMódulos globales y módulos localesLa carpeta node_modulesEl archivo package.json:
Registro de dependencias
npm
Instalar última versión después de instalar Node.js (configurar proxy si es necesario)Repositorio de módulos distribuiblesMódulos globales y módulos localesLa carpeta node_modulesEl archivo package.json:
Registro de dependenciasDependencias de desarrollo y de producción
npm
Instalar última versión después de instalar Node.js (configurar proxy si es necesario)Repositorio de módulos distribuiblesMódulos globales y módulos localesLa carpeta node_modulesEl archivo package.json:
Registro de dependenciasDependencias de desarrollo y de producciónVersiones (SEMVER)
Comandos npm
Comandos npmInstalar un paquete globalmente: npm install -g paquete
Comandos npmInstalar un paquete globalmente: npm install -g paqueteInstalar un paquete de producción: npm install paquete
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
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
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
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)
Configuración proxy
npm config set proxy http://username:password@host:port
npm config set https-proxy http://username:password@host:port
JavaScriptJavaScript
JavaScript
JavaScript
Interpretado, compilado y ejecutado en el navegador
JavaScript
Interpretado, compilado y ejecutado en el navegadorCada navegador programa su propio motor de JS
JavaScript
Interpretado, compilado y ejecutado en el navegadorCada navegador programa su propio motor de JSEstandarización: ECMAScript
JavaScript
Interpretado, compilado y ejecutado en el navegadorCada navegador programa su propio motor de JSEstandarización: ECMAScriptLa versión ES6 o ES2015
JavaScript
Interpretado, compilado y ejecutado en el navegadorCada navegador programa su propio motor de JSEstandarización: ECMAScriptLa versión ES6 o ES2015Transpiladores: Babel, TypeScript
JavaScript
Interpretado, compilado y ejecutado en el navegadorCada navegador programa su propio motor de JSEstandarización: ECMAScriptLa versión ES6 o ES2015Transpiladores: Babel, TypeScript
Organización del código JavaScript
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
Organización del código JavaScript
Ejemplo de uso clásico de JS: utilizar un plugin dejQuery en nuestra web, o implementar algunainteracción con el usuarioPocas líneas de código, todas en un mismo archivo
Organización del código JavaScript
<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
<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
Organización del código JavaScript
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>
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
Organización del código JavaScript
Organización del código JavaScript
Programar toda la UI de una página
Organización del código JavaScript
Programar toda la UI de una página(function() { var width = window.innerWidth; var height = window.innerHeight; var timerID = 0; var c = document.getElementById('canvas') var ctx = c.getContext('2d'); c.width = width; c.height = height; var speed = 10; var size = 8; var boids = []; var totalBoids = 150; var init = function(){ for (var i = 0; i < totalBoids; i++) { boids.push({ x: Math.random() * width, y: Math.random() * height, v: {
Organización del código JavaScript
Programar toda la UI de una página(function() { var width = window.innerWidth; var height = window.innerHeight; var timerID = 0; var c = document.getElementById('canvas') var ctx = c.getContext('2d'); c.width = width; c.height = height; var speed = 10; var size = 8; var boids = []; var totalBoids = 150; var init = function(){ for (var i = 0; i < totalBoids; i++) { boids.push({ x: Math.random() * width, y: Math.random() * height, v: {
1711líneas
Organización del código JavaScript
Organización del código JavaScript
¿2000 líneas en un solo archivo?
Organización del código JavaScript
¿2000 líneas en un solo archivo?
Ventajas Inconvenientes
Organización del código JavaScript
¿2000 líneas en un solo archivo?
Ventajas Inconvenientes
Difícil de leer/entender
Organización del código JavaScript
¿2000 líneas en un solo archivo?
Ventajas Inconvenientes
Difícil de leer/entenderDifícil de mantener
Organización del código JavaScript
¿2000 líneas en un solo archivo?
Ventajas Inconvenientes
Difícil de leer/entenderDifícil de mantenerPoca reusabilidad
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
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
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
Organización del código JavaScript
Organización del código JavaScript
Optimización: dividir el código en variosarchivos/módulos
Organización del código JavaScript
Optimización: dividir el código en variosarchivos/módulos
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>
Organización del código JavaScript
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>
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>
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>
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>
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>
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>
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>
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>
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>
Organización del código JavaScript
Dependencias: es difícil asegurar el orden, y no esposible tener dependencias circulares
Organización del código JavaScript
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>
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>
Organización del código JavaScript: módulos
Module loaders: ellos gestionan las dependencias ycargan los módulos (RequireJS, SystemJS)
Organización del código JavaScript: módulos
Module loaders: ellos gestionan las dependencias ycargan los módulos (RequireJS, SystemJS)
Organización del código JavaScript: módulos
Ventajas Inconvenientes
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
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
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
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
Organización del código JavaScript: módulos
Module bundlers: además de lo anterior, generan unsolo código encadenado y minificado (browserify,webpack)
Organización del código JavaScript: módulos
Module bundlers: además de lo anterior, generan unsolo código encadenado y minificado (browserify,webpack)
Organización del código JavaScript: módulos
Ventajas
Module bundlers: además de lo anterior, generan unsolo código encadenado y minificado (browserify,webpack)
Organización del código JavaScript: módulos
Ventajas
Legible e inteligibleFácil de mantenerReutilizableCargamos sólo lo quenecesitamosGestión automática dedependenciasEncapsulación
Una o muy pocasconexiones HTTP
Module bundlers: además de lo anterior, generan unsolo código encadenado y minificado (browserify,webpack)
Organización del código JavaScript: módulos
Ventajas
Legible e inteligibleFácil de mantenerReutilizableCargamos sólo lo quenecesitamosGestión automática dedependenciasEncapsulación
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)
Organización del código JavaScript: módulos
Ventajas
Legible e inteligibleFácil de mantenerReutilizableCargamos sólo lo quenecesitamosGestión automática dedependenciasEncapsulación
Organización del código JavaScript: módulos
Organización del código JavaScript: módulos
¿Puedo escribir mis módulos como yo quiera? ¿hay unestándar?
Organización del código JavaScript: módulos
¿Puedo escribir mis módulos como yo quiera? ¿hay unestándar?AMD: Asynchronous Module Definition
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'); } }; });
Organización del código JavaScript: módulos
¿Puedo escribir mis módulos como yo quiera? ¿hay unestándar?AMD: Asynchronous Module Definition
CommonJS
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;
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
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
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
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"); }
Organización del código JavaScript: módulos
Organización del código JavaScript: módulos
¿AMD, CommonJS, UMD, ES6?Compatibilidad de los módulos ES6 en navegadores
Organización del código JavaScript: módulos
¿AMD, CommonJS, UMD, ES6?Compatibilidad de los módulos ES6 en navegadores¡Webpack!
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
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 =
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
ES6
ES6
let y const
ES6
let y constTemplate literals
ES6
let y constTemplate literalsfor ... of
ES6
let y constTemplate literalsfor ... ofFunciones
Parámetros opcionalesFunción arrow:(parámetros) => expresión_devuelta;
ES6
ES6
Operador spreadParámetros en funcionesEnviar varios parámetros a partir de un array
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
ES6
ES6
ClasesPropiedades y métodos
ES6
ClasesPropiedades y métodosGetters y settersPropiedades y métodos estáticosHerencia con extends y super()
ES6
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 }
Programación funcional con arrays
Programación funcional con arrays
Métodos:
Programación funcional con arrays
Métodos:map
Programación funcional con arrays
Métodos:mapfilter
Programación funcional con arrays
Métodos:mapfilterreduce
Programación funcional con arrays
Métodos:mapfilterreducefind
Programación funcional con arrays
Métodos:mapfilterreducefind
Encadenamiento
TypeScriptTypeScript
TypeScript
TypeScript
Superconjunto de JavaScript
TypeScript
Superconjunto de JavaScriptTranspila a ES5
TypeScript
Superconjunto de JavaScriptTranspila a ES5Tipado
TypeScript
Superconjunto de JavaScriptTranspila a ES5TipadoErrores en tiempo de compilación
TypeScript
Superconjunto de JavaScriptTranspila a ES5TipadoErrores en tiempo de compilacióntsc
TypeScript
Superconjunto de JavaScriptTranspila a ES5TipadoErrores en tiempo de compilacióntsctsconfig.json
TypeScript
TypeScript
Tipos básicos:
TypeScript
Tipos básicos:number
TypeScript
Tipos básicos:numberstring
TypeScript
Tipos básicos:numberstringboolean
TypeScript
Tipos básicos:numberstringbooleanArray
TypeScript
Tipos básicos:numberstringbooleanArrayany
TypeScript
Tipos básicos:numberstringbooleanArrayanyvoid
TypeScript
Tipos básicos:numberstringbooleanArrayanyvoid
Enum
TypeScript
Tipos básicos:numberstringbooleanArrayanyvoid
EnumUnion typesGenéricos
TypeScript
TypeScript
Funciones
TypeScript
FuncionesSin flexibilidad en el número de parámetros
TypeScript
FuncionesSin flexibilidad en el número de parámetrosParámetros opcionales
TypeScript
FuncionesSin flexibilidad en el número de parámetrosParámetros opcionales
Clases
TypeScript
FuncionesSin flexibilidad en el número de parámetrosParámetros opcionales
ClasesPropiedades fuera del constructor
TypeScript
FuncionesSin flexibilidad en el número de parámetrosParámetros opcionales
ClasesPropiedades fuera del constructorVisibilidad de los miembros
TypeScript
FuncionesSin flexibilidad en el número de parámetrosParámetros opcionales
ClasesPropiedades fuera del constructorVisibilidad de los miembros
Modificador readonly
TypeScript
FuncionesSin flexibilidad en el número de parámetrosParámetros opcionales
ClasesPropiedades fuera del constructorVisibilidad de los miembros
Modificador readonlyPropiedades estáticas
TypeScript
FuncionesSin flexibilidad en el número de parámetrosParámetros opcionales
ClasesPropiedades fuera del constructorVisibilidad de los miembros
Modificador readonlyPropiedades estáticasInterfacesMétodos abstractos
TypeScript
TypeScript
Decoradores (@)
AngularAngular
Primeros pasos
Primeros pasos
ng new para generar la app
Primeros pasos
ng new para generar la appng serve -o para ejecutarla y verla en el navegador
Primeros pasos
ng new para generar la appng serve -o para ejecutarla y verla en el navegadorEntornos dev y prod
Primeros pasos
ng new para generar la appng serve -o para ejecutarla y verla en el navegadorEntornos dev y prodMódulos, componentes y vistas
Primeros pasos
ng new para generar la appng serve -o para ejecutarla y verla en el navegadorEntornos dev y prodMódulos, componentes y vistasArchivos de configuración
Esqueleto de una pieza en Angular
Esqueleto de una pieza en Angular
clase =>
Esqueleto de una pieza en Angular
clase =>=> clase exportada =>
Esqueleto de una pieza en Angular
clase =>=> clase exportada =>=> clase exportada y decorada =>
Esqueleto de una pieza en Angular
clase =>=> clase exportada =>=> clase exportada y decorada =>=> dependencias
Examinando un componente
Examinando un componente
Metadata
Examinando un componente
Metadataselector
Examinando un componente
Metadataselectortemplate / templateUrl
Examinando un componente
Metadataselectortemplate / templateUrlstyles / styleUrls
Examinando un template
Examinando un template
Custom elements
Examinando un template
Custom elementsData binding
Examinando un template
Custom elementsData bindingInterpolation
Examinando un template
Custom elementsData bindingInterpolationProperty binding
Examinando un template
Custom elementsData bindingInterpolationProperty bindingClass & style binding
Examinando un template
Custom elementsData bindingInterpolationProperty bindingClass & style bindingEvent binding
Examinando un template
Custom elementsData bindingInterpolationProperty bindingClass & style bindingEvent bindingTwo-way binding
Examinando un template
Examinando un template
Directivas de atributo
Examinando un template
Directivas de atributongClass
Examinando un template
Directivas de atributongClassngStyle
Examinando un template
Directivas de atributongClassngStyle
Directivas estructurales
Examinando un template
Directivas de atributongClassngStyle
Directivas estructuralesngIf
Examinando un template
Directivas de atributongClassngStyle
Directivas estructuralesngIfngFor
Examinando un template
Directivas de atributongClassngStyle
Directivas estructuralesngIfngForngSwitch
Examinando un template
Directivas de atributongClassngStyle
Directivas estructuralesngIfngForngSwitch
Pipes
Examinando un template
Directivas de atributongClassngStyle
Directivas estructuralesngIfngForngSwitch
Pipes@Pipe, PipeTransform
Servicios
Servicios
Dependency Injection
Servicios
Dependency InjectionInjectable()
Servicios
Dependency InjectionInjectable()Proveedores
Servicios
Dependency InjectionInjectable()ProveedoresSingleton
Formularios
Formularios
[(ngModel)]: Two-way binding
Formularios
[(ngModel)]: Two-way bindingngForm, ngModel y ngSubmit
Formularios
[(ngModel)]: Two-way bindingngForm, ngModel y ngSubmitVariables de template con #
Formularios
[(ngModel)]: Two-way bindingngForm, ngModel y ngSubmitVariables de template con #Validaciones: los diferentes estados
Formularios
[(ngModel)]: Two-way bindingngForm, ngModel y ngSubmitVariables de template con #Validaciones: los diferentes estadosResetear los estados
Formularios
[(ngModel)]: Two-way bindingngForm, ngModel y ngSubmitVariables de template con #Validaciones: los diferentes estadosResetear los estadosTemplate driven y Reactive forms
Conexiones con el servidor
Conexiones con el servidor
Asincronía
Conexiones con el servidor
AsincroníaObservables
Conexiones con el servidor
AsincroníaObservablesSuscripciones
Conexiones con el servidor
AsincroníaObservablesSuscripcionesAPI REST
Conexiones con el servidor
AsincroníaObservablesSuscripcionesAPI RESTEl módulo HttpClientModule
Conexiones con el servidor
AsincroníaObservablesSuscripcionesAPI RESTEl módulo HttpClientModule
Módulo HttpClientModule y servicio HttpClient
Conexiones con el servidor
AsincroníaObservablesSuscripcionesAPI RESTEl módulo HttpClientModule
Módulo HttpClientModule y servicio HttpClientMétodos del servicio HttpClient: get(), post(), put(), patch(), delete()
Navegación por la app
Navegación por la app
El router
Navegación por la app
El routerLas rutas
Navegación por la app
El routerLas rutas
Parámetros: los observables paramMap,queryParamMap y data de ActivatedRoute
Navegación por la app
El routerLas rutas
Parámetros: los observables paramMap,queryParamMap y data de ActivatedRoutePágina por defecto
Navegación por la app
El routerLas rutas
Parámetros: los observables paramMap,queryParamMap y data de ActivatedRoutePágina por defecto404
Navegación por la app
El routerLas rutas
Parámetros: los observables paramMap,queryParamMap y data de ActivatedRoutePágina por defecto404Guards
Navegación por la app
El routerLas rutas
Parámetros: los observables paramMap,queryParamMap y data de ActivatedRoutePágina por defecto404Guards
El RouterOutlet
Navegación por la app
El routerLas rutas
Parámetros: los observables paramMap,queryParamMap y data de ActivatedRoutePágina por defecto404Guards
El RouterOutletLinks de navegación: routerLink y routerLinkActive
Navegación por la app
El routerLas rutas
Parámetros: los observables paramMap,queryParamMap y data de ActivatedRoutePágina por defecto404Guards
El RouterOutletLinks de navegación: routerLink y routerLinkActiverouter.navigate()
Navegación por la app
El routerLas rutas
Parámetros: los observables paramMap,queryParamMap y data de ActivatedRoutePágina por defecto404Guards
El RouterOutletLinks de navegación: routerLink y routerLinkActiverouter.navigate()History API
Navegación por la app
El routerLas rutas
Parámetros: los observables paramMap,queryParamMap y data de ActivatedRoutePágina por defecto404Guards
El RouterOutletLinks de navegación: routerLink y routerLinkActiverouter.navigate()History APIEl servicio Title
Despliegue a producción
Despliegue a producción
Pruebas con ng build
Despliegue a producción
Pruebas con ng buildng build:
--prod: código optimizado para producción
Despliegue a producción
Pruebas con ng buildng build:
--prod: código optimizado para producción--build-optimizer: más optimización
Despliegue a producción
Pruebas con ng buildng build:
--prod: código optimizado para producción--build-optimizer: más optimización--base-href=: cambia el directorio base
Despliegue a producción
Pruebas con ng buildng build:
--prod: código optimizado para producción--build-optimizer: más optimización--base-href=: cambia el directorio base--sourcemaps: genera los source maps
Links
Links
Documentación oficial de AngularPlayground para Angular
Links
Documentación oficial de AngularPlayground para AngularPlayground para TypeScript
Links
Documentación oficial de AngularPlayground para AngularPlayground para TypeScriptConfiguración del compilador TypeScript
Links
Documentación oficial de AngularPlayground para AngularPlayground para TypeScriptConfiguración del compilador TypeScriptDocumentación de Angular CLI
Links
Documentación oficial de AngularPlayground para AngularPlayground para TypeScriptConfiguración del compilador TypeScriptDocumentación de Angular CLIConfiguración de Angular CLI: angular.json
Links
Documentación oficial de AngularPlayground para AngularPlayground para TypeScriptConfiguración del compilador TypeScriptDocumentación de Angular CLIConfiguración de Angular CLI: angular.jsonDocumentación sobre todas las API de JavaScript
Links
Documentación oficial de AngularPlayground para AngularPlayground para TypeScriptConfiguración del compilador TypeScriptDocumentación de Angular CLIConfiguración de Angular CLI: angular.jsonDocumentación sobre todas las API de JavaScriptJSON Server API
Links
Documentación oficial de AngularPlayground para AngularPlayground para TypeScriptConfiguración del compilador TypeScriptDocumentación de Angular CLIConfiguración de Angular CLI: angular.jsonDocumentación sobre todas las API de JavaScriptJSON Server APITablas de compatibilidad en navegadores
Links
Documentación oficial de AngularPlayground para AngularPlayground para TypeScriptConfiguración del compilador TypeScriptDocumentación de Angular CLIConfiguración de Angular CLI: angular.jsonDocumentación sobre todas las API de JavaScriptJSON Server APITablas de compatibilidad en navegadoresAngular en navegadores antiguos
