Angular

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
TypeScript
¿Qué es Angular?
Framework JS
TypeScript
Código fuente y código compilado
¿Qué es Angular?
Framework JS
TypeScript
Código fuente y código compilado
¿Angular 2? ¿6? ¿AngularJS?
Entorno de
desarrollo
IDE: Visual Studio Code


Git

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

Repositorio de módulos distribuibles
npm

Módulos globales y módulos locales
npm

La carpeta node_modules
npm

El archivo package.json:
npm

Registro de dependencias
npm

Dependencias de desarrollo y de producción
npm

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 de producción:
npm install paquete
Comandos npm
npm install paquete
Instalar un paquete de desarrollo:
npm install paquete --save-dev
Comandos npm
npm install paquete
Instalar todas las dependencias:
npm install
Comandos npm
npm install paquete
npm install
Instalar las dependencias de producción:
npm install --production
Comandos npm
npm install paquete
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

Cada navegador programa su propio motor de JS
JavaScript

Estandarización: ECMAScript
JavaScript

La versión ES6 o ES2015
JavaScript

Transpiladores: Babel, TypeScript
JavaScript

Transpiladores: Babel, TypeScript
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
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
<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($) {
<head>
<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);
<head>
<script src="js/ui.js"></script>
</head>
(function($) {
<head>
<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 n_show = 2;
} else {
var hidden_classes = ".hidden, .hidden-sm, .hidden-xs";
var n_show = 1;
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: {

(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: {
¿2000 líneas en un solo archivo?

Ventajas Inconvenientes
Difícil de leer/entender
Difícil de mantener
Poca reusabilidad
Poca reusabilidad
Difícil encontrar código no
usado
Poca reusabilidad
usado
Colisiones de nombres
Una sola petición Difícil de leer/entender
HTTP Difícil de mantener
Poca reusabilidad
usado
Optimización: dividir el código en varios

archivos/módulos

archivos/módulos

archivos/módulos
<head>
<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>
<head>

</head>
<head>

</head>

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

</head>

antes)
<head>

</head>

antes)
Muchas peticiones HTTP
<head>

</head>

antes)
El orden importa:
dependencias
<head>

</head>
Legible e inteligible Difícil encontrar código no

antes)
El orden importa:
dependencias
<head>

</head>

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

</head>

Reutilizable antes)
El orden importa:
dependencias
<head>

</head>

Reutilizable antes)
Cargamos sólo lo que Colisiones de nombres
necesitamos Muchas peticiones HTTP
El orden importa:
dependencias
Dependencias: es difícil asegurar el orden, y no es

posible tener dependencias circulares
<head>

</head>
<head>

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

antes)

Reutilizable antes)
Cargamos sólo lo que Muchas peticiones HTTP
necesitamos

Reutilizable antes)
necesitamos
Gestión automática de
dependencias

Reutilizable antes)
necesitamos
dependencias
Encapsulación
Module bundlers: además de lo anterior, generan un
solo código encadenado y minificado (browserify,
webpack)
webpack)
Ventajas
webpack)
Ventajas
Legible e inteligible
Fácil de mantener
Reutilizable
Cargamos sólo lo que
necesitamos
dependencias
Encapsulación
webpack)
Ventajas
Legible e inteligible Una o muy pocas

Fácil de mantener conexiones HTTP
Reutilizable
Cargamos sólo lo que
necesitamos
dependencias
Encapsulación
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
dependencias
Encapsulación
¿Puedo escribir mis módulos como yo quiera? ¿hay un

estándar?

estándar?
AMD: Asynchronous Module Definition

estándar?
define(['myModule', 'myOtherModule'], function(myModule, myOtherModule) {
return {
hello: function() {
console.log('hello');
},
goodbye: function() {
console.log('goodbye');
}
};
});

estándar?
CommonJS

estándar?
CommonJS
var myModuleA = require('myModuleA');
function myModuleB() {
this.hello = function() {
return 'hello!';
}
this.goodbye = function() {
return 'goodbye!';
}
}
module.exports = myModuleB;

estándar?
CommonJS
UMD: Universal Module Definition

estándar?
CommonJS
(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

estándar?
CommonJS
ES6 Modules

estándar?
CommonJS
ES6 Modules
import { method1 } from './moduleA.js';
method1("hello");
export let method2 = function() {

console.log("Method 2");
}
¿AMD, CommonJS, UMD, ES6?

Compatibilidad de los módulos ES6 en navegadores

¡Webpack!

¡Webpack!
TypeScript usa la sintaxis ES6

¡Webpack!
TS -> ES5 -> webpack -> bundle -> browser =

¡Webpack!
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
Métodos:
Métodos:
map
Métodos:
map
filter
Métodos:
map
filter
reduce
Métodos:
map
filter
reduce
find
Métodos:
map
filter
reduce
find
Encadenamiento
TypeScript
TypeScript
TypeScript
Superconjunto de JavaScript
TypeScript
Transpila a ES5
TypeScript
Transpila a ES5
Tipado
TypeScript
Transpila a ES5
Tipado
Errores en tiempo de compilación
TypeScript
Transpila a ES5
Tipado
tsc
TypeScript
Transpila a ES5
Tipado
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
TypeScript
Funciones
Clases
TypeScript
Funciones
Clases
Propiedades fuera del constructor
TypeScript
Funciones
Clases
Visibilidad de los miembros
TypeScript
Funciones
Clases
Modificador readonly
TypeScript
Funciones
Clases
Propiedades estáticas
TypeScript
Funciones
Clases
Propiedades estáticas
Interfaces
Métodos abstractos
TypeScript
TypeScript
Decoradores (@)
Angular
Primeros pasos
Primeros pasos
ng new para generar la app

Primeros pasos

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

Entornos dev y prod
Primeros pasos

Entornos dev y prod
Módulos, componentes y vistas
Primeros pasos

Entornos dev y prod
Módulos, componentes y vistas
Archivos de configuración
Esqueleto de una pieza en Angular
clase =>
clase =>
=> clase exportada =>
clase =>
=> clase exportada y decorada =>
clase =>
=> clase exportada y decorada =>
=> dependencias
Examinando un componente
Metadata
Metadata
selector
Metadata
selector
template / templateUrl
Metadata
selector
template / templateUrl
styles / styleUrls
Examinando un template
Custom elements
Custom elements
Data binding
Custom elements
Data binding
Interpolation
Custom elements
Data binding
Interpolation
Property binding
Custom elements
Data binding
Interpolation
Property binding
Class & style binding
Custom elements
Data binding
Interpolation
Property binding
Event binding
Custom elements
Data binding
Interpolation
Property binding
Event binding
Two-way binding
Directivas de atributo
ngClass
ngClass
ngStyle
ngClass
ngStyle
Directivas estructurales
ngClass
ngStyle
ngIf
ngClass
ngStyle
ngIf
ngFor
ngClass
ngStyle
ngIf
ngFor
ngSwitch
ngClass
ngStyle
ngIf
ngFor
ngSwitch
Pipes
ngClass
ngStyle
ngIf
ngFor
ngSwitch
Pipes
@Pipe, PipeTransform
Servicios
Servicios
Dependency Injection
Servicios
Injectable()
Servicios
Injectable()
Proveedores
Servicios
Injectable()
Proveedores
Singleton
Formularios
Formularios
[(ngModel)]: Two-way binding

Formularios

ngForm, ngModel y ngSubmit
Formularios

Variables de template con #
Formularios

Validaciones: los diferentes estados
Formularios

Resetear los estados
Formularios

Resetear los estados
Template driven y Reactive forms
Conexiones con el servidor
Asincronía
Asincronía
Observables
Asincronía
Observables
Suscripciones
Asincronía
Observables
Suscripciones
API REST
Asincronía
Observables
Suscripciones
API REST
El módulo HttpClientModule
Asincronía
Observables
Suscripciones
API REST
Módulo HttpClientModule y servicio HttpClient
Asincronía
Observables
Suscripciones
API REST
Módulo HttpClientModule y servicio HttpClient
Métodos del servicio HttpClient:
get(), post(), put(), patch(), delete()
Navegación por la app
El router
El router
Las rutas
El router
Las rutas
Parámetros: los observables paramMap,
queryParamMap y data de ActivatedRoute
El router
Las rutas
Página por defecto
El router
Las rutas
Página por defecto
404
El router
Las rutas
Página por defecto
404
Guards
El router
Las rutas
Página por defecto
404
Guards
El RouterOutlet
El router
Las rutas
Página por defecto
404
Guards
El RouterOutlet
Links de navegación: routerLink y routerLinkActive
El router
Las rutas
Página por defecto
404
Guards
El RouterOutlet
router.navigate()
El router
Las rutas
Página por defecto
404
Guards
El RouterOutlet
router.navigate()
History API
El router
Las rutas
Página por defecto
404
Guards
El RouterOutlet
router.navigate()
History API
El servicio Title
Pruebas con ng build


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

ng build:
--build-optimizer: más optimización

ng build:
--base-href=: cambia el directorio base

ng build:
--base-href=: cambia el directorio base
--sourcemaps: genera los source maps
Links
Links
Documentación oficial de Angular

Links

Playground para Angular
Links

Playground para TypeScript
Links

Configuración del compilador TypeScript
Links

Documentación de Angular CLI
Links

Configuración de Angular CLI: angular.json
Links

Documentación sobre todas las API de JavaScript
Links

JSON Server API
Links

JSON Server API
Tablas de compatibilidad en navegadores
Links

JSON Server API
Tablas de compatibilidad en navegadores
Angular en navegadores antiguos
mario@mariogl.com
@marioglweb

Angular

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Angular

Încărcat de

Drepturi de autor:

Formate disponibile

Angular

IDE: Visual Studio Code

IDE: Visual Studio Code

IDE: Visual Studio Code

git clone URL

git clone URL

git pull origin master

git conﬁg --global http.proxy http://username:password@host:port

git conﬁg --global https.proxy http://username:password@host:port

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

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

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

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

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

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

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

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

npm conﬁg set proxy http://username:password@host:port

npm conﬁg set https-proxy http://username:password@host:port

Interpretado, compilado y ejecutado en el navegador

Interpretado, compilado y ejecutado en el navegador

Interpretado, compilado y ejecutado en el navegador

Interpretado, compilado y ejecutado en el navegador

Interpretado, compilado y ejecutado en el navegador

Interpretado, compilado y ejecutado en el navegador

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

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

// Ocultamos todos los bloques de contenido

// Desmarcamos la pestaña que estuviera activa

var loadMore = function(e) {

Programar toda la UI de una página

Programar toda la UI de una página

var speed = 10;

var init = function(){

for (var i = 0; i < totalBoids; i++) {

Programar toda la UI de una página

var speed = 10;

var init = function(){

for (var i = 0; i < totalBoids; i++) {

¿2000 líneas en un solo archivo?

¿2000 líneas en un solo archivo?

¿2000 líneas en un solo archivo?

¿2000 líneas en un solo archivo?

¿2000 líneas en un solo archivo?

¿2000 líneas en un solo archivo?

¿2000 líneas en un solo archivo?

¿2000 líneas en un solo archivo?

Optimización: dividir el código en varios

Optimización: dividir el código en varios

Optimización: dividir el código en varios

Organización del código JavaScript

Organización del código JavaScript

Difícil encontrar código no

Organización del código JavaScript

Difícil encontrar código no

Organización del código JavaScript

Difícil encontrar código no

Organización del código JavaScript

Difícil encontrar código no

Organización del código JavaScript

Legible e inteligible Difícil encontrar código no

Organización del código JavaScript

Legible e inteligible Difícil encontrar código no