A cada vez venho percebendo a grande procura por artigos de Angular com um passo a passo de como criar aplicações, pensando nisso decidi criar uma série de postagens sobre o Angular e como construir uma aplicação com dados vindos de uma API json. Mas antes de começarmos a codar, vamos para alguns pré requisitos.
Pré requisitos para codar em Angular
- Saber 70% de HTML
- Saber 70% de CSS
- Saber 70% de JavaScript
- Saber 70% de SASS/SCSS
- Saber 50% de TypeScript
- Ter o NodeJS com versão atualizada instalada no computador
- Ter VSCode ou outro editor de código instalado
- Navegador atualizado
O que é o Angular
O Angular é um framework open-source criado pela Google para o desenvolvimento de aplicações web dinâmicas e complexas. Ele foi lançado em 2010 e passou por várias atualizações desde então, tornando-se uma das ferramentas mais populares para o desenvolvimento de Single-Page Applications (SPA). O Angular utiliza a arquitetura MVC (Model-View-Controller) para separar a lógica de negócios da interface do usuário, permitindo uma maior modularidade e reutilização de código. Ele também oferece recursos poderosos como injeção de dependência, binding de dados bidirecional e suporte a testes automatizados, tornando o desenvolvimento de aplicações complexas mais eficiente e produtivo.
Startando uma aplicação Angular
Antes de colocarmos a mão na massa, precisamos fazer a instalação do modo CLI do Angular em nossa máquina, para isso iremos abrir o terminal e digitar o seguinte comando:
npm install -g @angular/cli
Após instalado o CLI, podemos então criar então nosso projeto, escolha um lugar fácil de achar seu projeto, ou se preferir crie um novo repositório no Github, clone e dentro do diretório abra um terminal, após aberto o terminal escreva o comando abaixo para criar o projeto angular:
ng new rentcar
O comando acima irá criar um projeto de nome rentcar, vale destacar que no terminal você irá veral algumas questões como: se você deseja que o projeto seja rastreado pelo Analytics, se deseja que o router seja instalado para você fazer navegações e validações de rotas e o pré processador css que deseja adotar, você também pode adotar em usar apenas o css tradicional.
Rodando nossa aplicação Angular
Se você fez todas as etapas acima e não apareceu erro em seu terminal, agora podemos abrir o projeto no navegador e ver o resultado. No terminal navegue para dentro da pasta onde está aplicação e mande o seguinte comando:
ng serve
O comando acima irá abrir uma aplicação na porta 4200 (localhost:4200), se você abriu a navegação em uma aba de seu navegador, irá notar uma tela onde tem algumas descrições e uma parte onde tem um comando de como gerar um componente com CLI. Essa view é famosa tela "Hello World". Agora que sabemos que nosso projeto está ok, podemos então partir para a criação de nossos componentes personalizados, mas essa parte deixaremos para a segunda parte. Por hora encerramos aqui, um grande abraço e se tiver alguma dúvida deixe aí nos comentários :)
Top comments (0)