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>

results matching ""

    No results matching ""