• Skip to main content
  • Skip to header right navigation
  • Skip to site footer

Antonio Pérez

Full Stack developer

  • Home
  • Sobre mi
  • Podcast
  • Blog
  • Contacto
desarrollo full stack

¿Cuales son las principales novedades de Angular 5?

You are here: Home / Angular 2+ / ¿Cuales son las principales novedades de Angular 5?
18/11/2017 by apcano1978

Angular 5 ya está entre nosotros, el popular framework de Javascript creado por Google se ha renovado de nuevo con una major release, la 5, pentagonal-donut, que nos trae, entre otras, las siguientes novedades a nuestro framework favorito de Javascript.

principales novedades en Angular 5

Aplicaciones más pequeñas y rápidas con Angular 5

Uno de los principales objetivos en esta versión era optimizar el compilador y hacer que las Apps fueran más pequeñas y rápidas, para ello, junto con Angular 5 tenemos también la nueva release d Angular CLI, la 1.5 que optimiza nuestros builds de forma automática, como se suele decir: «under the hood».
Dentro de estos cambios de optimización, contamos con una opción nueva que podemos activar dentro de tsconfig.json la opción es preserveWhitespaces que eliminará automáticamente espacios en blanco innecesarios en nuestros templates y hará, por tanto, más pequeñas nuestras aplicaciones hechas con Angular 5. Aquí tenéis un pequeño snippet de cómo hacerlo:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2017", "dom"]
  },
  "angularCompilerOptions": {
    "preserveWhitespaces": false
  }
}

Pero vamos con la chicha, estas optimizaciones están muy bien pero escapan un poco a nuestro control, vamos a ver exactamente que nos ofrece esta nueva versión que podamos trastear nosotros mismos.

Nuevos eventos en el Router de Angular 5

Ahora, en este nueva versión disponemos de más eventos en el Router con los que podremos añadir más precisión a nuestro código, estos nuevos eventos son:

ActivationStart, ActivationEnd, ChildActivationStart, ChildActivationEnd, GuardsCheckEnd, GuardsCheckStart, ResolveStart y ResolveEnd

Además, ahora ya nos podemos olvidar de location.reload() ya que ahora, podemos configurar el Router para que recargue la página cuando reciba una señal de navegación a la misma Url en la que se encuentra:

providers: [
  // ...
  RouterModule.forRoot(routes, {
    onSameUrlNavigation: 'reload'
  })
]

Http ya está obsoleto, ahora tenemos HttpClient

Hasta ahora ha sido muy común hacer nuestras requests a distintas APIs con la librería ‘@angular/http’ pues bien, esta librería ya la han marcado como «deprecated» su sustituto será:

import { HttpClientModule } from '@angular/common/http';

La principales características de esta librería son:

  • Acceso síncrono y tipado al cuerpo de la respuesta de la API, con soporte para contenido JSON
  • JSON se asume como el tipo por defecto de la comunicación y no deberá ser parseado de forma explícita.
  • Los interceptores permiten introducir lógica intermedia en el pipeline de procesamiento de la respuesta
  • Los objetos de la petición o respuesta ahora son inmutables
  • Ahora disponemos de eventos en el progreso de las solicitudes de subida y descarga de la respuesta.
  • Disponemos también de verificacion post-respuesta y framework de testeo basado en el flujo.

Internacionalización de los pipes relativos a Number, Date y Currency (moneda)

Este punto es especialmente importante para todos aquellos que desarrollamos apps que no van destinadas a usuarios de habla inglesa. Seguro que todos habéis tenido problemas con los formatos de fecha, moneda, etc… Pues bien, ahora, Angular 5 dispone de nuevos pipes relativos a númbers, fecha y moneda que eliminan la necesidad de utilizar I18n para la internacionalización de formatos, supuestamente esta gestión se hará de forma automática y se aplicaran los locales correspondientes a la zona en la que trabajemos, todo un avance!

Validaciones en formularios con Angular 5

Ahora, con esta nueva versión de Angular, podremos decidir cuando se actualizará la validez de un input o incluso un formulario completo, podremos decidir hacerlo via onBlur o bien via onSubmit, en lugar de hacerlo en cada evento que se produzca dentro del input. Aquí tenéis un par de ejemplos de uso, podemos usarlo tanto dentro del propio input que queramos validar:

<input name="nombreCampo" ngModel [ngModelOptions]="{updateOn: 'blur'}">

O bien para todo el formulario:

<form [ngFormOptions]="{updateOn: 'submit'}">

Si estás utilizando reactive forms en lugar de template driven forms puedes también usarlo de la siguiente manera dentro del componente:

ngOnInit() {
  this.newUserForm = this.fb.group({
    userName: ['Antonio', { updateOn: 'blur', validators: [Validators.required] }]
  });
}

Mejoras en las animaciones en Angular 5

Ahora, con esta nueva versión de Angular, han mejorado ciertas cosas y se han añadido algunas opciones nuevas, tales como

Tenemos dos nuevos alias para transiciones, :increment y :decrement

animations: [
  trigger('bannerAnimation', [
   transition(":increment", group([
     query(':enter', [
       style({ left: '100%' }),
       animate('0.5s ease-out', style('*'))
     ]),
     query(':leave', [
       animate('0.5s ease-out', style({ left: '-100%' }))
     ])
   ])),
   transition(":decrement", group([
     query(':enter', [
       style({ left: '-100%' }),
       animate('0.5s ease-out', style('*'))
     ]),
     query(':leave', [
       animate('0.5s ease-out', style({ left: '100%' }))
     ])
   ])),
 ])
]

Los queries ahora soportan límites negativos, con lo que podremos comenzar por el final del elemento en lugar de por el principio, tal que así:

animations: [
 trigger(
   'myAnimation',
   [
     transition(
         '* => go',
         [
           query(
               '.item',
               [
                 style({opacity: 0}),
                 animate('1s', style({opacity: 1})),
               ],
               {limit: -3}),
        ]),
   ]),
]

Estas son algunas de las principales novedades que tenemos en esta nueva release de nuestro framework favorito de Javascript, si quieres información más detallada puedes pasarte días navegando por  angular.io, donde tienes información ampliada de todo esto que te estoy contando, eso sí, preparate para un ratico leyendo en inglés 😉

Deja tus comentarios, si tienes otras breaking features me encantará que me las enseñes a mi también.

 

Categoría: Angular 2+, Desarrollo Front End, Desarrollo web, Javascript

About apcano1978

Intento nadar entre frameworks, IDEs, SDKs… Algunos lo llaman Full stack developer, yo creo que es solo un eufemismo para decir «el que está en medio de todos los follones» Ruby on Rails y Angular … y bastante tengo …

Previous Post:Como crear el archivo custom.css en tu plantilla de WordPress (o Genesis Framework)
Next Post:Conectar por ssh a mi servidor mediante el terminal linux o Mac

Reader Interactions

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ahora también en youtube

Ve al canal

Copyright © 2023 · Antonio Pérez · All Rights Reserved · Powered by Mai Theme