Angular 4 | Introducción

Angular 4 se lanzó 5 años después del lanzamiento oficial de AngularJS. Entre estas dos versiones, se introdujo Angular 2, que fue una reescritura completa de AngularJS. La arquitectura ‘MVC’ de AngularJS se descartó y se introdujo una nueva arquitectura de ‘controlador de servicios’ en Angular 2. Después de Angular 2 llegó Angular 4, que era mucho más eficiente que su predecesor. Sin embargo, la arquitectura utilizada en ambas versiones era la misma y, por lo tanto, actualizar el proyecto de v2 a v4 fue comparativamente más fácil que actualizar de JS a v2.
Se omitió Angular 3 porque el paquete del enrutador ya estaba en la versión 3.3.0. Para evitar más fallas, el equipo decidió omitir la versión 3.x y actualizar todos los demás módulos directamente a la versión 4.0. El angular 4 se lanzó inicialmente en marzo de 2017.

Características:

• Arquitectura: la arquitectura MVC de AngularJS fue reemplazada por una arquitectura de ‘controlador de servicio’.
• View Engine: el motor de visualización ayuda a reducir el código del componente en un 60 %. Esto hace que la aplicación sea liviana ya que los paquetes se reducen en tamaño en varios kilobytes.
• Animación: la animación ahora tiene un paquete separado. La animación también se puede importar desde BrowserAnimationsModule desde @angular/platform-browser/animations .
• Texto TypeScript: Angular 4 utiliza Typescript v2.2. Typescript se considera el superconjunto de Javascript.
• Nuevas palabras clave: se introdujeron algunas palabras clave nuevas como ‘como’. Esto generalmente se usa para almacenar la salida de un segmento o un comando en alguna variable. La condición ‘else’ también se introdujo en Angular 4. La introducción de ‘if-else; la condición de bucle ayudó en la condensación del código.
  • Uso de la palabra clave ‘as’:

    <div *ngFor="let j of weeks | slice:0:5 as num">    Months: {{j}} Num: {{num.length}} </div>

  • Uso de la condición ‘if-else’ en Angular 4: ‘ngIf’ genera ‘Condición válida’, mientras que la condición ‘else’ genera ‘Condición no válida’.

    <span *ngIf="isavailable; else condition1"> Valid Condition.</span> <ng-template #condition1> Invalid Condition</ng-template>

• Soporte móvil: Angular 4 es compatible con casi todos los navegadores móviles modernos.
• Parámetro de búsqueda HTTP: no es necesario llamar a URLSearchParams para el parámetro de búsqueda HTTP.
• Compatibilidad con la versión anterior: Angular 4 es compatible con Angular 2 y AngularJS. Los proyectos desarrollados en Angular 2 funcionarán sin ningún problema en Angular 4.