Diferencias y similitudes entre Angular 1.x (AngularJS), Angular 2 y Angular 4

Angular 2 (ahora ya Angular 4) fue expuesto al público en general por Google en el 2016, no como una versión mejorada de AngularJS, sino como una versión paralela basada en Typescript en lugar de Javascript, de hecho, tanto Angular 4 como AngularJS coexisten de forma paralela y han tenido actualizaciones de manera simultánea.

 

Otra diferencia fundamental entre las dos versiones de Angular, es que la primera versión basó su enfoque únicamente en el desarrollo WEB para entornos de escritorio, una gran diferencia con Angular 2/4, que está basado en el paradigma multiplataforma, incluyendo de forma natural la compatibilidad con los dispositivos móviles, sin embargo, ambas versiones son completamente compatibles con esos dispositivos si es que cuentan con navegadores modernos.

 

En términos técnicos se pudiera decir que son dos frameworks diferentes pero con muchas similitudes, adentrándonos un poco en las principales diferencias, podemos encontrar lo siguiente:

 

  • Angular 4 no posee el concepto de «scope» o controladores, en su lugar, utiliza una jerarquía de componentes como su base arquitectónica.
  • Posee una sintaxis más simple, utilizando «[]» para ligar propiedades y «( )» para ligar eventos.
  • El desempeño en dispositivos móviles es mucho mejor.
  • Al ser diseñado de forma modular, como resultado, se produce un código más ligero y un núcleo más rápido
  • Es compatible únicamente con navegadores modernos
  • Para su desarrollo, es utilizado el lenguaje de programación «Typescript», que a diferencia de Javascript, tiene las siguientes cualidades:
    • Programación orientada a objetos basada en clases
    • Escritura Estática
    • Retro compatibilidad con Javascript

En cuanto a la sintaxis de ambos frameworks, hay varios puntos destacables, por ejemplo, en Angular 2 las variables ahora son definidas con la palabra clave “let”, las instrucciones como “ng-repeat” y “ng-for” ahora poseen como prefijo un asterisco (*) y deben ser escritas en Camel Case, un ejemplo de estas nuevas formas de codificación son las siguientes:

Angular 1.x

 

Angular 4

 

Para enlazar los datos, en Angular 1.x se usa la instrucción “ng-bind” para ligar una propiedad a un valor, sin embargo en Angular 4, para obtener el mismo resultado se pone el atributo entre corchetes “[propiedad]” y luego en una etiqueta.

 

Angular 1.x

Angular 4

 

Del mismo modo, para ligar atributos, ambos frameworks lo realizan con diferentes sintaxis, en Angular 4 ahora es requerido tenerlo entre paréntesis (), o tener el prefijo “on-“ en lugar de “ng-click”.

 

Angular 1.x

Angular 4

 

O bien, se puede realizar del siguiente modo:

 

Los enrutadores (routing) es un tema bastante extenso, sin embargo podemos en este artículo hablar un poco sobre ello, en Angular 1.x se utiliza “$routeProvider” del módulo “ngRoute”, sin embargo en Angular 2 se definen en un módulo externo, donde se especifican de manera individual el “path”, el nombre y el componente asociado a la ruta.

 

Angular 1.x

 

Angular 4

 

Como se pudo apreciar anteriormente, se puede concluir que tanto AngularJS como Angular 4 son dos frameworks diferentes aunque guarden ciertas similitudes en su estructura, hay que ser precavidos al momento de utilizarlos (Sobre todo Angular4), ya que su compatibilidad con navegadores viejos no es muy buena y hay que tener en cuenta que AngularJS es el lenguaje del “presente” y Angular4 está orientado al “futuro”

Algo importante que mencionar es que Angular 4 no es una “revolución” propiamente dicho sobre Angular 2, ya que únicamente agregará nuevas funcionalidades sobre el mismo framework, además de corregir bugs y aumentar la estabilidad y compatibilidad, dará al desarrollador nuevas y valiosas herramientas para incrementar el desarrollo, por ejemplo, se tendrá acceso a nuevos validadores nativos, como es el caso del correo electrónico, en Angular 2 se tiene que hacer uso de expresiones regulares (si es que no se ha puesto un plugin), en cambio en Angular 4 únicamente bastará con poner que el campo es de tipo “mail” para realizar la validación, además de tener soporte nativo para versiones más recientes de Typescript.

Taller de Desarrollo con Javascript

Regístrate en nuestra plataforma en linea para tener acceso completo y gratuito del taller

Registrarme

Taller de desarrollo de Pokedex con Android Studio

Regístrate en nuestra plataforma en linea para tener acceso completo y gratuito del taller

Registrarme