Neste artigo vamos ver o passo a passo para ter o nosso primeiro projeto em Angular.
“Angular é uma plataforma de aplicações web de código-fonte aberto e front-end baseado em TypeScript liderado pela Equipe Angular do Google e por uma comunidade de indivíduos e corporações. Angular é uma reescrita completa do AngularJS, feito pela mesma equipe que o construiu.”
Fonte: wikipedia
Agora vamos aos requisitos para um ambiente completo de desenvolvimento:
Git
Caso não tenha instalado acesse o site: https://git-scm.com
NodeJS
Baixe a versão LTS no site: https://nodejs.org
Visual Studio Code ou qualquer editor de código de sua preferência.
Se você for utilizar o Visual Studio Code, instale a extesão Angular Language Service ela vai ajudar na hora de codificar.
Todos os programas necessários instalados, vamos as verificações.
Abra o Visual Studio Code e vamos abrir uma pasta de trabalho para o nosso projeto com a tecla de atalho CTRL + K + O, essa pasta vai ser a pasta do nosso projeto.
Abra o terminal dentro do VS Code com o atalho CTRL + “ (Control + Aspas) e mude para o Git Bash.
No terminal vamos verificar se o node e o npm foram instalados corretamente com os comandos node -v e depois npm -v.
Vamos instalar o angular com o comando npm i g @angular/cli
Feche o VS Code e abra novamente e vamos checar se a instalação foi feita com sucesso com o comando ng version
Agora vamos criar o nosso projeto com o comando ng new projetoUm
Onde projetoUm é o nome do nosso projeto, mude de acordo com o nome do seu projeto.
Foram feitas duas perguntas uma sobre rotas e outra sobre estilização.
Caso o seu projeto tenha mais de uma página, escolha sim na opção de rodas, ela será utilizada mais para frente.
A estilização escolha de acordo, no nosso caso vamos usar o CSS.
Foi criado uma pasta com o nome do nosso projeto, use o comando cd projetoUm para entrar na pasta e depois ng serve para inicializar o nosso projeto.
Nosso projeto esta rodando, agora acesse pelo navegador localhost:4200.
Ele esta rodando no localhost, nosso computador, na porta padrão que é a 4200.
Estamos visualizando a nossa página de “Hello World”, para começar a alterar este template padrão e começar a colocar o projeto do seu jeito, edite o arquivo app.component.html e o seu arquivo de estilo o app.component.css na pasta src/app.
obs.: Não edite o arquivo index.html, nele contem um seletor que será utilizado para rendenrizar nossa aplicação.
Se você chegou até aqui, parabéns, vc criou sua primeira aplicação web utilizando o framework Angular.
