Angular

+
TypeScript
 Temario
Introducción a Angular
Entorno de desarrollo
Javascript moderno
Introducción a TypeScript
Primeros pasos en Angular
Modelos, componentes y vistas
Servicios
Formularios
Acceso al servidor
Enrutamiento y navegación
Despliegue a producción
Introducción a
Angular
¿Qué es Angular?
¿Qué es Angular?

Framework JS
¿Qué es Angular?

Framework JS
SPA: Single Page Applications
¿Qué es Angular?

Framework JS
SPA: Single Page Applications
TypeScript
¿Qué es Angular?

Framework JS
SPA: Single Page Applications
TypeScript
Código fuente y código compilado
¿Qué es Angular?

Framework JS
SPA: Single Page Applications
TypeScript
Código fuente y código compilado
¿Angular 2? ¿6? ¿AngularJS?
Entorno de
desarrollo
Entorno de desarrollo
Entorno de desarrollo

IDE: Visual Studio Code

Entorno de desarrollo

IDE: Visual Studio Code

Git
Entorno de desarrollo

IDE: Visual Studio Code

Git
NodeJS y npm
Git
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 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 distribuibles
Mó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 distribuibles
Módulos globales y módulos locales
La carpeta node_modules
npm

Instalar última versión después de instalar Node.js

(configurar proxy si es necesario)
Repositorio de módulos distribuibles
Módulos globales y módulos locales
La carpeta node_modules
El archivo package.json:
npm

Instalar última versión después de instalar Node.js

(configurar proxy si es necesario)
Repositorio de módulos distribuibles
Módulos globales y módulos locales
La carpeta node_modules
El 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 distribuibles
Módulos globales y módulos locales
La carpeta node_modules
El archivo package.json:
Registro de dependencias
Dependencias 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 distribuibles
Módulos globales y módulos locales
La carpeta node_modules
El archivo package.json:
Registro de dependencias
Dependencias de desarrollo y de producción
Versiones (SEMVER)
Comandos npm
Comandos npm
Instalar un paquete globalmente:
    npm install -g paquete
Comandos npm
Instalar un paquete globalmente:
    npm install -g paquete
Instalar un paquete de producción:
    npm install paquete
Comandos npm
Instalar un paquete globalmente:
    npm install -g paquete
Instalar un paquete de producción:
    npm install paquete
Instalar un paquete de desarrollo:
    npm install paquete --save-dev
Comandos npm
Instalar un paquete globalmente:
    npm install -g paquete
Instalar un paquete de producción:
    npm install paquete
Instalar un paquete de desarrollo:
    npm install paquete --save-dev
Instalar todas las dependencias:
    npm install
Comandos npm
Instalar un paquete globalmente:
    npm install -g paquete
Instalar un paquete de producción:
    npm install paquete
Instalar un paquete de desarrollo:
    npm install paquete --save-dev
Instalar todas las dependencias:
    npm install
Instalar las dependencias de producción:
    npm install --production
Comandos npm
Instalar un paquete globalmente:
    npm install -g paquete
Instalar un paquete de producción:
    npm install paquete
Instalar un paquete de desarrollo:
    npm install paquete --save-dev
Instalar todas las dependencias:
    npm install
Instalar las dependencias de producción:
    npm install --production
Listar 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

JavaScript
JavaScript
JavaScript

Interpretado, compilado y ejecutado en el navegador

JavaScript

Interpretado, compilado y ejecutado en el navegador

Cada navegador programa su propio motor de JS
JavaScript

Interpretado, compilado y ejecutado en el navegador

Cada navegador programa su propio motor de JS
Estandarización: ECMAScript
JavaScript

Interpretado, compilado y ejecutado en el navegador

Cada navegador programa su propio motor de JS
Estandarización: ECMAScript
La versión ES6 o ES2015
JavaScript

Interpretado, compilado y ejecutado en el navegador

Cada navegador programa su propio motor de JS
Estandarización: ECMAScript
La versión ES6 o ES2015
Transpiladores: Babel, TypeScript
JavaScript

Interpretado, compilado y ejecutado en el navegador

Cada navegador programa su propio motor de JS
Estandarización: ECMAScript
La versión ES6 o ES2015
Transpiladores: Babel, TypeScript
Organización del código JavaScript
Organización del código JavaScript

Ejemplo de uso clásico de JS: utilizar un plugin de

jQuery en nuestra web, o implementar alguna
interacción con el usuario
Organización del código JavaScript

Ejemplo de uso clásico de JS: utilizar un plugin de

jQuery en nuestra web, o implementar alguna
interacción con el usuario
Pocas líneas de código, todas en un mismo archivo
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/tabs.js"></script>
</head>
Organización del código JavaScript
(function($) {
<head>
<meta charset="UTF-8">
<title>Mi
$(document).ready(function()
web</title> {
<script src="vendor/jquery/jquery.min.js"></script> 24 líneas
<script
// Al
src="js/tabs.js"></script>
hacer clic en una pestaña
</head> $(".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
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
(function($) {
<head>
<meta charset="UTF-8">
<title>Mi
$(document).ready(function()
web</title> {
<script src="vendor/jquery/jquery.min.js"></script> 75 líneas
$(document).on('click', '.tab_new', offerGroupSwitchTabs);
<script src="js/ui.js"></script>
$(document).on('click', '.navigationServices-li', jumpTo);
</head> $('.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;
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; 1711
var timerID = 0;
var c = document.getElementById('canvas') líneas
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
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/entender
Difícil de mantener
Organización del código JavaScript

¿2000 líneas en un solo archivo?

Ventajas Inconvenientes

Difícil de leer/entender
Difícil de mantener
Poca reusabilidad
Organización del código JavaScript

¿2000 líneas en un solo archivo?

Ventajas Inconvenientes

Difícil de leer/entender
Difícil de mantener
Poca reusabilidad
Difícil encontrar código no
usado
Organización del código JavaScript

¿2000 líneas en un solo archivo?

Ventajas Inconvenientes

Difícil de leer/entender
Difícil de mantener
Poca reusabilidad
Difícil encontrar código no
usado
Colisiones de nombres
Organización del código JavaScript

¿2000 líneas en un solo archivo?

Ventajas Inconvenientes
Una sola petición Difícil de leer/entender
HTTP Difícil de mantener
Poca reusabilidad
Difícil encontrar código no
usado
Colisiones de nombres
Organización del código JavaScript
Organización del código JavaScript

Optimización: dividir el código en varios

archivos/módulos
Organización del código JavaScript

Optimización: dividir el código en varios

archivos/módulos
Organización del código JavaScript

Optimización: dividir el código en varios

archivos/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
<head>

Organización del código JavaScript

<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>

Ventajas Inconvenientes
<head>

Organización del código JavaScript

<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>

Ventajas Inconvenientes

Difícil encontrar código no

usado (menos difícil que
antes)
<head>

Organización del código JavaScript

<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>

Ventajas Inconvenientes

Difícil encontrar código no

usado (menos difícil que
antes)
Colisiones de nombres
<head>

Organización del código JavaScript

<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>

Ventajas Inconvenientes

Difícil encontrar código no

usado (menos difícil que
antes)
Colisiones de nombres
Muchas peticiones HTTP
<head>

Organización del código JavaScript

<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>

Ventajas Inconvenientes

Difícil encontrar código no

usado (menos difícil que
antes)
Colisiones de nombres
Muchas peticiones HTTP
El orden importa:
dependencias
<head>

Organización del código JavaScript

<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>

Ventajas Inconvenientes

Legible e inteligible Difícil encontrar código no

usado (menos difícil que
antes)
Colisiones de nombres
Muchas peticiones HTTP
El orden importa:
dependencias
<head>

Organización del código JavaScript

<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>

Ventajas Inconvenientes

Legible e inteligible Difícil encontrar código no

Fácil de mantener usado (menos difícil que
antes)
Colisiones de nombres
Muchas peticiones HTTP
El orden importa:
dependencias
<head>

Organización del código JavaScript

<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>

Ventajas Inconvenientes

Legible e inteligible Difícil encontrar código no

Fácil de mantener usado (menos difícil que
Reutilizable antes)
Colisiones de nombres
Muchas peticiones HTTP
El orden importa:
dependencias
<head>

Organización del código JavaScript

<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>

Ventajas Inconvenientes

Legible e inteligible Difícil encontrar código no

Fácil de mantener usado (menos difícil que
Reutilizable antes)
Cargamos sólo lo que Colisiones de nombres
necesitamos Muchas peticiones HTTP
El orden importa:
dependencias
Organización del código JavaScript
Organización del código JavaScript

Dependencias: es difícil asegurar el orden, y no es

posible tener dependencias circulares
<head>

Organización del código JavaScript

<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>
Dependencias: es difícil asegurar el orden, y no es
<script src="js/modules/lightbox.js"></script>
<script src="js/modules/scroll.js"></script>
posible tener dependencias circulares
<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>
<head>

Organización del código JavaScript

<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>
Dependencias: es difícil asegurar el orden, y no es
<script src="js/modules/lightbox.js"></script>
<script src="js/modules/scroll.js"></script>
posible tener dependencias circulares
<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
Organización del código JavaScript: módulos
Module loaders: ellos gestionan las dependencias y
cargan los módulos (RequireJS, SystemJS)
Organización del código JavaScript: módulos
Module loaders: ellos gestionan las dependencias y
cargan los módulos (RequireJS, SystemJS)

Ventajas Inconvenientes
Organización del código JavaScript: módulos
Module loaders: ellos gestionan las dependencias y
cargan los módulos (RequireJS, SystemJS)

Ventajas Inconvenientes

Difícil encontrar código no

usado (menos difícil que
antes)
Muchas peticiones HTTP
Organización del código JavaScript: módulos
Module loaders: ellos gestionan las dependencias y
cargan los módulos (RequireJS, SystemJS)

Ventajas Inconvenientes

Legible e inteligible Difícil encontrar código no

Fácil de mantener usado (menos difícil que
Reutilizable antes)
Cargamos sólo lo que Muchas peticiones HTTP
necesitamos
Organización del código JavaScript: módulos
Module loaders: ellos gestionan las dependencias y
cargan los módulos (RequireJS, SystemJS)

Ventajas Inconvenientes

Legible e inteligible Difícil encontrar código no

Fácil de mantener usado (menos difícil que
Reutilizable antes)
Cargamos sólo lo que Muchas peticiones HTTP
necesitamos
Gestión automática de
dependencias
Organización del código JavaScript: módulos
Module loaders: ellos gestionan las dependencias y
cargan los módulos (RequireJS, SystemJS)

Ventajas Inconvenientes

Legible e inteligible Difícil encontrar código no

Fácil de mantener usado (menos difícil que
Reutilizable antes)
Cargamos sólo lo que Muchas peticiones HTTP
necesitamos
Gestión automática de
dependencias
Encapsulación
Organización del código JavaScript: módulos
Organización del código JavaScript: módulos
Module bundlers: además de lo anterior, generan un
solo código encadenado y minificado (browserify,
webpack)
Organización del código JavaScript: módulos
Module bundlers: además de lo anterior, generan un
solo código encadenado y minificado (browserify,
webpack)
Ventajas
Organización del código JavaScript: módulos
Module bundlers: además de lo anterior, generan un
solo código encadenado y minificado (browserify,
webpack)
Ventajas

Legible e inteligible
Fácil de mantener
Reutilizable
Cargamos sólo lo que
necesitamos
Gestión automática de
dependencias
Encapsulación
Organización del código JavaScript: módulos
Module bundlers: además de lo anterior, generan un
solo código encadenado y minificado (browserify,
webpack)
Ventajas

Legible e inteligible Una o muy pocas

Fácil de mantener conexiones HTTP
Reutilizable
Cargamos sólo lo que
necesitamos
Gestión automática de
dependencias
Encapsulación
Organización del código JavaScript: módulos
Module bundlers: además de lo anterior, generan un
solo código encadenado y minificado (browserify,
webpack)
Ventajas

Legible e inteligible Una o muy pocas

Fácil de mantener conexiones HTTP
Reutilizable Eliminación de código
Cargamos sólo lo que no usado (tree shaking)
necesitamos
Gestión automática de
dependencias
Encapsulació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 un

estándar?
Organización del código JavaScript: módulos

¿Puedo escribir mis módulos como yo quiera? ¿hay un

estándar?
AMD: Asynchronous Module Definition
Organización del código JavaScript: módulos

¿Puedo escribir mis módulos como yo quiera? ¿hay un

está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 un

estándar?
AMD: Asynchronous Module Definition
CommonJS
Organización del código JavaScript: módulos

¿Puedo escribir mis módulos como yo quiera? ¿hay un

estándar?
AMD: Asynchronous Module Definition
CommonJS
var 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 un

está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 un

está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 un

está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 un

está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 ES6
TS -> 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 ES6
TS -> ES5 -> webpack -> bundle -> browser = Angular CLI
ES6
ES6
let y const
ES6
let y const
Template literals
ES6
let y const
Template literals
for ... of
ES6
let y const
Template literals
for ... of
Funciones
Parámetros opcionales
Función arrow:
(parámetros) => expresión_devuelta;
ES6
ES6
Operador spread
Parámetros en funciones
Enviar varios parámetros a partir de un array
ES6
Operador spread
Parámetros en funciones
Enviar varios parámetros a partir de un array
push y unshift
Intercalar un array dentro de otro
Copiar un array en otro
Copiar un objeto en otro
ES6
ES6
Clases
Propiedades y métodos
ES6
Clases
Propiedades y métodos
Getters y setters
Propiedades y métodos estáticos
Herencia con extends y super()
ES6
ES6
Módulos
import
import { 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:
map
filter
Programación funcional con arrays

Métodos:
map
filter
reduce
Programación funcional con arrays

Métodos:
map
filter
reduce
find
Programación funcional con arrays

Métodos:
map
filter
reduce
find
Encadenamiento
TypeScript
TypeScript
TypeScript

Superconjunto de JavaScript
TypeScript

Superconjunto de JavaScript
Transpila a ES5
TypeScript

Superconjunto de JavaScript
Transpila a ES5
Tipado
TypeScript

Superconjunto de JavaScript
Transpila a ES5
Tipado
Errores en tiempo de compilación
TypeScript

Superconjunto de JavaScript
Transpila a ES5
Tipado
Errores en tiempo de compilación
tsc
TypeScript

Superconjunto de JavaScript
Transpila a ES5
Tipado
Errores en tiempo de compilación
tsc
tsconfig.json
TypeScript
TypeScript

Tipos básicos:
TypeScript

Tipos básicos:
number
TypeScript

Tipos básicos:
number
string
TypeScript

Tipos básicos:
number
string
boolean
TypeScript

Tipos básicos:
number
string
boolean
Array
TypeScript

Tipos básicos:
number
string
boolean
Array
any
TypeScript

Tipos básicos:
number
string
boolean
Array
any
void
TypeScript

Tipos básicos:
number
string
boolean
Array
any
void
Enum
TypeScript

Tipos básicos:
number
string
boolean
Array
any
void
Enum
Union types
Genéricos
TypeScript
TypeScript

Funciones
TypeScript

Funciones
Sin flexibilidad en el número de parámetros
TypeScript

Funciones
Sin flexibilidad en el número de parámetros
Parámetros opcionales
TypeScript

Funciones
Sin flexibilidad en el número de parámetros
Parámetros opcionales
Clases
TypeScript

Funciones
Sin flexibilidad en el número de parámetros
Parámetros opcionales
Clases
Propiedades fuera del constructor
TypeScript

Funciones
Sin flexibilidad en el número de parámetros
Parámetros opcionales
Clases
Propiedades fuera del constructor
Visibilidad de los miembros
TypeScript

Funciones
Sin flexibilidad en el número de parámetros
Parámetros opcionales
Clases
Propiedades fuera del constructor
Visibilidad de los miembros
Modificador readonly
TypeScript

Funciones
Sin flexibilidad en el número de parámetros
Parámetros opcionales
Clases
Propiedades fuera del constructor
Visibilidad de los miembros
Modificador readonly
Propiedades estáticas
TypeScript

Funciones
Sin flexibilidad en el número de parámetros
Parámetros opcionales
Clases
Propiedades fuera del constructor
Visibilidad de los miembros
Modificador readonly
Propiedades estáticas
Interfaces
Métodos abstractos
TypeScript
TypeScript

Decoradores (@)
Angular
Primeros pasos
Primeros pasos

ng new para generar la app

Primeros pasos

ng new para generar la app

ng serve -o para ejecutarla y verla en el navegador
Primeros pasos

ng new para generar la app

ng serve -o para ejecutarla y verla en el navegador
Entornos dev y prod
Primeros pasos

ng new para generar la app

ng serve -o para ejecutarla y verla en el navegador
Entornos dev y prod
Módulos, componentes y vistas
Primeros pasos

ng new para generar la app

ng serve -o para ejecutarla y verla en el navegador
Entornos dev y prod
Módulos, componentes y vistas
Archivos 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

Metadata
selector
Examinando un componente

Metadata
selector
template / templateUrl
Examinando un componente

Metadata
selector
template / templateUrl
styles / styleUrls
Examinando un template
Examinando un template

Custom elements
Examinando un template

Custom elements
Data binding
Examinando un template

Custom elements
Data binding
Interpolation
Examinando un template

Custom elements
Data binding
Interpolation
Property binding
Examinando un template

Custom elements
Data binding
Interpolation
Property binding
Class & style binding
Examinando un template

Custom elements
Data binding
Interpolation
Property binding
Class & style binding
Event binding
Examinando un template

Custom elements
Data binding
Interpolation
Property binding
Class & style binding
Event binding
Two-way binding
Examinando un template
Examinando un template

Directivas de atributo
Examinando un template

Directivas de atributo
ngClass
Examinando un template

Directivas de atributo
ngClass
ngStyle
Examinando un template

Directivas de atributo
ngClass
ngStyle
Directivas estructurales
Examinando un template

Directivas de atributo
ngClass
ngStyle
Directivas estructurales
ngIf
Examinando un template

Directivas de atributo
ngClass
ngStyle
Directivas estructurales
ngIf
ngFor
Examinando un template

Directivas de atributo
ngClass
ngStyle
Directivas estructurales
ngIf
ngFor
ngSwitch
Examinando un template

Directivas de atributo
ngClass
ngStyle
Directivas estructurales
ngIf
ngFor
ngSwitch
Pipes
Examinando un template

Directivas de atributo
ngClass
ngStyle
Directivas estructurales
ngIf
ngFor
ngSwitch
Pipes
@Pipe, PipeTransform
Servicios
Servicios

Dependency Injection
Servicios

Dependency Injection
Injectable()
Servicios

Dependency Injection
Injectable()
Proveedores
Servicios

Dependency Injection
Injectable()
Proveedores
Singleton
Formularios
Formularios

[(ngModel)]: Two-way binding

Formularios

[(ngModel)]: Two-way binding

ngForm, ngModel y ngSubmit
Formularios

[(ngModel)]: Two-way binding

ngForm, ngModel y ngSubmit
Variables de template con #
Formularios

[(ngModel)]: Two-way binding

ngForm, ngModel y ngSubmit
Variables de template con #
Validaciones: los diferentes estados
Formularios

[(ngModel)]: Two-way binding

ngForm, ngModel y ngSubmit
Variables de template con #
Validaciones: los diferentes estados
Resetear los estados
Formularios

[(ngModel)]: Two-way binding

ngForm, ngModel y ngSubmit
Variables de template con #
Validaciones: los diferentes estados
Resetear los estados
Template driven y Reactive forms
Conexiones con el servidor
Conexiones con el servidor

Asincronía
Conexiones con el servidor

Asincronía
Observables
Conexiones con el servidor

Asincronía
Observables
Suscripciones
Conexiones con el servidor

Asincronía
Observables
Suscripciones
API REST
Conexiones con el servidor

Asincronía
Observables
Suscripciones
API REST
El módulo HttpClientModule
Conexiones con el servidor

Asincronía
Observables
Suscripciones
API REST
El módulo HttpClientModule
Módulo HttpClientModule y servicio HttpClient
Conexiones con el servidor

Asincronía
Observables
Suscripciones
API REST
El módulo HttpClientModule
Módulo HttpClientModule y servicio HttpClient
Mé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 router
Las rutas
Navegación por la app
El router
Las rutas
Parámetros: los observables paramMap,
queryParamMap y data de ActivatedRoute
Navegación por la app
El router
Las rutas
Parámetros: los observables paramMap,
queryParamMap y data de ActivatedRoute
Página por defecto
Navegación por la app
El router
Las rutas
Parámetros: los observables paramMap,
queryParamMap y data de ActivatedRoute
Página por defecto
404
Navegación por la app
El router
Las rutas
Parámetros: los observables paramMap,
queryParamMap y data de ActivatedRoute
Página por defecto
404
Guards
Navegación por la app
El router
Las rutas
Parámetros: los observables paramMap,
queryParamMap y data de ActivatedRoute
Página por defecto
404
Guards
El RouterOutlet
Navegación por la app
El router
Las rutas
Parámetros: los observables paramMap,
queryParamMap y data de ActivatedRoute
Página por defecto
404
Guards
El RouterOutlet
Links de navegación: routerLink y routerLinkActive
Navegación por la app
El router
Las rutas
Parámetros: los observables paramMap,
queryParamMap y data de ActivatedRoute
Página por defecto
404
Guards
El RouterOutlet
Links de navegación: routerLink y routerLinkActive
router.navigate()
Navegación por la app
El router
Las rutas
Parámetros: los observables paramMap,
queryParamMap y data de ActivatedRoute
Página por defecto
404
Guards
El RouterOutlet
Links de navegación: routerLink y routerLinkActive
router.navigate()
History API
Navegación por la app
El router
Las rutas
Parámetros: los observables paramMap,
queryParamMap y data de ActivatedRoute
Página por defecto
404
Guards
El RouterOutlet
Links de navegación: routerLink y routerLinkActive
router.navigate()
History API
El servicio Title
Despliegue a producción
Despliegue a producción

Pruebas con ng build

Despliegue a producción

Pruebas con ng build

ng build:
--prod: código optimizado para producción
Despliegue a producción

Pruebas con ng build

ng build:
--prod: código optimizado para producción
--build-optimizer: más optimización
Despliegue a producción

Pruebas con ng build

ng 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 build

ng 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 Angular

Links

Documentación oficial de Angular

Playground para Angular
Links

Documentación oficial de Angular

Playground para Angular
Playground para TypeScript
Links

Documentación oficial de Angular

Playground para Angular
Playground para TypeScript
Configuración del compilador TypeScript
Links

Documentación oficial de Angular

Playground para Angular
Playground para TypeScript
Configuración del compilador TypeScript
Documentación de Angular CLI
Links

Documentación oficial de Angular

Playground para Angular
Playground para TypeScript
Configuración del compilador TypeScript
Documentación de Angular CLI
Configuración de Angular CLI: angular.json
Links

Documentación oficial de Angular

Playground para Angular
Playground para TypeScript
Configuración del compilador TypeScript
Documentación de Angular CLI
Configuración de Angular CLI: angular.json
Documentación sobre todas las API de JavaScript
Links

Documentación oficial de Angular

Playground para Angular
Playground para TypeScript
Configuración del compilador TypeScript
Documentación de Angular CLI
Configuración de Angular CLI: angular.json
Documentación sobre todas las API de JavaScript
JSON Server API
Links

Documentación oficial de Angular

Playground para Angular
Playground para TypeScript
Configuración del compilador TypeScript
Documentación de Angular CLI
Configuración de Angular CLI: angular.json
Documentación sobre todas las API de JavaScript
JSON Server API
Tablas de compatibilidad en navegadores
Links

Documentación oficial de Angular

Playground para Angular
Playground para TypeScript
Configuración del compilador TypeScript
Documentación de Angular CLI
Configuración de Angular CLI: angular.json
Documentación sobre todas las API de JavaScript
JSON Server API
Tablas de compatibilidad en navegadores
Angular en navegadores antiguos
mario@mariogl.com
@marioglweb