Angular es uno de los frameworks JavaScript más populares creado y desarrollado por Google. En los últimos años, ReactJS ha ganado mucho interés y se ha convertido en la biblioteca JS moderna más popular de la industria. Pero esto no significa que Angular ya no sea importante.

Por el contrario, Angular es el segundo framework más popular después de React según Google Trends (mundial):

Como desarrollador front-end, he trabajado con Angular. Ahora me gustaría cubrir algunas características importantes de Angular en mis próximos artículos:

Parte 1: Cómo instalar su primera aplicación con Angular CLI (actualmente está aquí)
Parte 2: Componentes angulares e interpolación de cadenas
Parte 3 : Directivas y tuberías angulares
Parte 4: Enlace de datos unidireccional en Angular
Parte 5: Enlace de datos bidireccional angular con ngModel

En la primera parte de mi serie Angular para principiantes, aprenderá qué es Angular & Angular CLI y cómo instalar su primera aplicación Angular usando el CLI.

Prerrequisitos

Antes de comenzar a aprender Angular, le recomiendo que se familiarice con los siguientes idiomas si aún no lo está:

HTML, CSS
JavaScript / ES6
Mecanografiado

Si lo prefiere, puede ver el video tutorial a continuación:

¿Qué es Angular?

Angular es un marco de JavaScript desarrollado y mantenido por Google para crear aplicaciones front-end. Permítanme comenzar primero a explicar qué es un marco ...

¿Qué es un marco?

Un Framework es un paquete completo con sus propias funcionalidades y bibliotecas. Un Framework tiene sus propias reglas, no tienes mucha flexibilidad y el proyecto depende del Framework que uses. Angular es un ejemplo de marco.

Angular se lanzó en 2016, pero antes de Angular, estaba AngularJS. Una de las preguntas más frecuentes sobre Angular es ¿cuál es la diferencia entre AngularJS y Angular?

AngularJS vs Angular

Estas 2 versiones de Angular confunden a muchos desarrolladores. AngularJS y Angular son marcos completamente diferentes. Las versiones angulares (como 1, 1.2, 1.5, etc.) se denominan Angular JS y a partir de la versión 2 y superior se llama Angular.

Angular JS → versiones desde 1.x
Angular → versión 2 y superior

Entonces, la versión 2 de Angular es una reescritura completa del marco AngularJS y las versiones más nuevas (como 4,5,6, etc.) son cambios menores de la versión 2 de Angular.

En esta serie de artículos, aprenderá Angular 2+.

¿Qué es Angular CLI?

CLI son las siglas de Command Line Interface. Angular tiene su propia CLI oficial que nos ayuda con muchas cosas durante el proceso de desarrollo.

Angular CLI se utiliza para automatizar operaciones en proyectos Angular en lugar de hacerlo manualmente. CLI nos apoya, desarrolladores, en un proyecto Angular de principio a fin.

Por ejemplo, Angular CLI se puede utilizar para:

Configuraciones, configuración del entorno
Construcción de componentes, servicios, sistema de enrutamiento
Iniciar, probar y desplegar el proyecto
Instalación de bibliotecas de terceros (como Bootstrap, Sass, etc.)

y mucho más. Ahora veamos cómo instalar nuestra primera aplicación angular usando la CLI paso a paso.

Paso 1: Instale NPM (Administrador de paquetes de nodo)

En primer lugar, vamos a necesitar Node js. NPM (administrador de paquetes de nodos, es parte de node js) es una herramienta para instalar bibliotecas y dependencias de terceros en nuestro proyecto. Si aún no lo tiene, puede descargarlo e instalarlo desde aquí. También lo he explicado paso a paso en el video tutorial.

Paso 2: Instale Angular CLI

Si tiene el nodo js instalado, el siguiente paso es instalar la CLI de Angular en su computadora:

npm install -g @angular/cli

g significa instalación global . Si usa -g más tarde, puede usar la CLI en cualquier proyecto Angular en su computadora.

Consejo : escriba ng ven su interfaz de línea de comandos (o terminal) para verificar su versión angular.

Paso 3: crea un nuevo proyecto angular

Una vez completada la instalación, puede usar Angular CLI para crear un nuevo proyecto Angular con el siguiente comando:

ng new my-first-app

Este comando crea un nuevo proyecto Angular (llamado my-first-app, puede usar cualquier nombre) con todas las dependencias y archivos necesarios. No tiene que preocuparse por nada porque la CLI lo hace automáticamente por usted.

Paso 4: ejecutar la aplicación

Después de instalar la CLI y crear una nueva aplicación Angular, el paso final es iniciar el proyecto. Para hacer eso, necesitamos usar el siguiente comando:

ng serve -- open

La bandera "abrir" abre la ventana de su navegador local automáticamente.

Angular admite el servidor en vivo , por lo que puede ver los cambios en su local sin actualizar la página de su navegador. Para más detalles y actualizaciones, consulte también la documentación oficial.

Conclusión

Entonces, en la primera parte, hicimos una introducción a Angular, qué es CLI y cómo instalar su primera aplicación Angular. En la segunda publicación, aprenderá sobre componentes angulares e interpolación de cadenas. Manténganse al tanto :)

Si desea obtener más información sobre el desarrollo web, ¡no dude en seguirme en Youtube !

¡Gracias por leer!