Introducción


Angular ha lanzado su última versión, Angular 7.0.

Angular Empezando con Angular 7

En este artículo, exploraremos los siguientes puntos:

  • Novedades de Angular 7.0.
  • Creando su primera aplicación Angular 7.0 usando el CLI Angular.
  • Cómo actualizar aplicaciones Angular existentes a Angular 7.0.
  • Novedades de Angular 7.0
Angular Empezando con Angular 7


Al crear una nueva aplicación Angular, el CLI Angular le pedirá al usuario que seleccione si desea agregar funciones como el enrutamiento Angular o el formato de las hojas de estilo que desea utilizar en su aplicación.

Angular Empezando con Angular 7

Las aplicaciones Angular 7.0 utilizarán la función de presupuesto de paquetes de la CLI Angular para advertir a los desarrolladores si el tamaño del paquete de aplicaciones excede el límite predefinido.

El valor predeterminado para la advertencia es de 2 MB y para el error es de 5 MB. Este valor es configurable y se puede cambiar desde el archivo angular.json. Esta característica mejora considerablemente el rendimiento de la aplicación.

Component Dev Kit (CDK)

El Component Dev Kit (CDK) de Material Angular también recibe algunas nuevas características como parte de esta actualización. Las dos nuevas características añadidas de CDK se mencionan a continuación:

  1. Desplazamiento virtual.
    Si está intentando cargar una gran lista de elementos, esto puede afectar al rendimiento de la aplicación. Se puede utilizar para cargar sólo la parte visible de la lista en la pantalla. Sólo se mostrarán los elementos que pueden caber en la pantalla. Cuando el usuario se desplaza por la lista, el DOM cargará y descargará los elementos dinámicamente en función del tamaño de la pantalla. Esta característica no debe confundirse con el desplazamiento infinito, que es una estrategia totalmente diferente para cargar elementos. Puede leer más sobre el desplazamiento virtual aquí.
  2. Arrastrar y soltar.
    Podemos añadir fácilmente una función de arrastrar y soltar a un elemento. Soporta características como arrastrar libremente un elemento, reordenar elementos de una lista, mover elementos entre listas, animación, añadir un control de arrastre personalizado y arrastrar restringido a lo largo del eje X o Y.

El campo mat-form-field ahora soportará el uso del elemento de selección nativo. Esto mejorará el rendimiento y la usabilidad de la aplicación. Lea más sobre esta característica aquí.
Angular 7.0 ha actualizado sus dependencias para soportar TypeScript 3.1, RxJS 6.3 y Node 10.

Creando nuestra primera APP

Procederemos a crear nuestra primera aplicación de Angular 7.

Angular Empezando con Angular 7

Requisitos previos:

Instale la última versión de Node.js desde aquí.
Instala Visual Studio Code desde aquí.
La instalación de Node.js también instalará npm en su máquina. Después de instalar Node.js, abra la línea de comandos y ejecute el siguiente conjunto de comandos para comprobar la versión del nodo y npm instalados en su equipo.

Angular Empezando con Angular 7

Instalación de la CLI angular

La CLI angular es la interfaz de línea de comandos para Angular. Nos ayuda a inicializar, desarrollar y mantener aplicaciones Angular fácilmente.

Para instalar Angular CLI, ejecute el siguiente comando en la ventana de comandos:

npm i -g @angular/cli


Esto instalará Angular CLI 7.0 globalmente en su máquina.

Para comprobar la versión de CLI angular instalada en su máquina, ejecute el siguiente comando:

ng versión

Angular Empezando con Angular 7

Crear una aplicación en Angular 7

Abrimos Visual Code

Abra Visual Studio Code y navegue hasta Ver >> Terminal. Esto abrirá la ventana de la terminal de código VS. Alternativamente, también puede utilizar el atajo de teclado ctrl+` para abrir la ventana del terminal.

Escriba la siguiente secuencia de comandos en la ventana del terminal.

Angular Empezando con Angular 7

Estos comandos crearán un directorio con el nombre «PrimeraApp» y luego crearán una aplicación Angular con el nombre «PrimeraApp» dentro de ese directorio.

La CLI de Angular

Al ejecutar el nuevo comando, el CLI angular le pedirá que seleccione las dos opciones siguientes:

¿Desea añadir el enrolamiento de angular? (SÍ/NO)
¿Qué formato de hoja de estilo le gustaría utilizar?
Una vez que seleccione las opciones y presione enter, se creará la aplicación Angular 7.0.

Angular Empezando con Angular 7

Una vez que la creación de la aplicación es exitosa, ejecute el siguiente comando para abrir el proyecto.

cd PrimeraApp

Arrancamos Visual Code

Esto abrirá el archivo de código de nuestra aplicación en una nueva ventana de Código VS.

code .

Angular Empezando con Angular 7

Puede ver la siguiente estructura de archivos en el Explorador de soluciones.

Angular Empezando con Angular 7

Abra el archivo package.json y podrá observar que tenemos los últimos paquetes de Angular 7.0.0.0 instalados en nuestro proyecto.

Angular Empezando con Angular 7

Ejecutar la aplicación demo

El nombre de nuestra aplicación Angular es primeraApp que está dentro del directorio PrimeraAppDemo.

Por lo tanto, primero navegaremos a nuestra aplicación usando los siguientes comandos.

cd PrimeraApp

Recuerda que puedes utilizar el terminar de Visual Code para realizar todas tareas en la terminal

Angular Empezando con Angular 7

Ahora, usamos el siguiente comando para iniciar el servidor web.

ng serve –open

Angular Empezando con Angular 7

Esto nos arrancará ele servidor de Angular con la aplicación demo. Al usar el comando $ –open nos abrirá una ventana dell navegador.

Angular Empezando con Angular 7

Mostrando la siguiente web en el puerto http://localhost:4200

Angular Empezando con Angular 7

Ya tenemos nuestra aplicación funcionando!!!!!.

Para parar el servidor solo hace falta teclear CRTL + C.

Puedes seguir nuestros últimos artículos en nuestro blog.

Conclusión

Gracias a Angular podemos tener un entorno de trabajo muy versátil a la hora de desarrollar Aplicaciones con una buena base en JS. Este framework nos permite trabajar de una manera productiva desde el principio y, gracias a Visual Code, podemos trabajar con editor completamente adaptado a este framework, aspecto que nos ayuda mucho en el desarrollo de este tipo de aplicaciones.

Concretaremos más sobre Angular 7 en siguientes posts.

Reader Interactions

Deja un comentario

Tu dirección de correo electrónico no será publicada.

About David Moya

Apasionado de la Seguridad Informática, aprendiendo en todo momento y profundizando en el mundo web y en el posicionamiento en buscadores.

Share This