Cícero Ednilson

Blog sobre Desenvolvimento de Softwares

Home » 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 6: Criando o CRUD.

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

Nessa parte do nosso tutorial vamos criar os nossos componentes para a realização do CRUD.

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 href=”http://www.ciceroednilson.com.br/desenvolvendo-uma-aplicacao-web-com-angular-4-e-spring-boot-parte-3-criando-o-servico-rest-com-spring-boot”>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 componente para a Página Inicial.

Essa página vai ter apenas um texto, mas depois se você quiser pode adicionar mais informações, então dentro do diretório app vamos criar um diretório com o nome de home, e depois vamos adicionar dois arquivos, um com o nome de home.component.html que vai ser a nossa view, e outro com o nome de home.component.ts que vai ser o componente para a view.

Na nossa view home.component.html vamos adicionar apenas o código abaixo.

1
{{mensagem}}

E o nosso componente vamos deixar ele com o código abaixo.

1
2
3
4
5
6
7
8
9
import { Component} from '@angular/core';
 
@Component({
    selector: 'app-home',
    templateUrl: './home.component.html'
  })
  export class HomeComponent {
       private mensagem:string = "Página Inicial."; 
  }

Veja na imagem abaixo como deve ficar os nossos objetos que acabamos de criar.

Podemos ver na nossa view que temos uma expressão que não vimos ainda, o {{mensagem}}, e o que seria essa expressão? Essa expressão é conhecida como Data Binding, é dessa forma que o Angular faz para manter sincronizado os dados da View com o Component, mais a frente vamos ver que existe mais alguns Data Binding diferentes.
No nosso caso será atribuido o valor Página Inicial. a view atráves da variável definida no componente.

Criando o componente para a página de cadastro e edição de registro.

No diretório app vamos criar um sub diretório com o nome de pessoa, e dentro do diretório pessoa vamos criar um outro diretório com o nome de cadastro, veja como deve ficar na imagem abaixo.

Agora no nosso diretório cadastro vamos criar um arquivo css com o nome de cadastro.component.css, e depois vamos deixar o nosso arquivo com o código abaixo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
form{
    position:fixed;
 
    left:30%;
    width:450px;
    height: 460px;
    background-color: rgba(230, 230, 230, 0.71);
    border: 1px solid  rgba(106, 141, 173, 0.71);;
    border-radius: 25px;
 }
 
 h3{
 
    background-color: #213E8D;
    color: white;
    text-align: center;
    vertical-align: middle;    
 
 
 }
 
 button{
    position: absolute; 
    right: 0;
    margin-right: 8px;
    bottom:0; 
    margin-bottom: 12px;
 }
 
 label{
 
    margin-left: 8px;
    color: #213E8D;
 }

Ainda no nosso diretório cadastro vamos criar a nossa view com o nome de cadastro.component.html e vamos adicionar o código abaixo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
 
<form (ngSubmit)="salvar()">   
 
    <br/>
    <h3>{{titulo}}</h3>
 
    <label>Código:
        <input type="input" name="codigo" size="10" [(ngModel)]="pessoa.codigo" disabled/>
    </label><br/><br/>
 
    <label>Nome:
        <input type="input" name="nome" size="30" [(ngModel)]="pessoa.nome"/>
    </label><br/><br/>
 
    <label>Registro Ativo:
        <input type="radio" name="ativo" [(ngModel)]="pessoa.ativo" [value]="true">Sim
        <input type="radio" name="ativo" [(ngModel)]="pessoa.ativo" [value]="false">Não<br>
    </label><br/><br/>
 
    <button type="submit">Salvar</button>
</form>

Veja que no nosso formulário temos mais alguns Data Bindings, um deles é o (ngSubmit)=”salvar()”, esse Data Binding é conhecido como bind de evento, que é usado para realizar alguma ação como o submit do formulário, podemos ver também o Data Binding [(ngModel)] nos nossos inputs, esse Data Binding mantem sincronizado o valor da nossa view com o objeto declarado no nosso componente, esse Data Binding é conhecido como two-way data binding e é muito usado em formulários.

Ainda no nosso diretório cadastro vamos criar o componente para a nossa view, então vamos adicionar um arquivo com o nome de cadastro.component.ts e vamos deixar nosso componente com o código abaixo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import { Component, OnInit } from '@angular/core';
 
import {Router} from '@angular/router';
import { ActivatedRoute } from '@angular/router';
 
import {PessoaService} from '../../services/pessoa.service';
 
import {Pessoa} from '../../services/pessoa';
 
import {Response} from '../../services/response';
 
import { Observable } from 'rxjs/Observable';
 
@Component({
    selector: 'app-cadastro-pessoa',
    templateUrl: './cadastro.component.html',
    styleUrls:["./cadastro.component.css"]
  })
  export class CadastroComponent implements OnInit {
 
    private titulo:string;
    private pessoa:Pessoa = new Pessoa();
 
    constructor(private pessoaService: PessoaService,
                private router: Router,
                private activatedRoute: ActivatedRoute){}
 
    /*CARREGADO NA INICIALIZAÇÃO DO COMPONENTE */
    ngOnInit() {
 
      this.activatedRoute.params.subscribe(parametro=>{
 
        if(parametro["codigo"] == undefined){
 
          this.titulo = "Novo Cadastro de Pessoa";
        }
        else{
 
          this.titulo = "Editar Cadastro de Pessoa";
          this.pessoaService.getPessoa(Number(parametro["codigo"])).subscribe(res => this.pessoa = res);
        }
 
 
      });      
    }
 
    /*FUNÇÃO PARA SALVAR UM NOVO REGISTRO OU ALTERAÇÃO EM UM REGISTRO EXISTENTE */
    salvar():void {
 
      /*SE NÃO TIVER CÓDIGO VAMOS INSERIR UM NOVO REGISTRO */
      if(this.pessoa.codigo == undefined){
 
        /*CHAMA O SERVIÇO PARA ADICIONAR UMA NOVA PESSOA */
        this.pessoaService.addPessoa(this.pessoa).subscribe(response => {
 
           //PEGA O RESPONSE DO RETORNO DO SERVIÇO
           let res:Response = <Response>response;
 
           /*SE RETORNOU 1 DEVEMOS MOSTRAR A MENSAGEM DE SUCESSO
           E LIMPAR O FORMULÁRIO PARA INSERIR UM NOVO REGISTRO*/
           if(res.codigo == 1){
            alert(res.mensagem);
            this.pessoa = new Pessoa();
           }
           else{
             /*
             ESSA MENSAGEM VAI SER MOSTRADA CASO OCORRA ALGUMA EXCEPTION
             NO SERVIDOR (CODIGO = 0)*/
             alert(res.mensagem);
           }
         },
         (erro) => {   
           /**AQUI VAMOS MOSTRAR OS ERROS NÃO TRATADOS
             EXEMPLO: SE APLICAÇÃO NÃO CONSEGUIR FAZER UMA REQUEST NA API                        */                 
            alert(erro);
         });
 
      }
      else{
 
        /*AQUI VAMOS ATUALIZAR AS INFORMAÇÕES DE UM REGISTRO EXISTENTE */
        this.pessoaService.atualizarPessoa(this.pessoa).subscribe(response => {
 
        //PEGA O RESPONSE DO RETORNO DO SERVIÇO
        let res:Response = <Response>response;
 
         /*SE RETORNOU 1 DEVEMOS MOSTRAR A MENSAGEM DE SUCESSO
           E REDIRECIONAR O USUÁRIO PARA A PÁGINA DE CONSULTA*/
        if(res.codigo == 1){
          alert(res.mensagem);
          this.router.navigate(['/consulta-pessoa']);
        }
         else{
          /*ESSA MENSAGEM VAI SER MOSTRADA CASO OCORRA ALGUMA EXCEPTION
          NO SERVIDOR (CODIGO = 0)*/
           alert(res.mensagem);
         }
       },
       (erro) => {                    
         /**AQUI VAMOS MOSTRAR OS ERROS NÃO TRATADOS
          EXEMPLO: SE APLICAÇÃO NÃO CONSEGUIR FAZER UMA REQUEST NA API                        */                 
          alert(erro);
       });
      }
 
    }
 
  }

No código acima podemos ver o método ngOnInit que é executado na inicialização do componente, nesse método temos apenas uma verificação para ver se vei o código via querystring, esse código vai ser retornado apenas da página de consulta que vamos criar mais a frente, caso esse código exista a ação do método salvar vai ser de editar um registro, caso não exista vai ser de inserir um novo registro, leia os comentários para entender melhor o nosso código, abaixo tentei mostrar onde é usado os itens do Componente na View.

Criando o componente para a página de consulta.

No nosso diretório pessoa vamos criar uma pasta com o nome de consulta, e depois vamos criar um arquivo css com o nome de consulta.component.css, depois vamos adicionar o código abaixo ao nosso arquivo, isso vai deixar a nossa tabela html que vamos criar mais interativa.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
table {
    border-collapse: collapse;    
    width: 100%;
}
 
th, td {
    text-align: left;
    padding: 8px;
}
 
tr:nth-child(even){
    background-color: rgba(106, 141, 173, 0.71);
    color: white;
}
 
th {
    background-color: #213E8D;
    color: white;
}
 
a{
    cursor: pointer; 
    cursor: hand; 
    text-decoration:underline;
 
}

Ainda na pasta consulta vamos criar um arquivo html com o nome de consulta.component.html, e depois vamos deixar ele com o código abaixo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<h3>{{titulo}}</h3>
 
<table>
    <thead>
    <tr>
        <th>Código</th>
        <th>Nome</th>
        <th>Reg. Ativo</th>
        <th>Editar</th>
        <th>Excluir</th>
    </tr>
    </thead>
 
    <tbody>
        <tr *ngFor="let pessoa of pessoas; let i = index;">
        <td>{{ pessoa.codigo }}</td>        
        <td>{{ pessoa.nome }}</td>        
        <td *ngIf='pessoa.ativo'>Sim</td>
        <td *ngIf='!pessoa.ativo'>Não</td>
        <td><a (click)="editar(pessoa.codigo);">Editar</a></td>
        <td><a (click)="excluir(pessoa.codigo, i);">Excluir</a></td>
        </tr>
        <tr>
           <td colspan="6" style="text-align: right;">Total de Registros: {{ pessoas.length }}</td> 
        </tr>
    </tbody>
</table>

No código acima podemos ver que alem dos Data Bindings temos as Diretivas *ngFor e *ngIf, essas diretivas são conhecidas como Diretivas estruturais.
Ainda na pasta consulta vamos criar um arquivo com o nome de consulta.component.ts, e depois vamos adicionar o código abaixo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import { Component, OnInit } from '@angular/core';
 
import {Router} from '@angular/router';
 
import {PessoaService} from '../../services/pessoa.service';
 
import {Pessoa} from '../../services/pessoa';
 
import {Response} from '../../services/response';
 
@Component({
    selector: 'app-consulta-pessoa',
    templateUrl: './consulta.component.html',
    styleUrls:["./consulta.component.css"]
  })
  export class ConsultaComponent implements OnInit {
 
    private pessoas: Pessoa[] = new Array();
    private titulo:string;
 
    constructor(private pessoaService: PessoaService,
                private router: Router){}
 
    ngOnInit() {
 
      /*SETA O TÍTULO */
      this.titulo = "Registros Cadastrados";
 
      /*CHAMA O SERVIÇO E RETORNA TODAS AS PESSOAS CADASTRADAS */
      this.pessoaService.getPessoas().subscribe(res => this.pessoas = res);
    }
 
    /**EXCLUI UM REGISTRO QUANDO CLICAMOS NA OPÇÃO EXCLUIR DE UMA 
     * LINHA DA TABELA*/
    excluir(codigo:number, index:number):void {
 
      if(confirm("Deseja realmente excluir esse registro?")){
 
        /*CHAMA O SERVIÇO PARA REALIZAR A EXCLUSÃO */
        this.pessoaService.excluirPessoa(codigo).subscribe(response => {
 
              /**PEGA O RESPONSE DO SERVIÇO */
              let res:Response = <Response>response;
 
              /*1 = SUCESSO
              * MOSTRAMOS A MENSAGEM RETORNADA PELO SERVIÇO E DEPOIS REMOVEMOS
              O REGISTRO DA TABELA HTML*/
              if(res.codigo == 1){
                alert(res.mensagem);
                this.pessoas.splice(index,1);
              }
              else{
                /*0 = EXCEPTION GERADA NO SERVIÇO JAVA */
                alert(res.mensagem);
              }
          },
          (erro) => {                    
               /*MOSTRA ERROS NÃO TRATADOS */
               alert(erro);
          });        
      }
 
    }
 
    editar(codigo:number):void{
 
      this.router.navigate(['/cadastro-pessoa',codigo]);
 
    }
 
  }

Leia os comentários do Component para ter um entendimento melhor do código, abaixo estou mostrando onde é usado cada item do Component na View.

Criando o componente para o menu da aplicação.

No nosso diretório app vamos criar um sub diretório com o nome de menu, depois vamos adicionar um arquivo css com o nome de menu.component.css, depois vamos adicionar o código abaixo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #213E8D;    
}
 
li {
    float: left;
}
 
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
 
li a:hover {
    background-color: rgba(106, 141, 173, 0.71);
}

Ainda na pasta menu vamos criar um arquivo com o nome de menu.component.html, depois vamos adicionar o código abaixo.

1
2
3
4
5
<ul>
    <li><a [routerLink]="['/home']">Home</a></li>            
    <li><a [routerLink]="['/cadastro-pessoa']">Cadastro</a></li>        
    <li><a [routerLink]="['/consulta-pessoa']">Consulta</a></li>        
</ul>

No código acima podemos ver que temos um Data Binding chamado routerLink, esse Data Binding vai ser responsável por chamar nossos Componentes atráves das rotas que vamos criar mais a frente.
Ainda no diretório menu vamos criar um componente com o nome de menu.component.ts, depois vamos adicionar o código abaixo.

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

Agora vamos abrir o arquivo app.component.html que fica no diretório app, e depois vamos deixar nosso arquivo apenas com o código abaixo.

1
2
3
4
5
6
7
8
9
 
<!--AQUI VAI SER CRIADO O MENU-->
<app-blog-menu></app-blog-menu>
 
<div>
  <br/><br/>
  <!--AQUI VAI SER RENDERIZADO AS NOSSAS VIEWS/COMPONENTS-->
  <router-outlet></router-outlet>
</div>

Veja que criamos o selector app-blog-menu para a renderização do menu, depois temos o router-outlet que vai ser responsável por renderizar as views da nossa aplicação.

Criando as Rotas da aplicação.

Agora vamos criar as rotas que vamos usar na nossa aplicação, para isso no diretório src vamos criar um arquivo com o nome de app.routes.ts, depois vamos deixar o código do nosso arquivo igual ao código abaixo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
 
 
import { ConsultaComponent } from './app/pessoa/consulta/consulta.component';
 
import {CadastroComponent} from './app/pessoa/cadastro/cadastro.component';
 
import { HomeComponent } from './app/home/home.component';
 
const appRoutes: Routes = [
    { path: 'home',                    component: HomeComponent },
    { path: '',                        component: HomeComponent },
    { path: 'consulta-pessoa',         component: ConsultaComponent },
    { path: 'cadastro-pessoa',         component: CadastroComponent },
    { path: 'cadastro-pessoa/:codigo', component: CadastroComponent }
 
];
 
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

Veja na imagem abaixo que no nosso Component de menu já temos mapeadas as chamadas das nossas rotas que criamos.

Também temos mapeado uma chamada de rota no Component de consultar quando o usuário for editar um registro como mostra a imagem abaixo.

Agora vamos abrir o nosso arquivo app.module.ts e vamos deixar ele como mostra a imagem abaixo.

Screenshot_2018-01-15_07-57-42

Agora já temos o nosso serviço REST e a nossa aplicação pronta, na próxima parte do tutorial vamos realizar alguns testes para ver se está tudo funcionando, 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 ×