Lectores como tú ayudan a apoyar a MUO. Cuando realiza una compra utilizando enlaces en nuestro sitio, podemos ganar una comisión de afiliado.

Angular es un marco JavaScript sólido para crear aplicaciones de una sola página. Google desarrolló el software y lo mantiene junto con colaboradores de todo el mundo.

Al igual que React, puede usar Angular para crear una variedad de aplicaciones front-end, incluidos sistemas web, móviles y de escritorio. Algunas industrias prefieren Angular porque es completo y estable.

Aprendamos más sobre Angular clonando un proyecto de GitHub y ejecutándolo localmente.

Requisitos previos para la clonación

A diferencia de otros marcos, clonar y ejecutar una aplicación Angular es sencillo. Estarás clonando un proyecto de GitHub. Antes de comenzar, asegúrese de cumplir con los siguientes requisitos:

  • Debe tener instalada una versión estable de Node.js. Si no, aprende cómo instalar Nodejs en Ubuntu o instalar Nodejs en Windows.
  • Debería tener Git instalado.
  • Debes tener una cuenta de GitHub.
instagram viewer

1. Instalar el administrador de paquetes de nodos

Administrador de paquetes de nodos (npm) es un repositorio de software para paquetes de JavaScript. npm tiene una CLI (interfaz de línea de comandos) que realiza varias tareas. Puede usar la CLI para descargar, instalar e implementar software.

Cuando instala Node.js, viene con un paquete npm. Para verificar las versiones de su paquete Node.js y npm, ejecute lo siguiente en la terminal:

Para verificar la versión de Node.js instalada, imprima la versión con el siguiente comando:

nodo --versión

Puede verificar la versión de npm usando la misma opción:

npm --versión

2. Instalar CLI angular

Puede usar la CLI de Angular para realizar varias tareas de desarrollo. Las tareas incluyen la generación de aplicaciones, las pruebas y la implementación. Para instalar Angular CLI, ejecute el siguiente comando:

$ npm instalar -g @angular/cli

Para verificar la versión de Angular CLI, ejecute el comando:

$ ng versión

3. Buscar un proyecto en GitHub

Vas a clonar el Giphy-réplica proyecto de GitHub:

Navegue hasta el botón verde etiquetado Código. Haga clic en él para revelar una lista desplegable. Copie el enlace HTTP o SSH. Cualquiera de estos dos servirá.

4. Clonar el proyecto localmente

Primero, cree una carpeta y asígnele el nombre Angular-Clone. Recuerda ir a la carpeta con el siguiente comando:

cd angular-Clon

Luego, ejecute el clonar comando para copiar el proyecto a su carpeta.

git clon https://github.com/Reuben-Kipkemboi/Giphy-Replica.git

Luego, verifique la carpeta Angular-Clone para ver si el clon Giphy-Replica está dentro. Correr ls para mostrar el contenido de la carpeta:

ls

Navegue a la carpeta:

cd Giphy-réplica

En este punto, puede inspeccionar los archivos del proyecto en un editor de código de su elección o verlos a través de la interfaz web de GitHub.

5. Instalar paquetes npm

Debe instalar todos los paquetes y dependencias del proyecto clonado para ejecutarlo. Para instalar los paquetes, ejecute:

npm instalar

Si encuentra algún informe de vulnerabilidad, corríjalo con:

corrección de auditoría npm

6. Abra el proyecto en un navegador

Ahora que tiene todos los requisitos para ejecutar el proyecto, puede ejecutarlo y abrirlo en un navegador. Comience por construir y servir el proyecto:

ng servir

Entonces abre http://localhost: 4200/ en un navegador para ver el proyecto.

Puede usar Angular CLI para abrir automáticamente el proyecto en un navegador:

$ ng servicio -o

Este comando crea la aplicación, inicia el servidor y observa los archivos en busca de actualizaciones.

En su navegador, debería ver el sitio web de Giphy-Replica:

¿Por qué clonar un proyecto angular?

En lugar de comenzar un proyecto desde cero, puede clonar uno desde GitHub. Clonar un proyecto de código abierto y modificarlo para su propio uso ahorra tiempo en comparación con comenzar un proyecto desde cero. También puede contribuir con cualquier cambio útil al proyecto anterior si es relevante.

Votado como el cuarto marco front-end más popular en 2021, Angular continúa sorprendiendo con cada lanzamiento. Viene con excelentes paquetes que admiten el desarrollo de aplicaciones de una sola página. Utilice este excelente marco para crear aplicaciones de clase mundial.