Leitores como você ajudam a apoiar o MUO. Quando você faz uma compra usando links em nosso site, podemos ganhar uma comissão de afiliado.

Angular é uma estrutura JavaScript robusta para criar aplicativos de página única. O Google desenvolveu o software e o mantém ao lado de colaboradores em todo o mundo.

Assim como o React, você pode usar o Angular para criar uma variedade de aplicativos front-end, incluindo sistemas web, móveis e de desktop. Algumas indústrias preferem Angular porque é abrangente e estável.

Vamos aprender mais sobre o Angular clonando um projeto do GitHub e executando-o localmente.

Pré-requisitos para clonagem

Ao contrário de outras estruturas, clonar e executar um aplicativo Angular é simples. Você estará clonando um projeto do GitHub. Antes de começar, certifique-se de atender aos seguintes requisitos:

  • Você deve ter uma versão estável do Node.js instalada. Se não, aprenda como instalar o Nodejs no Ubuntu ou instalar Nodejs no Windows.
  • Você deve ter Git instalado.
  • Você deve ter uma conta GitHub.

1. Instale o gerenciador de pacotes do nó

Gerenciador de pacotes de nós (npm) é um repositório de software para pacotes JavaScript. O npm possui uma CLI (Command Line Interface) que executa várias tarefas. Você pode usar a CLI para baixar, instalar e implantar software.

Quando você instala o Node.js, ele vem com um pacote npm. Para verificar as versões do pacote Node.js e npm, execute o seguinte no terminal:

Para verificar a versão do Node.js instalada, imprima a versão com o seguinte comando:

nó --versão

Você pode verificar a versão do npm usando a mesma opção:

npm --versão

2. Instalar Angular CLI

Você pode usar o Angular CLI para executar várias tarefas de desenvolvimento. As tarefas incluem geração de aplicativos, teste e implantação. Para instalar o Angular CLI, execute o seguinte comando:

$ npm install -g @angular/cli

Para verificar a versão do Angular CLI, execute o comando:

$ ng versão

3. Encontre um projeto no GitHub

Você vai clonar o Giphy-Réplica projeto do GitHub:

Navegue até o botão verde rotulado Código. Clique nele para revelar uma lista suspensa. Copie o link HTTP ou SSH. Qualquer um desses dois serve.

4. Clone o projeto localmente

Primeiro, crie uma pasta e nomeie-a Angular-Clone. Lembre-se de ir para a pasta com o seguinte comando:

cd Angular-Clone

Em seguida, execute o git clone comando para copiar o projeto para sua pasta.

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

Em seguida, verifique a pasta Angular-Clone para ver se o clone Giphy-Replica está dentro. Correr ls para exibir o conteúdo da pasta:

ls

Navegue até a pasta:

cd Giphy-Réplica

Neste ponto, você pode inspecionar os arquivos do projeto em um editor de código de sua escolha ou visualizá-los por meio da interface da Web do GitHub.

5. Instalar pacotes npm

Você precisa instalar todos os pacotes e dependências do projeto clonado para executá-lo. Para instalar os pacotes execute:

npm instalar

Se você encontrar algum relatório de vulnerabilidade, corrija-o com:

correção de auditoria npm

6. Abra o projeto em um navegador

Agora que você tem todos os requisitos para executar o projeto, pode executá-lo e abri-lo em um navegador. Comece construindo e servindo o projeto:

ng servir

Em seguida, abra http://localhost: 4200/ em um navegador para visualizar o projeto.

Você pode usar o Angular CLI para abrir automaticamente o projeto em um navegador:

$ ng serve -o

Esse comando cria o aplicativo, inicia o servidor e verifica se há atualizações nos arquivos.

No seu navegador, você deve ver o site Giphy-Replica:

Por que clonar um projeto angular?

Em vez de iniciar um projeto do zero, você pode clonar um do GitHub. Clonar um projeto de código aberto e modificá-lo para seu próprio uso economiza tempo ao iniciar um projeto do zero. Você também pode contribuir com quaisquer alterações úteis de volta ao projeto upstream, se relevante.

Votado como o quarto framework front-end mais popular em 2021, o Angular continua a surpreender a cada lançamento. Ele vem com ótimos pacotes que suportam o desenvolvimento de aplicativos de página única. Use esta excelente estrutura para criar aplicativos de classe mundial.