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.
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.
Leave a Reply