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
[email protected] @marioglweb