TemarioTemarioIntroducción a AngularEntorno de desarrolloJavascript modernoIntroducción a TypeScriptPrimeros pasos en AngularModelos, componentes y vistasServiciosFormulariosAcceso al servidorEnrutamiento y navegaciónDespliegue a producción
¿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 de desarrollo
IDE: Visual Studio CodeGit
Entorno de desarrollo
IDE:
y npm
Visual Studio CodeGitNodeJS
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
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
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:
Registro de dependencias
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:
Registro de dependenciasDependencias 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 distribuiblesMódulos globales y módulos localesLa carpeta node_modulesEl archivo package.json:
Registro de dependenciasDependencias de desarrollo y de producciónVersiones (SEMVER)
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
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
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 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>
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>
(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
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
<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
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; 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
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/entenderDifícil de mantener
Organización del código JavaScript
¿2000 líneas en un solo archivo?
Ventajas Inconvenientes
Difícil de leer/entenderDifícil de mantenerPoca reusabilidad
Organización del código JavaScript
¿2000 líneas en un solo archivo?
Ventajas Inconvenientes
Difícil de leer/entenderDifícil de mantenerPoca reusabilidadDifícil encontrar código nousado
Organización del código JavaScript
¿2000 líneas en un solo archivo?
Ventajas Inconvenientes
Difícil de leer/entenderDifícil de mantenerPoca reusabilidadDifícil encontrar código nousadoColisiones de nombres
Organización del código JavaScript
¿2000 líneas en un solo archivo?
Ventajas Inconvenientes
Difícil de leer/entenderDifícil de mantenerPoca reusabilidadDifícil encontrar código nousadoColisiones de nombres
Una sola peticiónHTTP
Organización del código JavaScript
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>
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>
Organización del código JavaScript
Ventajas Inconvenientes
Difícil encontrar código nousado (menos difícil queantes)
<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
Ventajas Inconvenientes
Difícil encontrar código nousado (menos difícil queantes)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>
Organización del código JavaScript
Ventajas Inconvenientes
Difícil encontrar código nousado (menos difícil queantes)Colisiones de nombresMuchas 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>
Organización del código JavaScript
Ventajas Inconvenientes
Difícil encontrar código nousado (menos difícil queantes)Colisiones de nombresMuchas peticiones HTTPEl 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>
Organización del código JavaScript
Ventajas Inconvenientes
Difícil encontrar código nousado (menos difícil queantes)Colisiones de nombresMuchas peticiones HTTPEl 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>
Organización del código JavaScript
Ventajas Inconvenientes
Difícil encontrar código nousado (menos difícil queantes)Colisiones de nombresMuchas peticiones HTTPEl orden importa:dependencias
Legible e inteligibleFá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>
Organización del código JavaScript
Ventajas Inconvenientes
Difícil encontrar código nousado (menos difícil queantes)Colisiones de nombresMuchas peticiones HTTPEl orden importa:dependencias
Legible e inteligibleFácil de mantenerReutilizable
<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
Ventajas Inconvenientes
Difícil encontrar código nousado (menos difícil queantes)Colisiones de nombresMuchas peticiones HTTPEl orden importa:dependencias
Legible e inteligibleFácil de mantenerReutilizableCargamos sólo lo quenecesitamos
<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>
Dependencias: es difícil asegurar el orden, y no esposible tener dependencias circulares
Organización del código JavaScript
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>
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>
Module loaders: ellos gestionan las dependencias ycargan los módulos (RequireJS, SystemJS)
Organización del código JavaScript: módulos
Module loaders: ellos gestionan las dependencias ycargan los módulos (RequireJS, SystemJS)
Organización del código JavaScript: módulos
Ventajas Inconvenientes
Module loaders: ellos gestionan las dependencias ycargan los módulos (RequireJS, SystemJS)
Organización del código JavaScript: módulos
Ventajas Inconvenientes
Difícil encontrar código nousado (menos difícil queantes)Muchas peticiones HTTP
Module loaders: ellos gestionan las dependencias ycargan los módulos (RequireJS, SystemJS)
Organización del código JavaScript: módulos
Ventajas Inconvenientes
Difícil encontrar código nousado (menos difícil queantes)Muchas peticiones HTTP
Legible e inteligibleFácil de mantenerReutilizableCargamos sólo lo quenecesitamos
Module loaders: ellos gestionan las dependencias ycargan los módulos (RequireJS, SystemJS)
Organización del código JavaScript: módulos
Ventajas Inconvenientes
Difícil encontrar código nousado (menos difícil queantes)Muchas peticiones HTTP
Legible e inteligibleFácil de mantenerReutilizableCargamos sólo lo quenecesitamosGestión automática dedependencias
Module loaders: ellos gestionan las dependencias ycargan los módulos (RequireJS, SystemJS)
Organización del código JavaScript: módulos
Ventajas Inconvenientes
Difícil encontrar código nousado (menos difícil queantes)Muchas peticiones HTTP
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)
Organización del código JavaScript: módulos
Module bundlers: además de lo anterior, generan unsolo código encadenado y minificado (browserify,webpack)
Organización del código JavaScript: módulos
Ventajas
Module bundlers: además de lo anterior, generan unsolo código encadenado y minificado (browserify,webpack)
Organización del código JavaScript: módulos
Ventajas
Legible e inteligibleFácil de mantenerReutilizableCargamos sólo lo quenecesitamosGestión automática dedependenciasEncapsulación
Una o muy pocasconexiones HTTP
Module bundlers: además de lo anterior, generan unsolo código encadenado y minificado (browserify,webpack)
Organización del código JavaScript: módulos
Ventajas
Legible e inteligibleFácil de mantenerReutilizableCargamos sólo lo quenecesitamosGestión automática dedependenciasEncapsulación
Una o muy pocasconexiones HTTPEliminación de códigono usado (tree shaking)
Module bundlers: además de lo anterior, generan unsolo código encadenado y minificado (browserify,webpack)
Organización del código JavaScript: módulos
Ventajas
Legible e inteligibleFácil de mantenerReutilizableCargamos sólo lo quenecesitamosGestión automática dedependenciasEncapsulación
Organización del código JavaScript: módulos
¿Puedo escribir mis módulos como yo quiera? ¿hay unestándar?
Organización del código JavaScript: módulos
¿Puedo escribir mis módulos como yo quiera? ¿hay unestándar?AMD: Asynchronous Module Definition
Organización del código JavaScript: módulos
¿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'); } }; });
Organización del código JavaScript: módulos
¿Puedo escribir mis módulos como yo quiera? ¿hay unestándar?AMD: Asynchronous Module Definition
CommonJS
Organización del código JavaScript: módulos
¿Puedo escribir mis módulos como yo quiera? ¿hay unestándar?AMD: Asynchronous Module Definition
CommonJSvar 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 unestá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 unestá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 unestá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 unestá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
¿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 ES6TS -> 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 ES6TS -> ES5 -> webpack -> bundle -> browser = Angular CLI
ES6
let y constTemplate literalsfor ... ofFunciones
Parámetros opcionalesFunción arrow:(parámetros) => expresión_devuelta;
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
ClasesPropiedades y métodosGetters y settersPropiedades y métodos estáticosHerencia con extends y super()
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 }
TypeScript
Superconjunto de JavaScriptTranspila a ES5TipadoErrores en tiempo de compilacióntsctsconfig.json
TypeScript
FuncionesSin flexibilidad en el número de parámetrosParámetros opcionales
ClasesPropiedades fuera del constructor
TypeScript
FuncionesSin flexibilidad en el número de parámetrosParámetros opcionales
ClasesPropiedades fuera del constructorVisibilidad de los miembros
TypeScript
FuncionesSin flexibilidad en el número de parámetrosParámetros opcionales
ClasesPropiedades fuera del constructorVisibilidad de los miembros
Modificador readonly
TypeScript
FuncionesSin flexibilidad en el número de parámetrosParámetros opcionales
ClasesPropiedades fuera del constructorVisibilidad de los miembros
Modificador readonlyPropiedades estáticas
TypeScript
FuncionesSin flexibilidad en el número de parámetrosParámetros opcionales
ClasesPropiedades fuera del constructorVisibilidad de los miembros
Modificador readonlyPropiedades estáticasInterfacesMétodos abstractos
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 exportada =>=> clase exportada y decorada =>=> dependencias
Examinando un template
Custom elementsData bindingInterpolationProperty bindingClass & style binding
Examinando un template
Custom elementsData bindingInterpolationProperty bindingClass & style bindingEvent binding
Examinando un template
Custom elementsData bindingInterpolationProperty bindingClass & style bindingEvent bindingTwo-way binding
Examinando un template
Directivas de atributongClassngStyle
Directivas estructuralesngIfngForngSwitch
Examinando un template
Directivas de atributongClassngStyle
Directivas estructuralesngIfngForngSwitch
Pipes
Examinando un template
Directivas de atributongClassngStyle
Directivas estructuralesngIfngForngSwitch
Pipes@Pipe, PipeTransform
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íaObservablesSuscripcionesAPI RESTEl módulo HttpClientModule
Módulo HttpClientModule y servicio HttpClient
Conexiones con el servidor
AsincroníaObservablesSuscripcionesAPI RESTEl módulo HttpClientModule
Módulo HttpClientModule y servicio HttpClientMétodos del servicio HttpClient: get(), post(), put(), patch(), delete()
Navegación por la app
El routerLas rutas
Parámetros: los observables paramMap,queryParamMap y data de ActivatedRoute
Navegación por la app
El routerLas rutas
Parámetros: los observables paramMap,queryParamMap y data de ActivatedRoutePágina por defecto
Navegación por la app
El routerLas rutas
Parámetros: los observables paramMap,queryParamMap y data de ActivatedRoutePágina por defecto404
Navegación por la app
El routerLas rutas
Parámetros: los observables paramMap,queryParamMap y data de ActivatedRoutePágina por defecto404Guards
Navegación por la app
El routerLas rutas
Parámetros: los observables paramMap,queryParamMap y data de ActivatedRoutePágina por defecto404Guards
El RouterOutlet
Navegación por la app
El routerLas rutas
Parámetros: los observables paramMap,queryParamMap y data de ActivatedRoutePágina por defecto404Guards
El RouterOutletLinks de navegación: routerLink y routerLinkActive
Navegación por la app
El routerLas rutas
Parámetros: los observables paramMap,queryParamMap y data de ActivatedRoutePágina por defecto404Guards
El RouterOutletLinks de navegación: routerLink y routerLinkActiverouter.navigate()
Navegación por la app
El routerLas rutas
Parámetros: los observables paramMap,queryParamMap y data de ActivatedRoutePágina por defecto404Guards
El RouterOutletLinks de navegación: routerLink y routerLinkActiverouter.navigate()History API
Navegación por la app
El routerLas rutas
Parámetros: los observables paramMap,queryParamMap y data de ActivatedRoutePágina por defecto404Guards
El RouterOutletLinks de navegación: routerLink y routerLinkActiverouter.navigate()History APIEl servicio Title
Despliegue a producción
Pruebas con ng buildng build:
--prod: código optimizado para producción--build-optimizer: más optimización
Despliegue a producción
Pruebas con ng buildng 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 buildng 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
Documentación oficial de AngularPlayground para Angular
Links
Documentación oficial de AngularPlayground para AngularPlayground para TypeScript
Links
Documentación oficial de AngularPlayground para AngularPlayground para TypeScriptConfiguración del compilador TypeScript
Links
Documentación oficial de AngularPlayground para AngularPlayground para TypeScriptConfiguración del compilador TypeScriptDocumentación de 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.json
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
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
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
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