Primeiro projeto Angular 11 🚀

Primeiro projeto Angular 11 🚀

O Angular é um framework fantástico, criado pela equipe de desenvolvedores da Angular do Google, além da comunidade é claro. E com ele podemos criar diversas aplicações de todos os tipos de segmentos. Vamos então aprender como criar nosso primeiro projeto Angular!

O Angular CLI é uma ferramenta de linha de comando utilizada para criar, desenvolver e manter projetos Angular. Ele é responsável por criar nosso projeto, também facilita a criação de componentes, rotas, serviços entre outros, também ajuda a realizar o build, deploy e a instalar nossas bibliotecas dentro do projeto. Sem ele desenvolver seria difícil e demandaria mais tempo, pois todos esses processos teriam que ser feitos manualmente.

Para gerar nosso primeiro projeto Angular, devemos criar uma pasta, depois vamos abrir essa pasta dentro da IDE VSCode, no terminal podemos rodar o seguinte comando para NPM ou para YARN:

npm install -g @angular/cli
#or
yarn add @angular/cli

Ele fará a instalação automaticamente, quando finalizar ele mostrará a versão instalada, que sempre será a mais atual quando estivermos rodando esse comando. A versão que deve aparecer para você, caso esteja vendo este artigo em 2020 é essa a versão que estamos no momento+ @angular/cli@11.0.3.

Agora que temos a CLI instalada, podemos criar o primeiro projeto, para isso podemos rodar o seguinte comando:

ng new first-project-angular

Depois a primeira mensagem que surgirá é essa:

image.png

Fica a sua opção se deseja ou não habilitar o Strict Mode. Ele ajuda a melhorar a capacidade de manutenção e ajuda a detectar bugs com antecedência, caso queira entender mais sobre ele segue o link da documentação:

angular.io/guide/strict-mode

Depois ele pedira para adicionar no projeto o Angular Routing, e sim neste caso desejamos habilitar as rotas. Como na imagem abaixo:

image.png

E a ultima pergunta envolve se vamos querer adicionar CSS, SCSS ou outro arquivo de estilo em nosso projeto. Fique a vontade para escolher.

A seguir ele vai iniciar a instalação das dependências do projeto e montar toda estrutura básica para nós.

image.png

Finalizada a instalação você terá uma aplicação organizada por pastas e arquivos de configuração. Seu projeto estará organizado da seguinte forma:

image.png

Agora se quiser ver se tudo está funcionando, basta rodar o comando ng serve ou ng s no terminal, espere a compilação e quando finalizar digite no seu broswer a porta local que por padrão é localhost:4200, verá sua aplicação rodando localmente!

image.png

Nos próximo artigos, vamos continuar a entender um pouco mais sobre o Angular utilizando desse mesmo projeto. Vamos aos poucos implementando funcionalidades e usar outras bibliotecas de terceiros que ajudam no desenvolvimento de aplicações. Vamos falar sobre os arquivos de configurações, como o Framework realmente funciona, Forms, Validators, Routes, Guards, JWT, entre outras coisas que podemos utilizar dentro do Angular que agregam muito conhecimento para nossos projetos tanto pessoais como para nosso local de trabalho.

Obrigado por ler e caso queira contribuir entre em contato ou deixe um comentário. Até a próxima! 😉🚀

Subscribe to our newsletter

Read articles from The Pragmatic Engineer directly inside your inbox. Subscribe to the newsletter, and don't miss out.