Angular, uno de los mejores frameworks JavaScript de código abierto para el desarrollo de aplicaciones web, recientemente actualizado con la nueva versión Angular 4. El lanzamiento anterior de la versión Angular 2, era todo en uno un nuevo Angular Framework, a diferencia de AngularJS. Para Angular 4 o Angular v4, el equipo decidió nombrarlo como “solo Angular”, sin afirmar ningún número de versión con el nombre.

Del mismo modo que, con cada nuevo marco de versión Angular, el equipo de Angular de Google introdujo increíbles actualizaciones y mejoras para los desarrolladores de Angular y la solución empresarial de desarrollo web AngularJS, de la misma manera en la versión 4 de Angular, Google presentó múltiples funciones nuevas y cambios de imagen invisibles para un rendimiento más rápido y un desarrollo fácil.

• ¿Qué es lo más atractivo desde el punto de vista estético para la consola de administración de Analytics desde cualquier plataforma, CMS o tema que conozca?
• ¿Cuál debo usar para una aplicación basada en web: Redis o Memcached? ¿Memchached tiene la función que permite ejecutar Python contra él? Si no, ¿hay alguna razón por la que debería elegir uno sobre el otro?
• Cuando desarrolla un modelo para el aprendizaje automático, ¿este modelo permanece en el lado del cliente o del servidor? ¿Cuál es la mejor manera de crear un modelo? ¿Dónde debería quedarse?
• ¿Cómo crear un sitio web profesional en WordPress? ¿Cuáles son los conceptos básicos que debo saber al respecto?
• ¿Cuáles son las mejores herramientas de agencia web?

Qué hay de nuevo

1. Renovado * ngIf y * ngFor

La sintaxis de enlace de plantillas admite la sintaxis de estilo else con la sintaxis if y permite a los desarrolladores asignar la representación condicional a la variable local. La sintaxis para se utiliza para almacenar una colección en rodajas. Del mismo modo, as y async se agregan a la plantilla para simplificar la sintaxis.

Cargando…

2. Router ParamMap

Los parámetros del enrutador se guardaron en una estructura de objeto de valor clave hasta ahora, pero con Angular 4 se permite consultar un ParamMap en el enrutador. Es beneficioso para aspectos de seguridad con todos los tipos, ya que la estructura clave-valor anterior tenía un tipo inseguro (tipo Params = {[key: string]: any}).
Los valores de ParamMap son cadenas o una matriz de cadenas, según el método utilizado.

Hasta ahora, los parámetros de ruta se almacenaban en una estructura de objeto clave-valor simple, por lo que eran accesibles mediante el uso de la sintaxis JavaScript estándar (parameterObjekt [‘parameter-name’]) .

clase TestComponent {
sessionId: observable;

constructor (ruta privada: ActivatedRoute) {}

ngOnInit () {
this.sessionId = this.route
.queryParams
.map (params = & gt; params [‘session_id’] || ‘None’);
}
}

Ahora, los parámetros también están disponibles como un mapa, por lo que puede ejecutarse llamando al método (parameterMap.get (‘nombre-parámetro’)).

clase TestComponent {
sessionId: Observable & lt; string & gt ;;

constructor (ruta privada: ActivatedRoute) {}

ngOnInit () {
this.sessionId = this.route
.queryParamMap
.map (paramMap = & gt; paramMap.get (‘session_id’) || ‘Ninguno’);
}
}

3. Compatibilidad TypeScript

Compatibilidad con versiones recientes de TypeScript: 2.1 y 2.2 Mejora de Type Security en toda la aplicación y velocidad de ngc-Compiler.

4. Paquete de animaciones

En la versión anterior con el módulo @ angular / core, el problema era que las funciones se incluían en la parte del código independientemente de si las animaciones se usaban o no. Entonces, en Angular versión 4, la función se agrega a su propio paquete para evitar la carga en la aplicación. Más allá de esto, también es compatible con la búsqueda rápida de documentación.

Se pueden agregar animaciones al NgModule principal importando BrowserAnimationsModule desde @ angular / platform-browser / animations

5. Componentes dinámicos

Los componentes dinámicos se crean de forma declarativa con la nueva * ngComponentOutlet-Guidelines . Anteriormente con ComponentFactory se requería mucho trabajo de programación para ejecutar componentes dinámicamente en tiempo de ejecución. Angular no es simple como el código HTML, también debe centrarse en el enlace de datos y la detección de cambios.

@Componente({
selector: ‘aplicación-primera vez-comprador’,
modelo: ‘

¡Bienvenido a nuestra página!

‘,
})
clase de exportación FirstTimeBuyerComponent {}
@Componente({
selector: ‘aplicación-comprador-frecuente’,
modelo: ‘

¡Bienvenido de nuevo!

‘,
})
clase de exportación FrequentBuyerComponent {}
@Componente({
selector: ‘app-root’,
modelo: ‘

¡Hola Angular v4!

‘,
})
La clase de exportación App implementa OnInit {
bienvenido = FirstTimeBuyerComponent;

ngOnInit () {
if (! this.buyer.isfirstVisit) {
this.alert = FrequentBuyerComponent;
}
}
}

6. Angular Universal

Renderice aplicaciones angulares directamente con el servidor web con Angular Universal. Para Angular Universal, los desarrolladores ya no necesitan JavaScript para representar el contenido, por lo que los sitios web se optimizan más rápido en los motores de búsqueda.

Además, con Web Worker Threads, el contenido se puede representar fuera del hilo de la GUI incluso y se puede agregar simplemente al Árbol DOM para mostrar el contenido más adelante. La mayoría del código universal de Angular 4 ahora se almacena en @ angular / platform-server .

7. Más pequeño y rápido

Dado que el código de desarrollo web de Angular 4 consume menos espacio, se ejecuta rápidamente en comparación con AngularJS y Angular 2. El desarrollador busca continuamente mejoras adicionales para hacerlo más rápido y más fluido.

8. View Engine – Compilación AOT

AOT: la complicación anticipada reduce aproximadamente el 60% del tamaño del código generado. Entonces, con un aumento en la complejidad de las plantillas, se ahorra más tiempo. Se escucha que en Angular 4 se realizan ajustes debajo del capó de tal manera que reduce los paquetes de producción en cientos de kilobytes.

Reduce el tiempo de carga de la página y al mismo tiempo aumenta la velocidad general de la página con un tamaño de código reducido. Resulta en la notable mejora en el rendimiento.

9. Módulos Flat ES (Flat ESM / FESM)

No hay varios archivos pequeños por módulo, solo se envía un archivo por módulo que incluye todos los archivos necesarios para ese módulo. Como los archivos son de versiones “planas”, proporcionan un mejor rendimiento en la ejecución y mejoran la construcción y la agitación del árbol. La versión aplanada incluye una versión enrollada del código en formato ECMAScript Module.

10. Mapas de origen para plantillas

Los mapas fuente son fundamentales para depurar y encontrar errores. Desde el código fuente hasta la salida, está conectado, por lo que ayuda a cortar los errores. Ahora, con Angular 4 los mapas fuente no son solo con código sino también con plantillas. Los mapas de origen para las plantillas creadas por el nuevo compilador de plantillas generan información contextual mientras se depuran en el navegador e incluso en informes de bloqueo y mensajes de registro.