Como executar o projeto Angular [Explicação passo a passo]

AngularJS é um must-have para qualquer desenvolvedor full-stack. É crucial para o desenvolvimento front-end, pois simplifica o uso de diretivas HTML. Desenvolver um aplicativo da web fica muito mais fácil quando você usa o Angular. Portanto, neste artigo, discutiremos como você pode começar a usar o Angular. Discutiremos como instalar o Angular e como executar um projeto Angular.

CLI Angular: Uma Breve Introdução

Se você deseja trabalhar em projetos Angular, deve ter o Angular CLI. É a ferramenta oficial do Angular para trabalhar em projetos Angular e inicializá-los. Angular CLI reduz muitos aborrecimentos do processo de inicialização. Você não precisa executar várias configurações e criar ferramentas para iniciar um projeto se estiver usando o Angular CLI.

Angular CLI permite iniciar um projeto com apenas um comando. Com outro comando, você pode servir o projeto usando um servidor de desenvolvimento local. A CLI Angular funciona em Node.js. Portanto, para executar o Angular CLI em seu sistema, você deve primeiro ter o Node.js em seu sistema.

O Node.js é para servidores e para desenvolver aplicativos do lado do servidor, enquanto o Angular é uma solução de front-end. O Node.js ajuda você apenas com Angular CLI.

Como instalar o angular?

Primeiro passo

Antes de instalar o Angular em seu sistema, você deve ter Node e npm em seu sistema. Você pode usar o Node Version Manager para instalá-lo ou pode usar o gerenciador de pacotes oficial do seu sistema operacional. Você também tem a opção de instalar o Node em seu site. Recomendamos instalá-lo a partir do site, pois é rápido e direto. Você só precisa ir para a página de download do node.js .

Segundo passo

Quando estiver na página de download do node.js, selecione a versão necessária de acordo com seu sistema operacional e siga as etapas especificadas no assistente de instalação. Se você já instalou o node.js em seu sistema antes, pode pular esta etapa (e a anterior).

Terceiro passo:

Para verificar se o Node está instalado no seu dispositivo ou não, abra o prompt de comando e execute o seguinte comando:

$ nó -v

Ele mostraria a versão atualmente instalada do Node em seu sistema.

Terceiro passo

Depois de verificar se você tem o Node instalado em seu sistema, você pode instalar o Angular em seu dispositivo executando o seguinte comando do prompt de comando:

$ npm instalar @angular/cli

Depois de executar o comando acima, o Angular CLI será instalado no seu dispositivo. Você concluiu a parte 'como instalar o Angular'.

Aprenda: Salário de desenvolvedor angular na Índia: para calouros e experientes

Como executar o projeto angular?

Como instalamos o Angular em nosso sistema, agora nos concentramos em iniciar um novo projeto.

Primeiro passo

Criaríamos um espaço de trabalho e o aplicativo inicial executando o seguinte comando:

ng novo angular-tour-of-heroes

Adicionamos angular-tour-of-heroes como o nome do nosso espaço de trabalho. O comando 'ng new' perguntará sobre os recursos que você deseja adicionar no aplicativo inicial. Como é um tutorial, vamos selecionar os padrões e prosseguir pressionando Return ou Enter.

Segundo passo

Agora, o Angular CLI instalou os pacotes e dependências npm necessários. Você teria um 'aplicativo de boas-vindas' pronto para usar e um novo espaço de trabalho. Você também teria uma pasta raiz com o mesmo nome do aplicativo (angular-tour-of-heroes) e um projeto de aplicativo esqueleto.

Nesta etapa, temos que servir a aplicação. Faremos isso indo para o diretório do workspace e iniciando o aplicativo:

cd angular-tour-of-heroes

ng servir –abrir

O comando 'ng serve' criaria o aplicativo, iniciaria o servidor de desenvolvimento, cuidaria dos arquivos de origem do seu projeto e reconstruiria seu aplicativo à medida que você modifica os arquivos necessários.

Terceiro passo

Se você quiser modificar o aplicativo, terá que ir para a pasta src/app em seu IDE ou editor. Editaremos nosso aplicativo alterando os componentes deste projeto. Os componentes são os blocos de construção dos aplicativos Angular. Eles lidam com quase todas as funções fundamentais de um projeto Angular, como mostrar dados, responder a entradas, etc.

Nesta etapa, abra seu IDE e vá para o diretório do projeto e encontre os arquivos componentes do seu projeto:

• app.component.ts
• app.component.html
• app.component.css

O primeiro arquivo é o código da classe e é baseado em TypeScript, o segundo arquivo é o template em HTML e o último tem os estilos CSS privados.

Quarto Passo

Nosso projeto está configurado e temos todos os arquivos prontos. Nesta etapa, vamos personalizá-lo adicionando um título a ele. Para alterar o título do seu projeto Angular, acesse o arquivo app.component.ts e exclua o modelo padrão presente. Angular CLI gera um modelo de geração automaticamente. Você pode substituí-lo pelo seguinte:

<h1>{{seu título}}</h1>

As chaves são a sintaxe de ligação de interpolação. Você pode substituir 'seu título' pelo título desejado. Depois de inserir o título desejado, atualize o navegador e seu aplicativo terá o novo título.

Quinto Passo

A personalização do aplicativo seria incompleta sem qualquer estilo. Então, nesta etapa, modificaremos o estilo do nosso aplicativo Angular. A Angular CLI gera um styles.css vazio para seu aplicativo quando você cria um novo projeto. Você pode inserir seus estilos desejados aqui.

Abra o arquivo src/styles.css em seu IDE e comece a modificar o estilo do aplicativo. Modifique os estilos do aplicativo e salve as alterações. Ao atualizar o navegador, você verá as alterações em seu aplicativo.

Checkout: Como implementar paginação em Angular JS?

Saiba mais sobre desenvolvimento angular e full-stack

Agora você sabe como instalar o Angular em seu sistema e como executar um projeto Angular. Depois de pegar o jeito, você verá que trabalhar com Angular é muito mais fácil do que você pensava. Com um pouco de experiência, você pode começar a trabalhar em projetos de desenvolvimento web front-end com o Angular.

Se você estiver interessado em aprender mais sobre desenvolvimento web Angular e front-end, aqui estão alguns recursos adicionais:

• Guia de currículo do desenvolvedor front-end
• As 10 principais habilidades para se tornar um desenvolvedor front-end
• Ideias de projetos front-end

Por outro lado, você pode fazer um curso de desenvolvimento full-stack e aprender com especialistas do setor por meio de vídeos, projetos e questionários.

Se você estiver interessado em aprender mais sobre desenvolvimento de software full-stack, confira o PG Diploma in Full-stack Software Development da upGrad & IIIT-B, projetado para profissionais que trabalham e oferece mais de 500 horas de treinamento rigoroso, mais de 9 projetos e atribuições , IIIT-B Alumni status, projetos práticos práticos e assistência de trabalho com as principais empresas.