Integrando com o back-end Demoiselle
O sistema criado como back-end e a aplicação para consumo de serviços em servidor webservice com Angular 2 permite a integração imediata entre as funcionalidades providas nas camadas de negócio e visualização. A estratégia apresentada inicialmente oferece um arcabouço teórico que permite conhecimento que facilitam tarefas pontuais e permitem uma visualização mais ampla sobre a arquitetura empregada na construção de uma solução. A inclusão de funcionalidades que compõe o framework simplificam a implementação de várias demandas corriqueiras, mas que consomem significativa parte do tempo total de desenvolvimento de um produto de software, ofertando reduzido esforço de implementação de código.
Para realizar a primeira etapa da integração será criado uma interface desenvolvida utilizado Angular 2 por meio de um componente para o cadastramento de novas notícias no banco de dados da aplicação. Os arquivos que resultaram do tópico de Webservices será utilizada como base para a integração e os conceitos e arquivos utilizados naquele momento não serão detalhados nesta sessão.
Para adequar a classe Noticias do cliente Angular com o Servidor Demoiselle é necessário adicionar a propriedade descrição, bastando para isso alterar o arquivo noticias.ts
export class Noticias {
id: number;
titulo: string;
descricao: string;
}
Para utilizar a integração com os componentes html de formulários com o código script deve ser importada a funcionalidade responsável por esta integração utilizando a diretiva do Angular '@angular/forms' no módulo que utilizará a funcionalidade. O arquivo do módulo do componente deverá ser alterado para:
app.new.module.ts
import { NgModule } from '@angular/core';
import {HttpModule} from '@angular/http';
import {FormsModule} from '@angular/forms';
import { AppNewComponent } from './app.new.component';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [
HttpModule, BrowserModule, FormsModule
],
declarations: [
AppNewComponent
],
exports: [ AppNewComponent ]
})
export class AppNewModule { }
Para realizar a inserção de novos dados foi criado o método putNoticias e a variável novaNoticia que foi instanciada por meio da classe Noticias utilizando a chanada new Noticias. Os componentes htm utilizados no módulo estabelecem a comunicação com a interface script por meio da notação [(ngModel)] quando necessitam acessar alguma variável do componente. No exemplo a seguir tanto a variável novaNoticia quando noticias podem ser acessadas por componentes do formulário utilizando as diretivas do Angular pois ambas foram exportadas com o componente.
app.new.component.ts
import { Component, OnInit } from '@angular/core';
import { NoticiasService } from './app.new.service';
import { Noticias } from './noticias';
import 'rxjs/add/operator/map';
@Component({
selector: 'new-module',
templateUrl: './integrador.html' ,
providers: [NoticiasService]
})
export class AppNewComponent implements OnInit{
texto:string = "Um novo texto";
noticias : Noticias[];
novaNoticia : Noticias = new Noticias();
constructor(private service: NoticiasService) {
}
putNoticias(){
console.log(this.novaNoticia);
this.service.putNoticias(this.novaNoticia.titulo).subscribe(data => { this.noticias.push(this.novaNoticia)});
console.log("Postado");
}
ngOnInit(): void {
this.service.getNoticias().subscribe(noticias=>this.noticias = noticias);
}
}
As alterações aplicadas na classe NoticiasService em relação a exemplos anteriores representam apenas uma alteração na url do servidor na classe getNoticias e a inserção de um novo método que realiza chamadas ao servidor utilizando POST.
Para o envio e recuperação de informações por POST utilizando parâmetros JSON esta informação deve ser adicionada ao cabeçalho http da requisição utilizando a classe importada de @angular/core Headers.
import { Injectable } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import { Observable } from 'rxjs';
import { Noticias } from './noticias' ;
@Injectable()
export class NoticiasService {
constructor(private http:Http){}
getData(res: Response){
return res.json();
}
putNoticias(titulo : string){
let headers = new Headers();
headers.append('Content-Type', 'application/json');
let url = 'http://localhost:8080/sistema-0.0.1-SNAPSHOT/api/noticia';
return this.http.post(url, JSON.stringify({"titulo":titulo, "descricao":""}), {headers: headers})
.map(res => res.json());
getNoticias(): Observable<Noticias[]>{
return this.http.get('http://localhost:8080/sistema-0.0.1-SNAPSHOT/api/noticia').map((res:Response) => res.json());
};
}
Finalmente o código html que construirá a a interface com o usuário.
<h1>Cadastrar novas noticias</h1>
Titulo da notícia:
<input [(ngModel)]="novaNoticia.titulo" type="text">
<button (click)="putNoticias()">Enviar</button>
<h1>Noticias Cadastradas</h1>
<ul>
<li *ngFor="let noticia of noticias">
{{noticia.titulo}}
</li>
</ul>