A2UI 角渲染器
角执行A2UI框架,提供代理生成的UI无缝地集成到角应用中.
特征
- 反应渲染:使用角信号来进行高效,精细的UI更新.
- 动态组件分辨率:通过可扩展目录将A2UI组件类型映射到Angular组件.
- 地面管理: 内建支持多个独立的UI在单个会话内表面.
- 动作处理:处理代理发送动作的简单回调集成.
安装
yarn add @a2ui/angular @a2ui/web_core
协议版本
A2UI支持多个协议版本,以确保随着框架的演化而后向相容. 词根 @a2ui/angular 软件包提供版本不可知的表面管理、组件托管和最新的标准目录.
import {A2uiRendererService, A2UI_RENDERER_CONFIG, BasicCatalog} from '@a2ui/angular';
对于与先前协议版本的后向相容性,可提供特定版本的子路径:
@a2ui/angular/v0_9: v0. 9 协议和本地目录@a2ui/angular/v0_8: v0. 8 协议和本地目录
基本设置
配置您的渲染器 app.config.ts 使用 A2UI_RENDERER_CONFIG 注射符号 :
import {ApplicationConfig} from '@angular/core';
import {A2UI_RENDERER_CONFIG, A2uiRendererService, BasicCatalog} from '@a2ui/angular';
export const appConfig: ApplicationConfig = {
providers: [
{
provide: A2UI_RENDERER_CONFIG,
useValue: {
catalogs: [new BasicCatalog()],
actionHandler: action => {
console.log('Action received:', action);
},
},
},
A2uiRendererService,
],
};
使用量
绘制地表
最简单的制造A2UI表面的方法是使用 SurfaceComponent。此组件处理设置根 ComponentHost 给你的.
import {Component} from '@angular/core';
import {SurfaceComponent} from '@a2ui/angular/v0_9';
@Component({
selector: 'app-root',
standalone: true,
imports: [SurfaceComponent],
template: ` <a2ui-v09-surface surfaceId="main-surface" /> `,
})
export class AppComponent {}
动态组件托管
对于更精细的控制,使用 ComponentHostComponent 在地表内产生特定成分:
import {Component} from '@angular/core';
import {ComponentHostComponent} from '@a2ui/angular/v0_9';
@Component({
selector: 'app-custom-layout',
standalone: true,
imports: [ComponentHostComponent],
template: `
<div class="user-sidebar">
<a2ui-v09-component-host surfaceId="main-surface" componentId="sidebar-config" />
</div>
`,
})
export class CustomLayoutComponent {}
核心服务 : A2uiRendererService
这个 A2uiRendererService 是角成形器的心脏 它连接A2UI MessageProcessor 到Angular的反应系统.
processMessages(messages: Message[]):来自代理机的提示信息来更新UI表面.surfaceGroup(): 返回SurfaceGroupModel包含所有表面的当前状态.
基本目录组件
这个 @a2ui/angular/v0_9 软件包包括一个 BasicCatalog 具有下列标准组件:
- 版式数字 :
Row, (中文(简体) ),Column, (中文(简体) ),List, (中文(简体) ),Card, (中文(简体) ),Tabs, (中文(简体) ),Modal, (中文(简体) ),Divider - 内容数字 :
Text, (中文(简体) ),Image, (中文(简体) ),Icon, (中文(简体) ),Video, (中文(简体) ),AudioPlayer - 投入数字 :
Button, (中文(简体) ),TextField, (中文(简体) ),CheckBox, (中文(简体) ),ChoicePicker, (中文(简体) ),Slider, (中文(简体) ),DateTimeInput
警卫
[大 所提供的样本代码是用于演示目的,并说明了A2UI和A2A代理协议的力学. 在建立生产应用程序时,关键是要将任何在您直接控制之外运作的代理商视为一个潜在的不信任实体.
外部代理人提供的所有业务数据——包括其代理卡、信息、文物和任务状况——应作为不信任的投入处理。 例如,恶意代理可以在其领域提供被精心制作的数据(如名称,技能.description),如果在没有进行消毒的情况下用于构建大语言模型(LLM)的提示,可能会使您的应用暴露于即时注射攻击.
同样,所收到的任何UI定义或数据流都必须作为不信任处理. 恶意代理可能试图对合法接口进行套用来欺骗用户(fishing),通过属性值(XSS)来注入恶意脚本,或者产生过度的布局复杂来降低客户端性能(DoS). 如果您的应用程序支持可选的嵌入内容(如iframes或web视图),则必须额外注意防止被恶意外部网站曝光.
开发者责任:不能正确验证数据和严格地提供沙盒内容可能会造成严重的脆弱性。 开发者负责执行适当的安全措施,例如输入消毒、内容安全政策、对可选嵌入内容的严格隔离、以及确保证书处理,以保护他们的系统和用户.