Angular 4 - Descripción general
Hay tres versiones principales de Angular. La primera versión que se lanzó es Angular1, que también se llama AngularJS. Angular1 fue seguido por Angular2, que tuvo muchos cambios en comparación con Angular1.
La estructura de Angular se basa en la arquitectura de componentes / servicios. AngularJS se basó en el controlador de vista del modelo.Angular 4 lanzado en marzo de 2017 demuestra ser un gran avance y es la última versión del equipo de Angular después de Angular2.
Angular 4 es casi lo mismo que Angular 2. Tiene compatibilidad con versiones anteriores de Angular 2. Los proyectos desarrollados en Angular 2 funcionarán sin problemas con Angular 4.
Veamos ahora las nuevas funciones y los cambios realizados en Angular 4.
¿Por qué Angular4 y no Angular3?
El equipo de Angular enfrentó algunos problemas de control de versiones internamente con sus módulos y debido al conflicto tuvieron que seguir adelante y lanzar la próxima versión de Angular: Angular4.
Veamos ahora las nuevas características agregadas a Angular 4 -
ng Si
Angular2 solo admitía el ifcondición. Sin embargo, Angular 4 admite elif elsecondición también. Veamos cómo funciona usando la plantilla ng.
<span *ngIf="isavailable; else condition1">Condition is valid.</span>
<ng-template #condition1>Condition is invalid</ng-template>como palabra clave en bucle for
Con la ayuda de as palabra clave, puede almacenar el valor como se muestra a continuación:
<div *ngFor="let i of months | slice:0:5 as total">
Months: {{i}} Total: {{total.length}}
</div>La variable total almacena la salida del segmento usando el as palabra clave.
Paquete de animación
La animación en Angular 4 está disponible como un paquete separado y debe importarse desde @ angular / animations. En Angular2, estaba disponible con @angular/core. Todavía se mantiene igual por su aspecto de compatibilidad con versiones anteriores.
Modelo
Angular 4 usos <ng-template> como la etiqueta en lugar de <template>;este último se usó en Angular2. La razón por la que Angular 4 cambió<template> a <ng-template> es debido al conflicto de nombres del <template> etiqueta con el html <template>etiqueta estándar. Desaprobará por completo seguir adelante. Este es uno de los principales cambios en Angular 4.
TypeScript 2.2
Angular 4 se actualiza a una versión reciente de TypeScript, que es 2.2. Esto ayuda a mejorar la velocidad y proporciona una mejor verificación de tipos en el proyecto.
Caso de título de tubería
Angular 4 ha agregado un nuevo caso de título de tubería, que cambia la primera letra de cada palabra a mayúsculas.
<div>
<h2>{{ 'Angular 4 titlecase' | titlecase }}</h2>
</div>La línea de código anterior genera el siguiente resultado: Angular 4 Titlecase.
Parámetros de búsqueda Http
Se simplifican los parámetros de búsqueda para http get api. No necesitamos llamarURLSearchParams por lo mismo que se estaba haciendo en Angular2.
Aplicaciones más pequeñas y rápidas
Las aplicaciones de Angular 4 son más pequeñas y rápidas en comparación con Angular2. Utiliza la versión 2.2 de TypeScript, la última versión que hace que la compilación final sea de tamaño pequeño.