Angular

1. Angular
+
TypeScript

2. Temario
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

3. Introducción a
Introducción a
Angular
Angular

4. ¿Qué es Angular?

5. ¿Qué es Angular?
Framework JS

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

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

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

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

10. Entorno de
Entorno de
desarrollo
desarrollo

11. Entorno de desarrollo

12. Entorno de desarrollo
IDE: Visual Studio Code

13. Entorno de desarrollo
IDE: Visual Studio Code
Git

14. Entorno de desarrollo
IDE:
y npm
Visual Studio Code
Git
NodeJS

15. Git
Git

16. Comandos básicos

17. Comandos básicos
Clonar un repositorio:
git clone URL

18. Comandos básicos
Clonar un repositorio:
git clone URL
Descargar última versión del repositorio:
git pull origin master

19. Configuración proxy
git config --global http.proxy http://username:password@host:port
git config --global https.proxy http://username:password@host:port

20. Node.js y npm
Node.js y npm

21. npm

22. npm
Instalar última versión después de instalar Node.js
(configurar proxy si es necesario)

23. npm
Instalar última versión después de instalar Node.js
(configurar proxy si es necesario)
Repositorio de módulos distribuibles

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

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

26. 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:

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

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

29. 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)

30. Comandos npm

31. Comandos npm
Instalar un paquete globalmente:
npm install -g paquete

32. Comandos npm
Instalar un paquete globalmente:
npm install -g paquete
Instalar un paquete de producción:
npm install paquete

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

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

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

36. 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)

37. Configuración proxy
npm config set proxy http://username:password@host:port
npm config set https-proxy http://username:password@host:port

38. JavaScript
JavaScript

39. JavaScript

40. JavaScript
Interpretado, compilado y ejecutado en el navegador

41. JavaScript
Interpretado, compilado y ejecutado en el navegador
Cada navegador programa su propio motor de JS

42. JavaScript
Interpretado, compilado y ejecutado en el navegador
Cada navegador programa su propio motor de JS
Estandarización: ECMAScript

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

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

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

46. Organización del código JavaScript

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

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

49. Organización del código JavaScript

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

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

52. Organización del código JavaScript

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

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

55. Organización del código JavaScript

56. Organización del código JavaScript
Programar toda la UI de una página

57. 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: {

58. 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: {
1711
líneas

59. Organización del código JavaScript

60. Organización del código JavaScript
¿2000 líneas en un solo archivo?

61. Organización del código JavaScript
¿2000 líneas en un solo archivo?
Ventajas Inconvenientes

62. Organización del código JavaScript
¿2000 líneas en un solo archivo?
Ventajas Inconvenientes
Difícil de leer/entender

63. Organización del código JavaScript
¿2000 líneas en un solo archivo?
Ventajas Inconvenientes
Difícil de leer/entender
Difícil de mantener

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

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

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

67. 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
Una sola petición
HTTP

68. Organización del código JavaScript

69. Organización del código JavaScript
Optimización: dividir el código en varios
archivos/módulos

70. Organización del código JavaScript
Optimización: dividir el código en varios
archivos/módulos

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

72. Organización del código JavaScript

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

74. Organización del código JavaScript
Ventajas Inconvenientes
Difícil encontrar código no
usado (menos difícil que
antes)
<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>

75. Organización del código JavaScript
Ventajas Inconvenientes
Difícil encontrar código no
usado (menos difícil que
antes)
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>

76. Organización del código JavaScript
Ventajas Inconvenientes
Difícil encontrar código no
usado (menos difícil que
antes)
Colisiones de nombres
Muchas 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>

77. Organización del código JavaScript
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>
<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>

78. Organización del código JavaScript
Ventajas Inconvenientes
Difícil encontrar código no
usado (menos difícil que
antes)
Colisiones de nombres
Muchas peticiones HTTP
El 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>

79. Organización del código JavaScript
Ventajas Inconvenientes
Difícil encontrar código no
usado (menos difícil que
antes)
Colisiones de nombres
Muchas peticiones HTTP
El orden importa:
dependencias
Legible e inteligible
Fá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>

80. Organización del código JavaScript
Ventajas Inconvenientes
Difícil encontrar código no
usado (menos difícil que
antes)
Colisiones de nombres
Muchas peticiones HTTP
El orden importa:
dependencias
Legible e inteligible
Fácil de mantener
Reutilizable
<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>

81. Organización del código JavaScript
Ventajas Inconvenientes
Difícil encontrar código no
usado (menos difícil que
antes)
Colisiones de nombres
Muchas peticiones HTTP
El orden importa:
dependencias
Legible e inteligible
Fácil de mantener
Reutilizable
Cargamos sólo lo que
necesitamos
<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>

82. Organización del código JavaScript

83. Dependencias: es difícil asegurar el orden, y no es
posible tener dependencias circulares
Organización del código JavaScript

84. Dependencias: es difícil asegurar el orden, y no es
posible 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>

85. Dependencias: es difícil asegurar el orden, y no es
posible 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>

86. Organización del código JavaScript: módulos

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

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

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

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

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

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

93. Organización del código JavaScript: módulos

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

95. 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
Ventajas

96. 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
Ventajas
Legible e inteligible
Fácil de mantener
Reutilizable
Cargamos sólo lo que
necesitamos
Gestión automática de
dependencias
Encapsulación

97. Una o muy pocas
conexiones HTTP
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
Ventajas
Legible e inteligible
Fácil de mantener
Reutilizable
Cargamos sólo lo que
necesitamos
Gestión automática de
dependencias
Encapsulación

98. Una o muy pocas
conexiones HTTP
Eliminación de código
no usado (tree shaking)
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
Ventajas
Legible e inteligible
Fácil de mantener
Reutilizable
Cargamos sólo lo que
necesitamos
Gestión automática de
dependencias
Encapsulación

99. Organización del código JavaScript: módulos

100. Organización del código JavaScript: módulos
¿Puedo escribir mis módulos como yo quiera? ¿hay un
estándar?

101. Organización del código JavaScript: módulos
¿Puedo escribir mis módulos como yo quiera? ¿hay un
estándar?
AMD: Asynchronous Module Definition

102. 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');
}
};
});

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

104. 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;

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

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

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

108. 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");
}

109. Organización del código JavaScript: módulos

110. Organización del código JavaScript: módulos
¿AMD, CommonJS, UMD, ES6?
Compatibilidad de los módulos ES6 en navegadores

111. Organización del código JavaScript: módulos
¿AMD, CommonJS, UMD, ES6?
Compatibilidad de los módulos ES6 en navegadores
¡Webpack!

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

113. 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 =

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

116. ES6

117. ES6
let y const

118. ES6
let y const
Template literals

119. ES6
let y const
Template literals
for ... of

120. ES6
let y const
Template literals
for ... of
Funciones
Parámetros opcionales
Función arrow:
(parámetros) => expresión_devuelta;

121. ES6

122. ES6
Operador spread
Parámetros en funciones
Enviar varios parámetros a partir de un array

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

124. ES6

125. ES6
Clases
Propiedades y métodos

126. ES6
Clases
Propiedades y métodos
Getters y setters
Propiedades y métodos estáticos
Herencia con extends y super()

127. ES6

128. 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
}

129. Programación funcional con arrays

130. Programación funcional con arrays
Métodos:

131. Programación funcional con arrays
Métodos:
map

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

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

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

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

136. TypeScript
TypeScript

137. TypeScript

138. TypeScript
Superconjunto de JavaScript

139. TypeScript
Superconjunto de JavaScript
Transpila a ES5

140. TypeScript
Superconjunto de JavaScript
Transpila a ES5
Tipado

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

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

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

144. TypeScript

145. TypeScript
Tipos básicos:

146. TypeScript
Tipos básicos:
number

147. TypeScript
Tipos básicos:
number
string

148. TypeScript
Tipos básicos:
number
string
boolean

149. TypeScript
Tipos básicos:
number
string
boolean
Array

150. TypeScript
Tipos básicos:
number
string
boolean
Array
any

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

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

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

154. TypeScript

155. TypeScript
Funciones

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

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

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

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

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

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

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

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

164. TypeScript

165. TypeScript
Decoradores (@)

166. Angular
Angular

167. Primeros pasos

168. Primeros pasos
ng new para generar la app

169. Primeros pasos
ng new para generar la app
ng serve -o para ejecutarla y verla en el navegador

170. Primeros pasos
ng new para generar la app
ng serve -o para ejecutarla y verla en el navegador
Entornos dev y prod

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

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

173. Esqueleto de una pieza en Angular

174. Esqueleto de una pieza en Angular
clase =>

175. Esqueleto de una pieza en Angular
clase =>
=> clase exportada =>

176. Esqueleto de una pieza en Angular
clase =>
=> clase exportada =>
=> clase exportada y decorada =>

177. Esqueleto de una pieza en Angular
clase =>
=> clase exportada =>
=> clase exportada y decorada =>
=> dependencias

178. Examinando un componente

179. Examinando un componente
Metadata

180. Examinando un componente
Metadata
selector

181. Examinando un componente
Metadata
selector
template / templateUrl

182. Examinando un componente
Metadata
selector
template / templateUrl
styles / styleUrls

183. Examinando un template

184. Examinando un template
Custom elements

185. Examinando un template
Custom elements
Data binding

186. Examinando un template
Custom elements
Data binding
Interpolation

187. Examinando un template
Custom elements
Data binding
Interpolation
Property binding

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

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

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

191. Examinando un template

192. Examinando un template
Directivas de atributo

193. Examinando un template
Directivas de atributo
ngClass

194. Examinando un template
Directivas de atributo
ngClass
ngStyle

195. Examinando un template
Directivas de atributo
ngClass
ngStyle
Directivas estructurales

196. Examinando un template
Directivas de atributo
ngClass
ngStyle
Directivas estructurales
ngIf

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

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

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

200. Examinando un template
Directivas de atributo
ngClass
ngStyle
Directivas estructurales
ngIf
ngFor
ngSwitch
Pipes
@Pipe, PipeTransform

201. Servicios

202. Servicios
Dependency Injection

203. Servicios
Dependency Injection
Injectable()

204. Servicios
Dependency Injection
Injectable()
Proveedores

205. Servicios
Dependency Injection
Injectable()
Proveedores
Singleton

206. Formularios

207. Formularios
[(ngModel)]: Two-way binding

208. Formularios
[(ngModel)]: Two-way binding
ngForm, ngModel y ngSubmit

209. Formularios
[(ngModel)]: Two-way binding
ngForm, ngModel y ngSubmit
Variables de template con #

210. Formularios
[(ngModel)]: Two-way binding
ngForm, ngModel y ngSubmit
Variables de template con #
Validaciones: los diferentes estados

211. Formularios
[(ngModel)]: Two-way binding
ngForm, ngModel y ngSubmit
Variables de template con #
Validaciones: los diferentes estados
Resetear los estados

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

213. Conexiones con el servidor

214. Conexiones con el servidor
Asincronía

215. Conexiones con el servidor
Asincronía
Observables

216. Conexiones con el servidor
Asincronía
Observables
Suscripciones

217. Conexiones con el servidor
Asincronía
Observables
Suscripciones
API REST

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

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

220. 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()

221. Navegación por la app

222. Navegación por la app
El router

223. Navegación por la app
El router
Las rutas

224. Navegación por la app
El router
Las rutas
Parámetros: los observables paramMap,
queryParamMap y data de ActivatedRoute

225. Navegación por la app
El router
Las rutas
Parámetros: los observables paramMap,
queryParamMap y data de ActivatedRoute
Página por defecto

226. Navegación por la app
El router
Las rutas
Parámetros: los observables paramMap,
queryParamMap y data de ActivatedRoute
Página por defecto
404

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

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

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

230. 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()

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

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

233. Despliegue a producción

234. Despliegue a producción
Pruebas con ng build

235. Despliegue a producción
Pruebas con ng build
ng build:
--prod: código optimizado para producción

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

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

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

239. Links

240. Links
Documentación oficial de Angular

241. Links
Documentación oficial de Angular
Playground para Angular

242. Links
Documentación oficial de Angular
Playground para Angular
Playground para TypeScript

243. Links
Documentación oficial de Angular
Playground para Angular
Playground para TypeScript
Configuración del compilador TypeScript

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

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

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

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

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

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

250. mario@mariogl.com
@marioglweb