Angular esencial

Diferencias entre AngularJS y Angular 4

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Posiblemente conozcas a Angular desde su primera versión llamada AngularJS. Esta fue una de las versiones más populares, principalmente porque estuvo varios años en uso y muchos desarrolladores dieron sus primeros pasos con ella. Ahora vamos a compararla con Angular 4 para explorar sus principales diferencias y similitudes.
08:33

Transcripción

En esta lección, vamos a hablar sobre las diferencias entre AngularJS y Angular 4. Si has trabajado y tienes experiencia con la primera versión de Angular llamada AngularJS, es importante que te familiarices con las diferencias entre esta última versión llamada Angular 4. Una de las principales diferencias y tal vez la que más impacta a las personas que estan acostumbradas a trabajar con AngularJS es la sintaxis. La mayoría de los elementos con los que nosotros inyectábamos información han cambiado, sin embargo, los conceptos básicos permanecen. Veamos ahora un ejemplo de código. Vemos acá que en el primer bloque incluye un código que dice'ng-click', igual, método. Acá yo estoy definiendo que cuando el usuario haga clic sobre, en este caso, este'div', se active un método que se debe encontrar dentro del controlador de esta aplicación. Al lado tenemos el código en la versión de Angular 4. Acá podemos ver que se está incluyendo el mismo concepto y estamos incluyendo acá una propiedad dentro de HTML, pero ahora estamos definiendo el clic diferente. En caso de Angular, todos los eventos se van a incluir a través de una sintaxis de paréntesis. Fuera de eso, es exactamente igual y estoy llamando a un método. Sin embargo, ahora en vez de llamarlo dentro de un controlador, lo estoy llamando dentro de un componente. Veamos ahora otro ejemplo. Otra de las directivas que más utilizaba dentro de AngularJS era'ng-repeat', que nos permitía a nosotros generar una iteración a partir de una colección de datos. Acá estoy utilizando'ng-repeat'es igual a, y defino acá 'item in collection'. Así estoy definiendo que aparezca un ítem de acuerdo a cada uno de los elementos que se encuentre en una colección de datos. Al lado tengo la información en el formato de Angular 4. Es exactamente la misma información y podemos trabajar incluso con el mismo código. La diferencia está en que estamos utilizando un atributo diferente y en vez de utilizar'ng-repeat', en este caso lo reemplazamos por'ngFor'. Quiero que notes que también ahora estoy utilizando un asterisco que me permite a mí modificar la información que se encuentra dentro de la plantilla. Como puedes ver acá, estoy trabajando básicamente con la misma información pero ahora estoy trabajando primero con un componente que es mucho más sencillo de entender, también que va a ser reemplazado dentro de la plantilla de una forma más eficiente, y finalmente estoy trabajando con el componente'let' que está incluido dentro de ECMAScript para poder trabajar con un JavaScript un poco más moderno. Otro elemento que cambia mucho dentro de Angular 4 son los componentes. En Angular 4 se eliminaron por completo el concepto de los controladores. Si estás acostumbrado a trabajar en AngularJS, posiblemente ya estás familiarizado con el concepto del controlador con su plantilla. En AngularJS teníamos un controlador, el cual podemos incluir de diferentes formas dentro del HTM. Podía ser en la forma de atributo o en forma de etiqueta y lo podíamos relacionar con la plantilla. Ahora, el controlador trabajaba dentro de una plantilla y podíamos tener diferentes controladores trabajando en una plantilla. En el caso de Angular 4, nosotros trabajamos con un componente. El componente es ligeramente distinto aunque filosóficamente similar al controlador. La diferencia es que el componente primero va a trabajar encapsulado, tiene un nivel de encapsulamiento mayor que el controlador. Podemos trabajar un solo componente dentro de una aplicación y también podemos trabajar componentes embebidos, lo que significa que una plantilla va a estar relaciona únicamente con un componente y cada vez que nosotros incluyamos componentes adicionales dentro de otros, estos componentes van a estar encapsulados. Así que va a ser diferente la forma en que trabajan entre sí. Otra cosa es que el componente puede tener plantillas internas o externas. Podemos incluir directamente el código, lo cual a mí no me parece una buena práctica, pero podemos también incluir las plantillas dentro de un código externo. En el caso de los proyectos que se generan dentro de la línea de comandos de Angular, nosotros vamos a tener una plantilla separada que nos va a permitir a nosotros trabajar de forma más modular nuestros componentes. Esto me lleva precisamente a un punto que es la línea de comandos de Angular que es la que genera realmente los proyectos y con la que vamos a trabajar en este curso. La línea de comandos de Angular o Angular CLI es una de las herramientas más interesantes y más importantes que se agrega dentro del proyecto de Angular. Posiblemente estés familiarizado trabajando con la línea de comandos con algunos proyectos dentro del mundo de Angular, pero no eran proyectos directamente oficiales, sino eran parte del núcleo central de Angular. En caso de Angular 4, a partir de Angular 2, también se trabaja con una línea de comandos directamente relacionada con el proyecto, la cual puedes encontrar dentro de la dirección 'cli. angular. io'. En este caso, la consola nos va a permitir a nosotros trabajar prácticamente todos los elementos de una aplicación y también generarla. Acá tengo un ejemplo de cómo funcionaría la sintaxis de la línea comandos. Podemos utilizar un comando llamado'ng' que es el que nos va a servir a nosotros para llamar todas las diferentes partes de la línea de comandos y podemos crear una nueva aplicación con solo una línea incluyendo'new nueva-aplicación'. Esto va a generar una nueva aplicación con ese nombre. También puedo generar diferentes elementos y prácticamente la mayoría de los elementos que componen una aplicación Angular. En este caso, utilizando el comando'generate component'puedo generar un componente. Y finalmente podemos utilizar el comando'ng serve' para servir mi aplicación y trabajar en ella como si estuviera en un servidor local. Esto me va a servir a mí para realizar el proceso de depuración de mi aplicación. También tenemos otro cambio importante y es que en Angular, a partir de la versión 2 y en especial en la versión 4, trabajamos con TypeScript. En Angular 4 trabajamos específicamente con TypeScript 2 en adelante. Esto significa que no vamos a trabajar directamente con JavaScript. Si bien es cierto que TypeScript es una versión de JavaScript mejorada, donde se incluyen elementos adicionales, vamos a trabajar con la extensión de archivos'. ts'. Esto significa también que vamos a tener un código mucho más robusto, que va a ser un código de mucha mejor calidad orientado hacia las buenas prácticas. Personalmente, considero que el avance de utilizar desde JavaScript a TypeScript es bastante notable y hace que la forma de trabajar nuestras aplicaciones en Angular sea mucho más robusta y mucho más profesional. Te recomiendo que, en caso de que te interese profundizar más sobre Angular, investigues un poco sobre la sintaxis de TypeScript. Es bastante sencilla y es muy similar a la de JavaScript. Básicamente, se agregan algunos elementos extra que nos van a permitir a nosotros trabajar una aplicación más robusta. Finalmente, tenemos el concepto del ciclo de desarrollo de Angular, una de las diferencias fundamentales que va a tener con respecto a la primera versión de Angular. La primera versión de Angular no tenía un punto definido para crear una nueva versión. De hecho, estuvo bastantes años con esa primera versión de Angular. Luego tuvimos Angular 2, que duró bastante poco, y llego una nueva versión de Angular. El ciclo de desarrollo a partir de ahora en Angular va a ser de seis meses, en el cual nosotros cada seis meses vamos a tener una nueva versión de Angular, la cual no va a ser fundamentalmente distinta. Y generalmente, y ese es el concepto que se espera mantener, va a ser compatible con la versión anterior. Actualmente estamos trabajando en la versión 4 de Angular que es retrocompatible con la versión 2. Seis meses después, va a salir la versión 5 de Angular, que va a ser retrocompatible con la versión 4 y muy posiblemente con la mayoría de elementos de la versión 2. Simplemente vamos a ir avanzando y así vamos a tener una versión esperable, predeterminada de Angular cada seis meses. Vamos a poder saber que es momento de actualizar la información relacionada con Angular. Es importante también mencionar que a partir de ahora y gracias a este nuevo ciclo de desarrollo dejamos de asignarle el nombre. En algunos casos, dentro de este curso, vamos a mencionar que es Angular 4 simplemente para notar que hay una diferencia entre las versiones anteriores de Angular, pero la forma deseable que debes mencionar a partir de ahora y que debes referirte sobre Angular es únicamente eso, Angular, sin incluir el nombre, porque cada seis meses vamos a estarlo modificando. Y para evitar que los usuarios se confundan, vamos a utilizar únicamente el nombre Angular.

Angular esencial

Aprende a crear aplicaciones con Angular y avanza poco a poco en su uso, empezando por la instalación, configuración y arquitectura hasta la publicación final de una aplicación.

4:27 horas (35 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:29/06/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.