3.0 / 5
Jlopezjujuy
Angular 6 – Lo que se viene este 2018
- 25 marzo, 2018
- Category : Angular,programacion
7.847K
0
like
La fase angular 6 RC ha comenzado. Angular v6 framework ahora es una caracterÃstica completa.
La versión estable de Angular 6 deberÃa ser lanzada muy pronto. Según el calendario oficial, la versión estable de Angular 6 se lanzará en la primera semana de abril de 2018 .
Angular 6-rc.0 se lanzó el 21 de marzo de 2018,
antes de que se libere una versión beta más beta.8 de angular 6 . Angular 6 – beta.8 no se planificó según el calendario oficialÂ
Analicemos una por una las caracterÃsticas y los cambios de corte de angular 6 -rc.0 y angular 6 -beta.8.
Lanzado con muchas caracterÃsticas nuevas, correcciones de errores y algunos cambios de última hora.
CaracterÃsticas
- Agrega soporte para crear elementos personalizados basados ​​en componentes Angular.
- Animaciones:  expone el elemento y los params dentro de los mezcladores de transición.
- Bazel:  cambia la regla ng_package a APF v6
- Ahora  puede crear comentarios de una lÃnea , multilÃnea y jsdoc .
- compilador-cli:Â agregar recursos en lÃnea a ngc
- Se debe reemplazar la propiedad templateUrl y styleUrls en todos los componentes con el decorator @Component con las  propiedades template  y styles .
Cuando angularCompilerOptions { enableResourceInlining : true }  la salida .js de ngc no tendrá una plantilla de carga lenta Url o styleUrls. Tenga en cuenta que esto requiere que haya recursos disponibles para cargar estáticamente en tiempo de compilación.
- Se debe reemplazar la propiedad templateUrl y styleUrls en todos los componentes con el decorator @Component con las  propiedades template  y styles .
- Compatibilidad con TypeScript 2.7: requiere el nodejs 8 como motor de tiempo de ejecuciónÂ
- Mejoras en la API de testeo:Â Â agregue el seguimiento de tareas a Testability
- Los usuarios ahora pueden pasar un tiempo de espera a  whenStable ( ) . Si todavÃa hay macrotasks pendientes cuando se produce el tiempo de espera, la devolución de llamada recibirá una lista de tareas pendientes (proporcionada por la especificación de zona TaskTracking).whenStable ( )  ahora también acepta una devolución de llamada opcional para invocar cada vez que cambie el estado de las macrotasks pendientes. Si esta devolución de llamada devuelve verdadero, whenStable ( )  cancelará la devolución de llamada realizada pendiente, lo que permite a los usuarios un mayor control sobre las macrotasks que esperan.
- Marque los paquetes angulares como efectos secundarios sin costo : este indicador es recogido por el paquete web v4 y se usa para optimizaciones más agresivas.
- Actualizaciones de API de proveedores que se pueden agitar en los árboles :
- Renombrar @Injectable ( { scope -> providedIn } ) .
En lugar de { providedIn: APP_ROOT_SCOPE } , acepta { providedIn: ‘root’ } . Además, { providedIn: null } implica que el inyectable no debe agregarse a ningún ámbito.
- Renombrar @Injectable ( { scope -> providedIn } ) .
- Actualizar tslib a 1.9.0
- Rompiendo cambios
- La   etiqueta <template > quedó en desuso en Angular v4 para evitar colisiones (es decir, cuando se utilizan componentes web).
- hasta ahora podemos usar esa etiqueta usando configurando
# tsconfig.json
{
# ...
"angularCompilerOptions": {
# ...
# This option is no more supported and will have no effect
"enableLegacyTemplate": [true|false]
}
}
beta-.8 elimina soporte para <template> .  <ng-template> se debe usar en su lugar.
- ya no es posible importar funciones relacionadas con la animación de @angular/core. Todos los sÃmbolos de animación ahora deben importarse de @angular/animations .
- application/library package.json  debe actualizarse para proporcionar tslib 1.9.0 o superior para resolver la advertencia incompatible de peerDependencies.
 Ahora es una feature completa, las partes cli y material/cdk de la versión v6 y otras integraciones todavÃa están en obras y se completarán cuando se publique v6.0.0.
- Caracteristicas
- Actualice el resultado del paquete de build.sh a  APF v6
- Actualice rxjs a 6.0.0-beta.0 , consulte esta  GuÃa de actualización de RxJS  para obtener más información
Publicación anterior: caracterÃsticas de angular 6 hasta angular 6 – beta.7 lanzado.
Las versiones beta para Angular 6 están listas. Recientemente se lanzó Angular 6.0.0-beta.7 .
Angular 6 será el compatible con Angular 5 . Por lo tanto, será fácil actualizar la aplicación angular 5 al angular 6.
Las versiones beta angulares se lanzan con una gran cantidad de correcciones de errores, nuevas funciones y cambios de última hora.
Ivy Renderer: Ivy es un nuevo procesador Angular compatible con versiones anteriores que se enfoca en mejoras de velocidad adicionales, reducción de tamaño y mayor flexibilidad. El equipo angular promete que cambiar a Ivy será suave. Esta importante función reducirá el tamaño del código y agilizará la compilación.
Bazel Compiler: Debido a que los cambios en el código fuente ocurren a menudo en pequeños incrementos, no tiene sentido reconstruir toda la aplicación para cada pequeño cambio. En cambio, solo deberÃamos reconstruir el código que realmente cambió, y el código que depende de los cambios. Bazel solo reconstruye lo que es necesario. Con el almacenamiento en caché local y distribuido avanzado, el análisis de dependencia optimizado y la ejecución en paralelo, obtiene compilaciones rápidas e incrementales. Entonces podemos suponer que esta serÃa la caracterÃstica importante de la compilación incremental.
Closure Compiler: Closure Compiler es el optimizador de agrupamiento utilizado para crear artefactos JavaScript para casi todas las aplicaciones web de Google. El compilador de cierre genera consistentemente paquetes más pequeños y hace un mejor trabajo en la eliminación del código inactivo en comparación con los empaquetadores de paquetes web y acumulativos.
Kit de desarrollo de componentes (CDK): CDK ya está incluido en una biblioteca de materiales angulares, que ofrece más de 30 componentes de interfaz de usuario. CDK nos permite construir nuestra propia biblioteca de componentes UI usando Angular Material.
Trabajador de servicio: el  trabajador de servicio es un script que se ejecuta en el navegador web y administra el almacenamiento en caché de una aplicación. El trabajador de servicio está incluido en el angular 5. En el servicio angular 6, el trabajador incluye correcciones de errores y caracterÃsticas adicionales.
CaracterÃsticas importantes de Angular 6 con respecto al propósito de desarrollo
- Soporte de Typescript 2.6.x
- Funciones de formularios
- AbstractControl statusChanges ahora emite un evento de ‘PENDING’ cuando llamas a AbstractControl markAsPending. Anteriormente no emitÃa un evento cuando llamabas a markAsPending.
- ngModelChange ahora se emite después de que el valor / validez se actualiza en su control.
Anteriormente, ngModelChange se emitÃa antes de actualizar su control subyacente. Esto estuvo bien si pasó el valor directamente a través de la palabra clave $ event, por ejemplo
<input [(ngModel)]="name" (ngModelChange)="onChange($event)">
onChange(value) {
console.log(value); // would log updated value
}
Sin embargo, si tuviera un controlador para el evento ngModelChange que verificaba el valor a través del control, obtendrÃa el valor anterior en lugar del valor actualizado. p.ej:
<input #modelDir="ngModel" [(ngModel)]="name" (ngModelChange)="onChange(modelDir)">
onChange(ngModel: NgModel) {
console.log(ngModel.value); // would log old value, not updated value
}
Ahora el valor y la validez se actualizarán antes de que se emita el evento ngModelChange, por lo que la misma configuración registrará el valor actualizado.
onChange(ngModel: NgModel) {
console.log(ngModel.value); // will log updated value
}
- Múltiples validadores para el método de matriz de FormBuilder
De acuerdo con la documentación actual, solo podemos establecer un validador en el campo FormArray con el método FormBuilder.array. Ahora puede agregar los múltiples validadores para el método de matriz como se muestra a continuación:
Por ejemplo:
questionForm: FormGroup;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.questionForm = this.formBuilder.group({
text: ['', Validators.required],
options: this.formBuilder.array([], [MyValidators.correctCount, MyValidators.totalCount])
});
}
- Maneje la cuerda con y sin lÃmite de lÃnea en el validador de patrón.
Anteriormente, el patrón Validator solo funciona con cadenas sin lÃmites de lÃnea (^ y $), el validador las agregará automáticamente a la cadena.
En una nueva caracterÃstica, solo agregará esos caracteres de lÃmites si faltan
- Enrutador : se agregó el evento navigationSource y restoredState to NavigationStart. de esta manera usted puede saber que si se activó una navegación de manera imperativa o mediante el cambio de ubicación.
- Tipo genérico opcional para ElementRefÂ
@ViewChild('my-element') myElement:ElementRef;
Fuente: link
-
Next Post
Angular 6 liberado
THIS IS AN OPTIONAL
Related Post
Micro Servicios con JHipster, Amplia tus conocimientos en esta tecnologÃa.
Hola como están? continuando con los artÃculos sobre JHipster, vamos a ver como crear micro servic
Angular – Comunicación entre componentes hermanos (Sibling component communication)
Hola buenas a todos, hoy les comparto un pequeño tutorial para poder comunicar dos componentes herm
Angular Authentication: Usando Http Client y Http Interceptors
Autenticación en Angular Hola buenas a todos, autenticar nuestra aplicación en angular es algo q
1 COMMENTS