¿Qué es Angular? (Parte 1) | Configuración del entorno de desarrollo | Crear nuevo proyecto angular.

Comencemos con ¿Qué es Angular?

Angular es un marco para crear aplicaciones cliente en HTML, CSS y Javascript / Typecript.

TypeScript : es un lenguaje que se compila en Javascript. Typecript es muy común cuando se usa Angular, porque incluso Angular está escrito en Typecript.

¿Por qué necesitamos Angular?

Las aplicaciones complejas son difíciles de mantener en Javascript y Jquery. Necesitamos una forma de estructurar nuestra aplicación. Es por eso que se utilizan estos marcos (Angular, React, etc.).

Beneficios de usar Angular

• Da a nuestra aplicación una estructura limpia: fácil de entender y fácil de mantener
• Incluye mucho código reutilizable
• Hace que nuestra aplicación sea más comprobable

Front-end (cliente) 👇 ← → Back-end (servidor web) 👇

Interfaz de usuario (UI) 👇 ← → Datos + API y procesamiento (lógica de negocios) 👇

(HTML, CSS, TypeScript, JS, Angular) 👇 ← → (Java, Python, Node.js, etc.) 👇

El front-end (cliente) envía / recibe datos hacia / desde el servidor usando API

A plicación P ROGRAMACIÓN I nterface (APIs) / HTTP Servicios

En las API, se puede acceder a los puntos finales mediante el protocolo HTTP (métodos GET y POST)

Los puntos finales son URL para acceder a las API y las solicitudes HTTP obtienen / envían datos desde / hacia el servidor.

Y el papel de Angular está en el front-end que está en el lado del cliente: interfaz de usuario.

Primera aplicación angular

Configurar entorno de desarrollador

1. Instale la versión estable de Node .

N odo : es básicamente un entorno de tiempo de ejecución para ejecutar código Javascript fuera del navegador. En este proyecto, básicamente no usamos Node, pero Node proporciona algunas herramientas que necesitamos para construir un proyecto angular.

Visitar: https://nodejs.org/ para descargar e instalar la versión estable recomendada de Node.

Una vez finalizada la instalación, verifique que la instalación se haya realizado correctamente -> Abra el símbolo del sistema y escriba: nodo - versión para asegurarse de que Node se haya instalado correctamente. (La versión mínima de Node requerida para construir una aplicación angular es la versión 6.9)

node --version

2. Instale una CLI regular .

* Una vez que hemos instalado nodo , entonces podemos utilizar N oda Paquete M anager o NPM para instalar las bibliotecas de terceros. *

Uno de la biblioteca que va a instalamos para este proyecto es un ngular CLI o un ngular C ommand- L ine I Nterface . Es una herramienta de línea de comandos que usamos para crear un nuevo proyecto Angular o generar un código repetitivo para comenzar un nuevo proyecto.

Un ngular CLI : Instalación de CLI angular ... | Abra C ommand P rompt o T erminal e ingrese el siguiente comando:

sudo npm install -g @angular/cli

• Si no ponemos, -gel cli angular se instalará solo en la carpeta actual y no será accesible en ningún otro lugar.
• Poner sudoo abrir 'Símbolo del sistema' como administrador nos pedirá que ingresemos la contraseña del sistema.

ng --version

* Hemos instalado Node, NPM y Angular CLI. Ahora, podemos crear un nuevo Proyecto Angular *

Si no puede poner su entorno en funcionamiento, use el cuadro de comentarios a continuación y publique sus preguntas / errores.

Creando un nuevo proyecto angular

1. Abra la línea de comando y escriba:

sudo ng new hello-world

• Este comando generará un montón de archivos y carpetas (mire en la parte superior de la imagen adjunta 👇 ) y luego usará NPM para descargar bibliotecas de terceros (mire en la parte inferior de la imagen adjunta 👇 ).

Para deshacerse del 'git'error, debe tener que instalar git en su sistema ; use este enlace👇 para descargar e instalar git en su sistema,click here for git → https://git-scm.com/downloads

• Nuestro proyecto se crea con éxito.
• Ahora, para comenzar a codificar, necesitamos un editor de código. El editor que usaremos es V isual S tudio C ode o VS C ode

( VS C ode es un hermoso editor ligero multiplataforma o siéntase libre de usar sublime, atom o cualquier otro editor )

• El proyecto se ve hermoso en VS C ode . 👇👇

Si no te importa aplaudir 👏 ya que ayudó, te lo agradecería mucho :) ¡Ayuda a otros a encontrar el artículo, para que pueda ayudarlos!

Siempre aplaudir ...