Post Top Ad

Your Ad Spot

martes, 18 de agosto de 2020

Cómo instalar Angular en Ubuntu

Angular es un marco de desarrollo de aplicaciones web front-end de código abierto, está basado en TypeScript y dirigido por el equipo de Angular en Google y por una comunidad de individuos y corporaciones.

En este documento, cubriremos el procedimiento de instalación de angular en el sistema operativo Ubuntu 16.04

Prerrequisitos

Esta guía asume que está utilizando Ubuntu16.04. Antes de comenzar, debe tener una cuenta de usuario con privilegios de instalación y debe tener acceso sin restricciones a todos los sitios web mencionados en este documento.

Audiencia:

Cualquier persona que desee instalar la última versión de nodejs en Ubuntu 16.04 puede consultar este documento.

Requisitos del sistema

  • Ubuntu 16.04
  • 4 GB de RAM
  • 10 GB de espacio libre

Procedimiento de instalación

Para instalar angular cli necesitamos nodejs y npm . Primero, entendamos qué son y por qué los necesitamos.

¿Qué es Nodejs y por qué necesita el desarrollo angular?

Node.js es un entorno de tiempo de ejecución de JavaScript multiplataforma de código abierto que ejecuta código JavaScript fuera de un navegador. Node.js permite a los desarrolladores usar JavaScript para desarrollar una amplia variedad de aplicaciones como aplicaciones de red, herramientas de línea de comandos, api web, aplicaciones web. Necesita nodejs para las herramientas de desarrollo (como un servidor web local con funciones de recarga en vivo) y experiencia de desarrollo, no necesita nodejs para ejecutar React en producción.

¿Qué es npm y por qué necesita el desarrollo angular?

Npm significa administrador de paquetes de nodos, es una herramienta de administración de dependencias para aplicaciones javascript. Esta herramienta ayudará a instalar las bibliotecas y otras herramientas para apoyar el desarrollo angular.

Comencemos con la finalización de la instalación de nodejs en nodejs, instalaremos angular cli y crearemos un nuevo proyecto angular

1.Instalar nodejs - Configurar PPA

  • Para obtener una versión más reciente de Node.js instalada en ubuntu es agregar un PPA (archivo de paquete personal) mantenido por NodeSource. Abra el terminal y ejecute los siguientes comandos
cd ~
curl -sL https://deb.nodesource.com/setup_10.x -o nodesource_setup.sh
  • Ejecute el script descargado usando el siguiente comando
sudo bash nodesource_setup.sh
El PPA se agregará a su configuración y su caché de paquetes local se actualizará automáticamente

2.Instalar

  • Ejecute sudo apt-get install nodejs -y para instalar

3.Probar la instalación de nodejs

  • En la terminal, ejecute debajo del comando para probar el nodo
nodo -v
Debería ver un resultado como el siguiente (Nota: su versión puede variar según la fecha de instalación, ya que el equipo de nodejs realiza una versión agresiva, pero asegúrese de que la versión de su nodo sea> v10.0.0)
  • En la terminal, ejecute el comando debajo para probar npm
npm -v
Debería ver un resultado como el siguiente (Nota: su versión puede variar según la fecha de instalación, ya que el equipo de nodejs realiza un lanzamiento agresivo, pero asegúrese de que su versión de npm sea> 5)

Instalar cli angular

La configuración de un entorno de desarrollo angular productivo necesitaría configurar herramientas como mecanografiado, paquete web y otras dependencias angulares que son complejas de configurar para un novato en el mundo angular. Hay varias herramientas que ayudan a aliviar este problema, de las cuales el cli angular es la herramienta más sencilla y fina con configuraciones de grado de producción prefabricadas. Angular cli viene con una amplia gama de comandos que ayudan a administrar el proceso de desarrollo, prueba y construcción angular
Instalaremos angular cli usando npm. En la terminal, ejecute el comando de instalación que se muestra a continuación
npm install -g @ angular / cli
En una instalación exitosa, debería ver el resultado como el anterior (tenga en cuenta que su versión angular / cli puede ser diferente cuando ejecute este comando de instalación)

Prueba @ angular / cli

Para probar el comando @ angular / cli run ng version
Felicitaciones, ha instalado con éxito @ angular / cli

Ejecutando la primera aplicación Hello World

  1. Cree una aplicación angular usando ng new command como se muestra a continuación
Este comando crea una nueva carpeta llamada hello-angular y crea todos los archivos y configura las bibliotecas necesarias dentro de esta carpeta y hace que el proyecto angular esté listo para ejecutarse sin ninguna configuración adicional
2.Una vez que se crea el proyecto, cambie al directorio del proyecto y ejecute la aplicación usando el comando ng serve como se muestra a continuación
El comando ng serve -o inicia el servidor de desarrollo de paquetes web que, a su vez, realiza todo el proceso de compilación y abre una ventana del navegador y carga la URL de la aplicación que se ejecuta en  http: // localhost: 4200 de forma predeterminada.
En una ejecución exitosa, debería ver el siguiente resultado en el navegador
Como se discutió, angular cli viene con excelentes herramientas, una de las características productivas es la recarga en caliente del paquete web, que implementa el cambio en vivo y ahorra mucho tiempo al desarrollador para volver a implementar y recargar el trabajo.
Abramos el proyecto y hagamos algunos cambios para ver la experiencia de esta gran función. Repasaremos la estructura del proyecto para comprender la importancia de los archivos y carpetas creados.
Abra el proyecto que se creó en el paso anterior en cualquier editor JS, aquí verá que el proyecto está abierto en el editor vscode. A la izquierda, en la sección del explorador, verá el explorador de archivos que le muestra varias carpetas y archivos que se crearon con el nuevo comando ng. Vamos a recorrerlos
e2e:  esta carpeta contiene código fuente y de configuración de prueba de extremo a extremo. Si desea escribir un código de automatización de pruebas de extremo a extremo, sus esfuerzos van a esta carpeta
node_modules:  esta carpeta es administrada por el administrador de paquetes (npm) y contiene todas las dependencias de la biblioteca del proyecto. Los archivos de esta carpeta no deben modificarse, ya que no se garantiza que los cambios realizados sean seguros, ya que la actualización / instalación de cualquier otra biblioteca puede sobrescribir los cambios realizados.
src:  esta es la carpeta que contiene todo su esfuerzo de desarrollo. Como desarrollador angular, pasó mucho tiempo en esta carpeta creando módulos, componentes, servicios, directivas, etc.
Otros archivos que están fuera de la carpeta src y archivos de configuración para angular cli, editor, mecanografiado, linting y npm
Ahora vayamos a la carpeta src. Dentro de esta carpeta hay varias otras carpetas como
aplicación  : esta carpeta contiene todo su código fuente, y este es el lugar donde va todo su esfuerzo de desarrollo
activos  : contiene los culos estáticos para que les gusten las imágenes, etc.
entornos  : contiene el archivo de configuración por entorno que contiene la configuración que se utilizará para los entornos de desarrollo / prueba y de producción
Otros archivos son archivos de configuración y ajustes.
Todos los archivos main.ts es el archivo inicial y la ejecución del código del proyecto comienza desde este archivo.
Hagamos un cambio de código en AppComponent, abra app.component.html y hagamos los cambios como se muestra en el siguiente código 
Guarde el archivo y vuelva al navegador para ver los cambios implementados y cargados como se discutió, esta es una de las características de la configuración de herramientas de cli angular.  
Con los nuevos cambios, la ventana de su navegador debería verse como a continuación
Felicidades !! Has configurado un proyecto angular

Desinstalar angular cli

  • En el símbolo del sistema, ejecute npm uninstall -g @ angular / cli

Desinstalar nodejs

  • En la terminal, ejecute debajo del comando para desinstalar el nodo
sudo apt eliminar nodejs


Ejecutando la primera aplicación Hello World

  • Abra cualquier editor de texto y escriba el siguiente código 
console.log ("¡¡Hola, nodo mundial !!")
  • Guarde el archivo como helloworld.js
  • Abra el símbolo del sistema y navegue a la carpeta donde guarda helloworld.js y ejecute el siguiente comando
nodo helloworld.js

Cómo funciona

La línea de comando del nodo con el nombre del archivo como argumento cargará, leerá, compilará y ejecutará las instrucciones del archivo y las ejecutará. Dado que tenemos una línea de código JS que imprime el texto "Hello World Node" en la consola dentro del archivo helloworld.js, verá el resultado como se muestra en la captura de pantalla anterior.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas