使用Angular向Java开发人员介绍-使用Angular调用Java Web API

1 年 ago
逸, 科
1 minute

你好！

这篇文章是针对Java开发者的关于Angular入门的连载系列文章的第三篇。

返溯历史版

这篇文章的目标

目标是从内存中的Web API连接到后端Java Web API，并进行操作确认，它是Angular的数据源。

关于Java的示例代码

请从这里下载

请从以下链接下载Java示例文件。

Java – Web API 示例

Java的配置

我正在使用Java + Spring Boot（Web）构建Web API。
依赖关系由Maven管理。

编译和执行方法。

您可以在像Eclipse这样的IDE中加载和运行，或者如果您的机器已安装了Maven，则可以使用以下命令来完成。请将下载的示例移动到demo文件夹中并执行。

编译命令

mvn compile
image.png

执行命令 (shí

 mvn spring-boot:run
image.png

确认操作

请访问以下的网址，如果返回了Web API的结果就可以了。

image.png

(補充) 跨域設定

在本地环境开发时，为了允许从Angular访问Web API，需要进行跨源设置(@CrossOrigin)。示例中将其设置为”http://localhost:4200″，但请根据您的环境适时进行更改。

DemoAPIController.java的中文解释

@CrossOrigin(origins = "http://localhost:4200")
public List<People> demoAPI(@RequestParam(value = "name", defaultValue = "World") String name) throws JsonMappingException, JsonProcessingException {

    People[] array = this.jsonMapper.readValue(this.JSON, People[].class);
    List<People> list = Arrays.asList(array);
    return list;
}

将Angular的数据源从内存Web API更改为Java的Web API。

如果能成功启动Java的Web API，我们就可以从Angular进行连接。

将In-Memory Web API替换为Java

首先，在 app.module 中删除对 InMemoryWebApiModule 的定义。如果不删除这个定义，将始终使用内存中的 Web API 作为访问点，无法连接到 Web API。

app.module.ts -> 应用模块.ts

imports: [
  BrowserModule,
  AppRoutingModule,
  BrowserAnimationsModule,
  HttpClientModule,
  // InMemoryWebApiModule の定義をコメントアウト
  //InMemoryWebApiModule.forRoot(PeopleData),

接下来，您将API的连接URL替换为Java的Web API的URL。

状态\状态服务.ts

// 接続先 URL を変更
//private readonly data$ = this.refreshToken$.pipe(
//  switchMap(() => this.http.get('/api/people')));
private readonly data$ = this.refreshToken$.pipe(
   switchMap(() => this.http.get('http://localhost:8080/demo/api')));

确认行动

访问以下的URL，如果能够通过Web API接收到的数据在屏幕上显示出来就可以了。

image.png
image.png

总结

在本文中，我们已经完成了将Angular示例应用程序的数据源从内存Web API连接到实际的Java Web API的过程。

在开发业务中，如果同时开发前端和后端，一开始可以利用内存中的Web API，然后逐渐转向使用实际的Web API。这是一个常见的情景。

Angular非常方便，因为它考虑到这种开发情况，并且配备了内存中的Web API机制作为标准。

我们计划在下一篇文章中关注Angular的操作方法，请有兴趣的读者务必阅读。

角度入门技术培训

在Infragistics提供可以在一天内掌握Angular基础知识的技术培训。

如果您对此感兴趣，不妨参考以下页面。

要使用Ignite UI for Angular的试用版

在Infragistics，我们开发了丰富的UI组件库Ignite UI，以便更快地构建数据丰富且响应式的Web应用程序，并且我们还发布了适用于Angular的Ignite UI for Angular。

使用Angular的Ignite UI可以进行试用。

请通过此页面创建帐户以进行有关产品的技术咨询。注册后，您可以在30天内免费使用我们的技术支持服务，请随时与我们联系。

同样，如果您正在考虑购买产品，请点击此页。

请您就开发相关的任何事项向我们咨询！

在中国的Infragistics Japan为各种开发平台提供技术培训、咨询服务，并全面支持开发工作。

需要摆脱旧技术和支持终止的平台，但迁移到其他平台或框架的考虑进展缓慢，缺乏相关知识。

我们想要采用新的开发技术，但是公司内没有专家。而且，我们的日语资源也很有限，因此担心无法推进开发。

我们希望能够由公司内成员推进开发，但由于过去一直依赖外部供应商进行开发阶段，因此我们对工具和技术的理解相对欠缺。

我想要重新设计用户界面。我不知道如何进行关于UI设计和UI/UX的研究。我担心如果委托外部设计公司，开发会变得困难。

我接受此类咨询。

请随时通过此处与我们联系，我们很愿意提供咨询服务。

请使用技术支持和免费在线咨询活动。

因为日本的英富拉斯提克斯UI产品具有众多功能，所以文档中的信息量也很大，有时候很难找到所需的信息。在这种情况下，您可以随时预约技术支持或产品导入支持团队的免费在线咨询会，以节省确认时间，务必好好利用。确认如何联系技术支持
预约免费在线咨询会

✖
广告
将在 10 秒后关闭
bannerAds