服务代理

从Angular应用程序中调用服务器中的REST端点是很常见的, 在这种情况下我们通常创建服务(在服务器端具有针对每个服务方法的方法)和模型对象(与服务器端DTO匹配).

除了手动创建这样的服务器交互服务之外,我们还可以使用NSWAG之类的工具来为我们生成服务代理. 但使用NSWAG过程中我们遇到以下问题:

• 它生成一个大的单个.ts文件,该文件存在一些问题;
  • 当你的应用程序增长时,它会变的越来越大.
  • 它不适合ABP框架的模块化方法
• 它创建了一些难看的代码. 我们希望有一个干净的代码(就像我们手动编写一样).
• 它不能生成在服务器端声明的相同方法签名(因为swagger.json并不完全反映后端服务的方法签名). 我们已经创建了一个端点公开了服务器端方法信息,以便客户端生成更好的一致的客户端代理.

ABP CLI 的generate-proxies 命令在 src/app 文件夹中创建按模块名称分隔的文件夹,自动生成typescript客户端代理.

在angular应用程序的根文件夹中运行以下命令:

abp generate-proxy

它只为你自己的应用程序的服务创建代理. 不会为你正在使用的应用程序模块的服务创建代理(默认情况下). 有几个选项,参见CLI文档.

使用 --module all 选项生成的文件如下所示:

Services

每个生成的服务都与后端控制器匹配. 服务方法通过RestService调用后端API.

在每个服务中都定义了一个名为 apiName 的变量(自v2.4起可用). apiName 与模块的 RemoteServiceName 匹配. 在每次请求时该变量将作为参数传递给 RestService. 如果环境中未定义微服务API, RestService 使用默认值. 请参阅从应用程序配置中获取特定的API端点

服务的 providerIn 属性定义为 'root'. 因此无需将服务作为提供程序添加到模块. 你可以通过将服务注入到构造函数中来使用它,如下所示:

import { AbpApplicationConfigurationService } from '../abp/applicationconfiguration/services';
//...
export class HomeComponent{
  constructor(private appConfigService: AbpApplicationConfigurationService) {}
  ngOnInit() {
    this.appConfigService.get().subscribe()
  }
}

Angular编译器会从最终输出中删除那些没有被注入的服务. 参见摇树优化的提供者文档.

Models

生成的模型与后端中的dto匹配. 每个模型在 src/app/*/models 文件夹生成一个类.

@abp/ng.core 包有一些基类. 一些模型扩展了这些类.

可以如下所示创建一个类的实例:

import { IdentityRoleCreateDto } from '../identity/role/models'
//...
const instance = new IdentityRoleCreateDto({name: 'Role 1', isDefault: false, isPublic: true})

可以选择将初始值传递给每个类构造函数.

下一步是什么?

• HTTP请求