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

Angular

+

TypeScript

TemarioTemarioIntroducción a AngularEntorno de desarrolloJavascript modernoIntroducción a TypeScriptPrimeros pasos en AngularModelos, componentes y vistasServiciosFormulariosAcceso al servidorEnrutamiento y navegaciónDespliegue a producción

Introducción aIntroducción aAngularAngular

¿Qué es Angular?

¿Qué es Angular?

Framework JS

¿Qué es Angular?

Framework JSSPA: Single Page Applications

¿Qué es Angular?

Framework JSSPA: Single Page ApplicationsTypeScript

¿Qué es Angular?

Framework JSSPA: Single Page ApplicationsTypeScriptCódigo fuente y código compilado

¿Qué es Angular?

Framework JSSPA: Single Page ApplicationsTypeScriptCódigo fuente y código compilado¿Angular 2? ¿6? ¿AngularJS?

Entorno deEntorno dedesarrollodesarrollo

Entorno de desarrollo


IDE: Visual Studio Code

https://code.visualstudio.com/Download


IDE: Visual Studio CodeGit


https://git-scm.com/downloads


IDE:

y npm

Visual Studio CodeGitNodeJS


https://git-scm.com/downloads

https://nodejs.org/en/download/

GitGit

Comandos básicos

Comandos básicos

Clonar un repositorio: git clone URL

Comandos básicos

Clonar un repositorio: git clone URL Descargar última versión del repositorio: git pull origin master

Configuración proxy

git config --global http.proxy http://username:password@host:port

git config --global https.proxy http://username:password@host:port

Node.js y npmNode.js y npm

npm

npm

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

npm

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

npm

Instalar última versión después de instalar Node.js (configurar proxy si es necesario)Repositorio de módulos distribuiblesMódulos globales y módulos locales

npm

Instalar última versión después de instalar Node.js (configurar proxy si es necesario)Repositorio de módulos distribuiblesMódulos globales y módulos localesLa carpeta node_modules

npm

Instalar última versión después de instalar Node.js (configurar proxy si es necesario)Repositorio de módulos distribuiblesMódulos globales y módulos localesLa carpeta node_modulesEl archivo package.json:

npm


Registro de dependencias

npm


Registro de dependenciasDependencias de desarrollo y de producción

npm


Registro de dependenciasDependencias de desarrollo y de producciónVersiones (SEMVER)

Comandos npm

Comandos npmInstalar un paquete globalmente: npm install -g paquete

Comandos npmInstalar un paquete globalmente: npm install -g paqueteInstalar un paquete de producción: npm install paquete

Comandos npmInstalar un paquete globalmente: npm install -g paqueteInstalar un paquete de producción: npm install paqueteInstalar un paquete de desarrollo: npm install paquete --save-dev

Comandos npmInstalar un paquete globalmente: npm install -g paqueteInstalar un paquete de producción: npm install paqueteInstalar un paquete de desarrollo: npm install paquete --save-devInstalar todas las dependencias: npm install

Comandos npmInstalar un paquete globalmente: npm install -g paqueteInstalar un paquete de producción: npm install paqueteInstalar un paquete de desarrollo: npm install paquete --save-devInstalar todas las dependencias: npm installInstalar las dependencias de producción: npm install --production

Comandos npmInstalar un paquete globalmente: npm install -g paqueteInstalar un paquete de producción: npm install paqueteInstalar un paquete de desarrollo: npm install paquete --save-devInstalar todas las dependencias: npm installInstalar las dependencias de producción: npm install --productionListar paquetes instalados: npm list --depth=0 (locales) npm list -g --depth=0 (globales)

Configuración proxy

npm config set proxy http://username:password@host:port

npm config set https-proxy http://username:password@host:port

JavaScriptJavaScript

JavaScript

JavaScript

Interpretado, compilado y ejecutado en el navegador

JavaScript

Interpretado, compilado y ejecutado en el navegadorCada navegador programa su propio motor de JS

JavaScript

Interpretado, compilado y ejecutado en el navegadorCada navegador programa su propio motor de JSEstandarización: ECMAScript

JavaScript

Interpretado, compilado y ejecutado en el navegadorCada navegador programa su propio motor de JSEstandarización: ECMAScriptLa versión ES6 o ES2015

JavaScript

Interpretado, compilado y ejecutado en el navegadorCada navegador programa su propio motor de JSEstandarización: ECMAScriptLa versión ES6 o ES2015Transpiladores: Babel, TypeScript

JavaScript

Interpretado, compilado y ejecutado en el navegadorCada navegador programa su propio motor de JSEstandarización: ECMAScriptLa versión ES6 o ES2015Transpiladores: Babel, TypeScript

Organización del código JavaScript


Ejemplo de uso clásico de JS: utilizar un plugin dejQuery en nuestra web, o implementar algunainteracción con el usuario


Ejemplo de uso clásico de JS: utilizar un plugin dejQuery en nuestra web, o implementar algunainteracción con el usuarioPocas líneas de código, todas en un mismo archivo


<head> <meta charset="UTF-8"> <title>Mi web</title> <script src="vendor/jquery/jquery.min.js"></script> <script src="js/tabs.js"></script> </head>


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


24 líneas



<head> <meta charset="UTF-8"> <title>Mi web</title> <script src="vendor/jquery/jquery.min.js"></script> <script src="js/ui.js"></script> </head>


<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



Programar toda la UI de una página


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


Programar toda la UI de una página(function() { var width = window.innerWidth; var height = window.innerHeight; var timerID = 0; var c = document.getElementById('canvas') var ctx = c.getContext('2d'); c.width = width; c.height = height; var speed = 10; var size = 8; var boids = []; var totalBoids = 150; var init = function(){ for (var i = 0; i < totalBoids; i++) { boids.push({ x: Math.random() * width, y: Math.random() * height, v: {

1711líneas



¿2000 líneas en un solo archivo?



Ventajas Inconvenientes




Difícil de leer/entender




Difícil de leer/entenderDifícil de mantener




Difícil de leer/entenderDifícil de mantenerPoca reusabilidad




Difícil de leer/entenderDifícil de mantenerPoca reusabilidadDifícil encontrar código nousado




Difícil de leer/entenderDifícil de mantenerPoca reusabilidadDifícil encontrar código nousadoColisiones de nombres




Difícil de leer/entenderDifícil de mantenerPoca reusabilidadDifícil encontrar código nousadoColisiones de nombres

Una sola peticiónHTTP



Optimización: dividir el código en variosarchivos/módulos





<head> <meta charset="UTF-8"> <title>Mi web</title> <script src="vendor/jquery/jquery.min.js"></script> <script src="js/modules/tabs.js"></script> <script src="js/modules/banners.js"></script> <script src="js/modules/lightbox.js"></script> <script src="js/modules/scroll.js"></script> <script src="js/modules/carousel.js"></script> <script src="js/modules/slideshow.js"></script> <script src="js/modules/gallery.js"></script> <script src="js/modules/navigation.js"></script> </head>







Difícil encontrar código nousado (menos difícil queantes)




Difícil encontrar código nousado (menos difícil queantes)Colisiones de nombres




Difícil encontrar código nousado (menos difícil queantes)Colisiones de nombresMuchas peticiones HTTP




Difícil encontrar código nousado (menos difícil queantes)Colisiones de nombresMuchas peticiones HTTPEl orden importa:dependencias





Legible e inteligible





Legible e inteligibleFácil de mantener





Legible e inteligibleFácil de mantenerReutilizable





Legible e inteligibleFácil de mantenerReutilizableCargamos sólo lo quenecesitamos



Dependencias: es difícil asegurar el orden, y no esposible tener dependencias circulares



Organización del código JavaScript<head> <meta charset="UTF-8"> <title>Mi web</title> <script src="vendor/jquery/jquery.min.js"></script> <script src="js/modules/tabs.js"></script> <script src="js/modules/banners.js"></script> <script src="js/modules/lightbox.js"></script> <script src="js/modules/scroll.js"></script> <script src="js/modules/carousel.js"></script> <script src="js/modules/slideshow.js"></script> <script src="js/modules/gallery.js"></script> <script src="js/modules/navigation.js"></script> </head>


Organización del código JavaScript<head> <meta charset="UTF-8"> <title>Mi web</title> <script src="vendor/jquery/jquery.min.js"></script> <script src="js/modules/tabs.js"></script> <script src="js/modules/banners.js"></script> <script src="js/modules/lightbox.js"></script> <script src="js/modules/scroll.js"></script> <script src="js/modules/carousel.js"></script> <script src="js/modules/slideshow.js"></script> <script src="js/modules/gallery.js"></script> <script src="js/modules/navigation.js"></script> </head>

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

Module loaders: ellos gestionan las dependencias ycargan los módulos (RequireJS, SystemJS)








Difícil encontrar código nousado (menos difícil queantes)Muchas peticiones HTTP





Legible e inteligibleFácil de mantenerReutilizableCargamos sólo lo quenecesitamos





Legible e inteligibleFácil de mantenerReutilizableCargamos sólo lo quenecesitamosGestión automática dedependencias





Legible e inteligibleFácil de mantenerReutilizableCargamos sólo lo quenecesitamosGestión automática dedependenciasEncapsulación


Module bundlers: además de lo anterior, generan unsolo código encadenado y minificado (browserify,webpack)




Ventajas



Ventajas


Una o muy pocasconexiones HTTP



Ventajas


Una o muy pocasconexiones HTTPEliminación de códigono usado (tree shaking)



Ventajas




¿Puedo escribir mis módulos como yo quiera? ¿hay unestándar?


¿Puedo escribir mis módulos como yo quiera? ¿hay unestándar?AMD: Asynchronous Module Definition



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



CommonJS



CommonJSvar myModuleA = require('myModuleA'); function myModuleB() { this.hello = function() { return 'hello!'; } this.goodbye = function() { return 'goodbye!'; } } module.exports = myModuleB;



CommonJS

UMD: Universal 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



CommonJS


ES6 Modules



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


¿AMD, CommonJS, UMD, ES6?Compatibilidad de los módulos ES6 en navegadores¡Webpack!


¿AMD, CommonJS, UMD, ES6?Compatibilidad de los módulos ES6 en navegadores¡Webpack!TypeScript usa la sintaxis ES6


¿AMD, CommonJS, UMD, ES6?Compatibilidad de los módulos ES6 en navegadores¡Webpack!TypeScript usa la sintaxis ES6TS -> ES5 -> webpack -> bundle -> browser =


¿AMD, CommonJS, UMD, ES6?Compatibilidad de los módulos ES6 en navegadores¡Webpack!TypeScript usa la sintaxis ES6TS -> ES5 -> webpack -> bundle -> browser = Angular CLI

ES6

ES6

let y const

ES6

let y constTemplate literals

ES6

let y constTemplate literalsfor ... of

ES6

let y constTemplate literalsfor ... ofFunciones

Parámetros opcionalesFunción arrow:(parámetros) => expresión_devuelta;

ES6

ES6

Operador spreadParámetros en funcionesEnviar varios parámetros a partir de un array

ES6

Operador spreadParámetros en funcionesEnviar varios parámetros a partir de un arraypush y unshiftIntercalar un array dentro de otroCopiar un array en otroCopiar un objeto en otro

ES6

ES6

ClasesPropiedades y métodos

ES6

ClasesPropiedades y métodosGetters y settersPropiedades y métodos estáticosHerencia con extends y super()

ES6

ES6

Módulosimportimport { literal } from 'ruta_modulo'; import literal from 'ruta_modulo'; import * as literal from 'ruta_modulo'; import 'ruta_modulo';export export let a = 3; export let class Clase { ... } export default { key: value }

Programación funcional con arrays


Métodos:


Métodos:map


Métodos:mapfilter


Métodos:mapfilterreduce


Métodos:mapfilterreducefind


Métodos:mapfilterreducefind

Encadenamiento

TypeScriptTypeScript

TypeScript

TypeScript

Superconjunto de JavaScript

TypeScript

Superconjunto de JavaScriptTranspila a ES5

TypeScript

Superconjunto de JavaScriptTranspila a ES5Tipado

TypeScript

Superconjunto de JavaScriptTranspila a ES5TipadoErrores en tiempo de compilación

TypeScript

Superconjunto de JavaScriptTranspila a ES5TipadoErrores en tiempo de compilacióntsc

TypeScript

Superconjunto de JavaScriptTranspila a ES5TipadoErrores en tiempo de compilacióntsctsconfig.json

TypeScript

TypeScript

Tipos básicos:

TypeScript

Tipos básicos:number

TypeScript

Tipos básicos:numberstring

TypeScript

Tipos básicos:numberstringboolean

TypeScript

Tipos básicos:numberstringbooleanArray

TypeScript

Tipos básicos:numberstringbooleanArrayany

TypeScript

Tipos básicos:numberstringbooleanArrayanyvoid

TypeScript


Enum

TypeScript


EnumUnion typesGenéricos

TypeScript

TypeScript

Funciones

TypeScript

FuncionesSin flexibilidad en el número de parámetros

TypeScript

FuncionesSin flexibilidad en el número de parámetrosParámetros opcionales

TypeScript


Clases

TypeScript


ClasesPropiedades fuera del constructor

TypeScript


ClasesPropiedades fuera del constructorVisibilidad de los miembros

TypeScript



Modificador readonly

TypeScript



Modificador readonlyPropiedades estáticas

TypeScript



Modificador readonlyPropiedades estáticasInterfacesMétodos abstractos

TypeScript

TypeScript

Decoradores (@)

AngularAngular

Primeros pasos

Primeros pasos

ng new para generar la app

Primeros pasos

ng new para generar la appng serve -o para ejecutarla y verla en el navegador

Primeros pasos

ng new para generar la appng serve -o para ejecutarla y verla en el navegadorEntornos dev y prod

Primeros pasos

ng new para generar la appng serve -o para ejecutarla y verla en el navegadorEntornos dev y prodMódulos, componentes y vistas

Primeros pasos

ng new para generar la appng serve -o para ejecutarla y verla en el navegadorEntornos dev y prodMódulos, componentes y vistasArchivos de configuración

Esqueleto de una pieza en Angular


clase =>


clase =>=> clase exportada =>


clase =>=> clase exportada =>=> clase exportada y decorada =>


clase =>=> clase exportada =>=> clase exportada y decorada =>=> dependencias

Examinando un componente


Metadata


Metadataselector


Metadataselectortemplate / templateUrl


Metadataselectortemplate / templateUrlstyles / styleUrls

Examinando un template


Custom elements


Custom elementsData binding


Custom elementsData bindingInterpolation


Custom elementsData bindingInterpolationProperty binding


Custom elementsData bindingInterpolationProperty bindingClass & style binding


Custom elementsData bindingInterpolationProperty bindingClass & style bindingEvent binding


Custom elementsData bindingInterpolationProperty bindingClass & style bindingEvent bindingTwo-way binding



Directivas de atributo


Directivas de atributongClass


Directivas de atributongClassngStyle



Directivas estructurales



Directivas estructuralesngIf



Directivas estructuralesngIfngFor



Directivas estructuralesngIfngForngSwitch




Pipes




Pipes@Pipe, PipeTransform

Servicios

Servicios

Dependency Injection

Servicios

Dependency InjectionInjectable()

Servicios

Dependency InjectionInjectable()Proveedores

Servicios

Dependency InjectionInjectable()ProveedoresSingleton

Formularios

Formularios

[(ngModel)]: Two-way binding

Formularios

[(ngModel)]: Two-way bindingngForm, ngModel y ngSubmit

Formularios

[(ngModel)]: Two-way bindingngForm, ngModel y ngSubmitVariables de template con #

Formularios

[(ngModel)]: Two-way bindingngForm, ngModel y ngSubmitVariables de template con #Validaciones: los diferentes estados

Formularios

[(ngModel)]: Two-way bindingngForm, ngModel y ngSubmitVariables de template con #Validaciones: los diferentes estadosResetear los estados

Formularios

[(ngModel)]: Two-way bindingngForm, ngModel y ngSubmitVariables de template con #Validaciones: los diferentes estadosResetear los estadosTemplate driven y Reactive forms

Conexiones con el servidor


Asincronía


AsincroníaObservables


AsincroníaObservablesSuscripciones


AsincroníaObservablesSuscripcionesAPI REST


AsincroníaObservablesSuscripcionesAPI RESTEl módulo HttpClientModule



Módulo HttpClientModule y servicio HttpClient



Módulo HttpClientModule y servicio HttpClientMétodos del servicio HttpClient: get(), post(), put(), patch(), delete()

Navegación por la app


El router


El routerLas rutas


El routerLas rutas

Parámetros: los observables paramMap,queryParamMap y data de ActivatedRoute


El routerLas rutas

Parámetros: los observables paramMap,queryParamMap y data de ActivatedRoutePágina por defecto


El routerLas rutas

Parámetros: los observables paramMap,queryParamMap y data de ActivatedRoutePágina por defecto404


El routerLas rutas

Parámetros: los observables paramMap,queryParamMap y data de ActivatedRoutePágina por defecto404Guards


El routerLas rutas


El RouterOutlet


El routerLas rutas


El RouterOutletLinks de navegación: routerLink y routerLinkActive


El routerLas rutas


El RouterOutletLinks de navegación: routerLink y routerLinkActiverouter.navigate()


El routerLas rutas


El RouterOutletLinks de navegación: routerLink y routerLinkActiverouter.navigate()History API


El routerLas rutas


El RouterOutletLinks de navegación: routerLink y routerLinkActiverouter.navigate()History APIEl servicio Title

Despliegue a producción


Pruebas con ng build


Pruebas con ng buildng build:

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



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



--prod: código optimizado para producción--build-optimizer: más optimización--base-href=: cambia el directorio base



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

https://angular.io/docs

Links

Documentación oficial de AngularPlayground para Angular


https://stackblitz.com/

Links

Documentación oficial de AngularPlayground para AngularPlayground para TypeScript



https://www.typescriptlang.org/play/index.html

Links

Documentación oficial de AngularPlayground para AngularPlayground para TypeScriptConfiguración del compilador TypeScript




https://www.typescriptlang.org/docs/handbook/compiler-options.html

Links

Documentación oficial de AngularPlayground para AngularPlayground para TypeScriptConfiguración del compilador TypeScriptDocumentación de Angular CLI





https://github.com/angular/angular-cli/wiki

Links

Documentación oficial de AngularPlayground para AngularPlayground para TypeScriptConfiguración del compilador TypeScriptDocumentación de Angular CLIConfiguración de Angular CLI: angular.json






https://github.com/angular/angular-cli/wiki/angular-cli

Links

Documentación oficial de AngularPlayground para AngularPlayground para TypeScriptConfiguración del compilador TypeScriptDocumentación de Angular CLIConfiguración de Angular CLI: angular.jsonDocumentación sobre todas las API de JavaScript







https://developer.mozilla.org/en-US/docs/Web/JavaScript

Links

Documentación oficial de AngularPlayground para AngularPlayground para TypeScriptConfiguración del compilador TypeScriptDocumentación de Angular CLIConfiguración de Angular CLI: angular.jsonDocumentación sobre todas las API de JavaScriptJSON Server API








https://github.com/typicode/json-server

Links

Documentación oficial de AngularPlayground para AngularPlayground para TypeScriptConfiguración del compilador TypeScriptDocumentación de Angular CLIConfiguración de Angular CLI: angular.jsonDocumentación sobre todas las API de JavaScriptJSON Server APITablas de compatibilidad en navegadores









https://caniuse.com/

Links

Documentación oficial de AngularPlayground para AngularPlayground para TypeScriptConfiguración del compilador TypeScriptDocumentación de Angular CLIConfiguración de Angular CLI: angular.jsonDocumentación sobre todas las API de JavaScriptJSON Server APITablas de compatibilidad en navegadoresAngular en navegadores antiguos









https://caniuse.com/

https://angular.io/guide/browser-support

[email protected]

@marioglweb

mailto:[email protected]

https://twitter.com/marioglweb

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

Documents