Cícero Ednilson

Blog sobre Desenvolvimento de Softwares

Home » Desenvolvendo uma aplicação Web com Angular 4 e Spring Boot – Parte 4: Criando a aplicação com Angular CLI.

Desenvolvendo uma aplicação Web com Angular 4 e Spring Boot – Parte 4: Criando a aplicação com Angular CLI.

0 Flares Twitter 0 Facebook 0 Filament.io 0 Flares ×

Nessa parte do nosso tutorial vamos montar a estrutura da nossa aplicação usando o Angular CLI.

Páginas do tutorial.

Desenvolvendo uma aplicação Web com Angular 4 e Spring Boot – Parte 1: Introdução.

Desenvolvendo uma aplicação Web com Angular 4 e Spring Boot – Parte 2: Criando o Banco de Dados

Desenvolvendo uma aplicação Web com Angular 4 e Spring Boot – Parte 3: Criando o serviço Rest com Spring Boot.

Desenvolvendo uma aplicação Web com Angular 4 e Spring Boot – Parte 4: Criando a aplicação com Angular CLI.

Desenvolvendo uma aplicação Web com Angular 4 e Spring Boot – Parte 5: Criando os acessos ao Serviço REST.

Desenvolvendo uma aplicação Web com Angular 4 e Spring Boot – Parte 6: Criando o CRUD.

Desenvolvendo uma aplicação Web com Angular 4 e Spring Boot – Parte 7: Testando a aplicação.

Criando o projeto com Angular CLI.

O Angular CLI facilita a criação de um projeto com Angular, e já nos traz uma aplicação estruturada com as melhores práticas determinas para o Angular.
Lembrando que na introdução eu falei que devemos ter o Node e o Npm instalado, depois que tivermos realizado a instalação do Node e do NPM devemos executar o comando abaixo para instalar o Angular CLI.

1
npm install -g @angular/cli

A instalação pode demorar alguns minutos.

Se durante a instalação você receber o erro permission denied, access /usr/local/lib/node_modules/@angular/cli, você deve executar o comando como sudo, ou dar as permissões necessárias para a execução do NPM.

1
sudo npm install -g @angular/cli

Depois do Angular CLI instalado vamos agora cirar um novo projeto, para isso basta executar o comando abaixo.

1
ng new app-site

E então devemos ter o resultado como mostra a imagem abaixo, nessa imagem podemos ver que o Angular CLI já criou a estrutura do nosso projeto com os arquivos necessários.

Depois de criar o projeto vamos executar o comando abaixo para entrar no diretório da nossa aplicação.

1
cd app-site

E depois vamos executar o comando abaixo para executar a nossa aplicação.

1
ng serve --open

E então vamos ver no Terminal o processo de inicialização da nossa aplicação.

Após a execução da nossa aplicação podemos ver que foi aberto um navegador com a página inicial do projeto, se você teve o mesmo resultado significa que seu projeto foi criado com sucesso.

Importando a nossa aplicação no Visual Studio Code.

Agora vamos importar o nosso projeto no Visual Studio Code, caso você queira usar outra IDE pode pular esse passo, para importar o nosso projeto vamos clicar no menu File-> Open Folder como mostra a imagem abaixo.

Então vamos selecionar a pasta do nosso projeto e clicar em OK.

Depois podemos ver o nosso projeto no Visual Studio como mostra a imagem abaixo.

Entendendo a estrutura do Angular.

No nosso projeto todos arquivos .ts estão escrito em TypeScript, mas o que é esse tal TypeScript? TypeScript é um projeto Open Source criado pela Microsoft que não passa de um transpiler de Javascript.
Antes de começarmos a meter a mão na massa vamos entender um pouco como funciona o Angular, então vamos abrir o arquivo app.component.ts como mostra a imagem abaixo.

No Angular 2/4 vamos ter um Componente com metadata que vai ser responsável por interligar o nosso Componente com a nossa view(.html), esse metadata é o @Component, no nosso componente vamos colocar toda a lógica de interação com o usuário.
O Gerenciamento dos componentes são feitos pelo proprio Angular, assim o mesmo se encarrega de contruir e destruir os compoentes, não fica na nossa responsabilidade esse desenvolvimento.

Abaixo podemos ver a estrutura de um componente do Angular.

1
2
3
4
5
6
7
8
9
10
import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

No código acima podemos ver que temos o import que está importando o Decorator Component do @angular/core, esse Decorator lembra muito as Annotations do Java e os Atributos do C#, também podemos ver no Decorator @Component que temos alguns parâmetros, veja abaixo a função de cada um.

  • selector: Nesse parâmetro estamos informando onde a nossa view(app.component.html) vai ser renderizada.
  • templateUrl:Nesse parâmetro estamos informando qual arquivo .html vai ser renderizado no nosso selector.
  • styleUrls: Nesse parâmetro estamos informando quais arquivos css vamos usar na nossa view(.html).

Podemos ver que no Component AppComponent a nossa view vai ser renderizada no selector app-root, esse selector está definido no arquivo index.html como mostra a imagem abaixo.

No nosso projeto temos um arquivo com o nome de app.module.ts, nesse arquivo temos um Decorator com o nome de @NgModule, e nele temos a propriedade bootstrap, é essa propriedade que vai fazer nosso Component ser renderizado na nossa view index.html, esse vai ser o primeiro componente a ser carregado na nossa aplicação.

Bom, nessa parte do nosso tutorial aprendemos a criar um projeto com Angular CLI e entendemos um pouco da arquitetura gerada por ele, na próxima parte do nosso tutorial vamos criar os objetos necessários para acessar o nosso serviço REST, então até a próxima.

Comentários

Name of author

Name: ciceroednilson@gmail.com

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

0 Flares Twitter 0 Facebook 0 Filament.io 0 Flares ×