从springboot modelview对象获取价值到Angular JS 5

时间:2019-04-05 04:33:38

标签: angularjs spring-boot

我正在开发一个应用程序,从不同的应用程序获取请求(带有数据),我需要使用这些数据填充应用程序中的表格。我不使用任何数据库。

我想在angularjs中使用springboot。

这是我尝试过的

在我的弹簧控制器中

exec, Process.spawn, open3, system

我的问题是如何在angular js应用程序中获取modelview对象?

PS:我可以获取查询参数,但是我的数据太多,并且可以输入URL的字符数受到限制。

1 个答案:

答案 0 :(得分:0)

当您使用Angular等客户端技术时,您的服务器端(Java)需要担心的是数据(通常为json / xml)以及我们如何在视图层中显示数据。

我们将使用Spring Boot公开REST API,并使用angular5来构建将使用服务器公开的API的客户端。

Angular服务(ComplaintService.ts):

import {Injectable} from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable()
export class ComplaintService {

  constructor(private http:HttpClient) {}
  private url= '/aalcomplaint/api/complaint/lodge-complaint';

  public getLodgeComplaints() {
    return this.http.get<any[]>(this.url);
  }

}

角组件(ComplaintComponent.ts):

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { ComplaintService } from './complaint.service';

@Component({
  selector: 'complaint-selector',
  templateUrl: './complaint.html',
  styles: []
})
export class ComplaintComponent implements OnInit {

  responseData: any[];

  constructor(private router: Router, private complaintService : ComplaintService){}

  ngOnInit() {
    this.complaintService.getLodgeComplaints()
      .subscribe( data => {
        this.responseData = data;
      });
  };

}

投诉组件HTML模板(complaint.html):

<div class="col-md-6">
  <h2> Lodge Complaint Details</h2>

  <table class="table table-striped">
    <thead>
    <tr>
      <th>Policy Number</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let complaint of responseData">
      <td></td>
    </tr>
    </tbody>
  </table>

</div>

Spring REST Controller:

@Slf4j
@CrossOrigin(origins = "*")
@RestController
public class ComplainsController {
  @CrossOrigin(origins = "*")
  @RequestMapping(value = "/aalcomplaint/api/complaint/lodge-complaint", method = {RequestMethod.GET, RequestMethod.POST})
  public ModelAndView lodgeComplaint(final HttpServletRequest request, ModelAndView modelAndView, final RedirectAttributes redirectAttributes) {
    modelAndView.addObject("policyNumber","12345");
    modelAndView.setViewName("redirect:/list-complains");
    return modelAndView;
  }
}

希望这对您有帮助...!

此处有更多详细信息:https://www.devglan.com/spring-boot/spring-boot-angular-example