De vez en cuando la mente de un hombre se estira por una nueva idea o sensación, y nunca retrocede a sus dimensiones anteriores: Oliver Wendell Holmes Sr.
Similar es la historia, que se desarrolla cuando hablamos de Angular 1.x Vs Angular 2. Ayer fue Angular 1, hoy 2 y nunca se sabe qué hay a la vuelta de la esquina. – Angular 3, 4 – La lista seguirá creciendo.
La primera pregunta que viene a la mente cuando escuchamos sobre “Angular 2” es que “¿Es la actualización de Angular 1.x”? Mi sugerencia será: mantengamos ambas entidades separadas, ya que existe una gran cantidad de diferencias en: rendimiento, arquitectura, sintaxis y semántica.
- ¿Cuál es la forma correcta de aprender Ruby y Ruby on Rails?
- Cómo editar un código fuente en WordPress
- Cómo prepararse financieramente para un campamento de codificación
- ¿Cuál es el alcance de un desarrollador de Node.js en India?
- ¿Cómo podemos construir una comunidad de desarrolladores (como WordPress ')?
¿Por qué incluso necesitas Angular 1?
Una unidad innovadora de un gigante de TI de Google para mejorar la experiencia de enlace de datos en ambos sentidos y hacer que los datos se muevan dentro de la aplicación de una sola página sin la necesidad específica de ningún código de escucha. Angular 1.X se creó en el marco de código abierto de Java Script basado en tecnología del lado del cliente para mejorar la funcionalidad de HTML, CSS y JavaScript.
Angular 1.x hizo posible gestionar limpiamente el código a través de MVC [Model-View-Controllers] y, por lo tanto, solo necesita segregar el código en su sección designada, asegurando así el acoplamiento suelto para que los cambios puedan rastrearse fácilmente y restringirán a sí mismo dentro de la clase.
Tomó la responsabilidad de la manipulación DOM en él, todo lo que necesita para cuidar son los datos. Por lo tanto, en caso de que esté manipulando una lista o actualizando el estado de un botón, simplemente no es necesario volver a dibujar la lista, siéntese y los cambios en el modelo se reflejarán en la vista.
Las pruebas unitarias son una pesadilla para los desarrolladores, entonces, ¿por qué no confiar en Angular, en el que los desarrolladores aplican un enfoque de desarrollo basado en pruebas sin casi ninguna ayuda del compilador? Eventualmente, el código tendría que ser probado, por lo que siempre es mejor probarlo a medida que codifica y fusionarlo con la pieza ya hecha, esta flexibilidad es útil con Angular 1.x. La inyección de dependencia hace que la cosa parezca sorprendentemente más simple.
Angular 1.x, cuya primera versión entró en funcionamiento en 2009 fue creada teniendo en cuenta el soporte móvil. El lenguaje con su naturaleza de gelificarse bien con HTML, CSS y JavaScript es potente para crear aplicaciones híbridas y aplicaciones web móviles.
Ahora con todos estos beneficios en un paquete, es decir, Angular JS 1.x, lo que obligó a Google a crear algo, que es un marco completamente nuevo y reescrito. ¿Por qué no aumentar la versión inicial y por qué dar un salto tan gigante para recrear todo? ¿Está bien planificado y justificado? ¡Exploremos más en las secciones siguientes!
¿Qué es Angular 2?
Un marco de texto mecanografiado completamente nuevo basado en el concepto de componentes teniendo en cuenta los estándares de componentes web. Al proporcionar más opciones para los idiomas, está allanando el camino para una mejor y más amplia práctica de desarrollo.
Ahora la pregunta es ¿qué hace que Angular 2 esté muy por delante de su hermano menor? Profundicemos en lo que hace que Angular 2 sea mejor que su hermano menor.
Más idiomas admitidos
Puede usar cualquiera de los idiomas de ES5, ES6, Typecript o Dart para escribir código Angular 2. Angular 1.x tiene ES5, ES6 y Dart. El uso de TypeScript es un gran paso, ya que TypeScript es una forma increíble de escribir JavaScript.
TypeScript es una extensión de ECMA Script, de hecho es un súper script de JavaScript.
Mecanografiado = ES6 + Tipos + Anotaciones
“Mobile first World” – Al menos Angular 2 piensa en ello
Utilice una base de código único para la aplicación web y móvil. Solo necesita asociarlo con el script nativo, que nuevamente es un marco de código de script Java de código abierto. Las aplicaciones híbridas siempre se pueden hacer usando Angular 2 con Ionic 2, que se construyó en la parte superior de Cordova. Por lo tanto, Angular 2 le brinda una ventaja aguda al brindarle la flexibilidad de usar la misma base de código estándar web para desarrollar excelentes aplicaciones móviles modernas, que faltaban en el angular 1.x.
El alcance es descifrado
Angular 2 ha dejado atrás el uso de “Scope”, que fue uno de los conceptos centrales de Angular 1.x. Angular 2 usará zone.js para detectar los cambios. Angular2 tiene un mayor rendimiento (al menos 5 veces, e incluso más en algunos casos de esquina) debido al ciclo de actualización reinventado (también conocido como Detección de cambios).
Adiós controladores, bienvenidos “Componentes”!
Entonces, ¿cómo se maneja en el Angular 2? – La respuesta es: los controladores son reemplazados por componentes. La anotación @ clasifica los componentes y agrega los metadatos a la clase.
Adiós a “ng-app”
Angular 1.x tiene dos formas de arrancar angular: usando ‘ng-app’ o administrándolo a través del código.
Angular 2 ha desguazado al primero. Ahora es manejable a través del código.
El cambio es para bien [sintáctico]
Ha habido cambios sintácticos, ya que esto se reescribe por completo, aunque lleva las cosas buenas hacia adelante desde el Angular JS 1.x.
Se ha cambiado la forma en que se declaran las variables en las dos plataformas: se ha eliminado el alcance del Angular 2 y ahora las variables locales se definen utilizando el prefijo hash (#).
Ejemplo: <div * ngFor = ” # cliente en clientes”>
En Angular 2, la sintaxis de las directivas estructurales cambia. ng-repeat se reemplaza con * ngFor.
Angular 2 utiliza la sintaxis de camelCase para directivas integradas . Por ejemplo, ng-class ahora es ngClass y ng-model ahora es ngModel.
La sintaxis de la inyección de dependencia también cambia. Hay muchos más cambios, que podrían resumirse bien escribiendo contenidos separados en.
Uso directo de propiedades y eventos válidos de elementos HTML DOM
Debido a esto, muchas de las directivas incorporadas disponibles en Angular 1.x ya no son necesarias. Como ng-href, ng-src, ng-show y ng-hide. Angular 2 utiliza href, src y propiedades ocultas para obtener la misma salida. Y lo mismo ocurre con las directivas basadas en eventos como ng-click y ng-blur.
Enlace de datos bidireccional mejorado: Pruébelo usted mismo
En Angular 1.x, ng-model se usa para el enlace de datos bidireccional , pero con Angular 2 se reemplaza con [(ngModel)] .
Enlace de datos bidireccional angular 1.x,
En Angular 2,
El enrutador mejorado impulsa a un mejor rendimiento en Angular 2
Angular 2 es casi 5 veces más rápido que su hermano, ya que implementa una técnica de enrutador avanzada. Técnica de enrutamiento avanzada con una detección de cambios basada en un árbol unidireccional a prueba completa.
Angular 2 Router solo cargará componentes cuando los necesite absolutamente y haga que se tenga en cuenta su rendimiento. La configuración de ruta basada en JSON es más fácil de editar.
También ha habido cambios en la sintaxis del enrutador, para lo cual se necesita un blog separado y está en proceso.
[Haga clic para continuar leyendo …]
