Procedimentos para criação Angular + Spring Boot

Angular + Spring boot

Fagner Viana

1.0 - Configuração Inicial

Vamos preparar a nossa máquina para inicializar o projeto com Angular+Spring Boot
Realizado pela video aula do youtuber de Loiane :
https://www.youtube.com/watch?v=qJnjz8FIs6Q&list=PLGxZ4Rq3BOBpwaVgAPxTxhdX_
TfSVlTcY&index=1
Utilizando o notebook :
Core I3 , 8 de ram, windows 10 x64 ;

1.1- Instalação do Node

Realizar o download link para download : https://nodejs.org/pt-br/download/
Seguir a instalação de next, next ...

1.2 - Instalação Angular Cli

Mas informações sobre o angular cli : https://angular.io/cli

É uma ferramenta de interface de linha de comando que você usa para inicializar, desenvolver, estruturar

e manter aplicativos Angular diretamente de um shell de comando

Abrir o prompt de comando:

 Instalar o Angular Cli : npm install –g @angular /cli

F IGURA 1ANGULAR C LI INSTALADO

Versão do Angular
Caso ja tenha o angular instalado, pode realizar a atualização para a versão atual.
Abrir o prompt de comando e executar o comando:

 Verificar a versão do Angular CLI : ng version

F IGURA 2VERSÃO DO ANGULAR CLI 15.0.5

1.2.1Criar Pasta do Projeto

Criar uma pasta no seu computador e criar mas 2 subpastas sendo 1 para o Spring
boot e a outra para o Angular. Estaremos criando os projetos em pastas separadas e
no final estaremos realizando o deploy destes projetos.
Criei a pasta no meu disco d: com o nome “crud-angular-spring” e onde terá as
subpastas de nome : “crud-spring” e “crud-angular”
Com o prompt comando aberto e com o caminhdo da pasta do seu projeto

 Criando a subpasta CRUD-ANGULAR : com o comando - “ng new

crud-angular”;
 O sistema vai perguntar se preferi routeamento a respoats é “Y”;
 Em seguida escolher que tipo de CSS irá utilizar : a nossa opção é
“SCSS”
 Aguardar a instalação do projeto Angular

1.3.0 VSCOD

1.3.1Baixar VSCOD
Link para download : https://code.visualstudio.com/download
Apos instalação do VSCODE seguir a configuração das pastas do projeto criado no
passo 1.2.1 Criar Projeto.

1.3.2 Confuguração das Pastas

Clicar em -> File -> Open Folder -> e selecionar a subpasta crud-angular
F IGURA 3OPEN FOLDER

F IGURA 4CRUD-ANGULAR
F IGURA 5PROJETO ABERTO NO VSCODE

1.3.3 Extensões
Realizaremos a instalação das extensões de Loiane
Clicar no icone da extensão conforme imagem abaixo:

Na pesquisa escrever Loiane e em seguida clicar em “install”.

F IGURA 6LOANE PACOTE ANGULAR INSTALL