Claude、Agent与Copilot协作生成Angular应用

优质文章学习记录

— 12 min read
Claude、Agent与Copilot协作生成Angular应用

1.简介

随着人工智能技术的飞速发展，开发者的工作效率得到了极大的提升。在今天的技术栈中，Github Copilot、Agent和Claude Sonnect 4.5等智能助手已经成为开发者的得力助手。通过这些工具，开发者可以加速编码过程，减少错误，甚至自动生成复杂的代码逻辑。

本文将介绍如何在Visual Studio Code中使用这些工具来提升Angular开发的效率，带领大家快速入门并了解它们如何协同工作。

2.技术栈

Visual Studio Code：一款开源且功能强大的代码编辑器，支持多种插件。

Github Copilot：由GitHub和OpenAI合作开发的代码自动生成工具，支持多种编程语言，尤其适用于Web开发、Python、JavaScript和TypeScript等。

Agent：人工智能助手，可以帮助开发者自动化一些常见的开发任务，比如代码补全、调试建议等。

Claude Sonnect 4.5：Claude 是一个强大的自然语言处理（NLP）模型，Sonnect 4.5是其增强版，能够帮助开发者更好地理解和生成复杂代码逻辑，提供精准的技术文档和编程建议。

3.安装与配置

3.1 安装Visual Studio Code

前往Visual Studio Code官网下载并安装。
安装完成后，打开Visual Studio Code。

3.2 安装Github Copilot插件

打开Visual Studio Code，进入扩展视图。
在搜索框中输入Github Copilot。
点击安装按钮进行安装。
安装完成后，登录GitHub账户。

3.3 选择Copilot Chat，选择agent，Claud Sonnect 4.5

在这里插入图片描述


4.开发流程

4.1 创建 Angular 项目
首先，创建一个 Angular 项目并安装 Angular Material（根据需要启用 UI 组件库）：

ng new todo-app cd todo-app ng add @angular/material ng serve

4.2 启动 Visual Studio Code 并安装 Github Copilot 和 Agent 插件
确保你已经安装并登录了 Github Copilot 插件。同时，安装 Agent 插件，并确保它与 Copilot 插件协同工作。

4.3 输入中文提示词，让 Agent 帮你自动生成代码
在 Visual Studio Code 中打开 todo-app 项目，接下来，我们将通过中文提示词让 Agent 自动生成所需的代码，覆盖 待办事项（Todo）应用 的不同部分。

场景 1：生成 Todo 模型类
提示词：创建一个 Todo 模型类，包含标题、描述、优先级、截止日期和完成状态。
通过输入这个提示，Agent 会自动生成以下代码，创建一个符合要求的 Todo 模型类：

// todo.model.ts export class Todo { constructor( public title: string, public description: string, public priority: string, public dueDate: Date, public completed: boolean =false){}}

场景 2：生成 Todo 组件
提示词：创建一个 Todo 组件，包含一个表单，允许用户输入标题、描述、优先级和截止日期，提交后将新的 Todo 添加到列表中。

根据这个提示，Agent 会自动生成一个 TodoComponent，其模板中包含一个表单，允许用户输入待办事项信息并添加到列表中。生成的代码如下：

// todo.component.ts import{ Component } from '@angular/core';import{ Todo } from './todo.model'; @Component({ selector: 'app-todo', template: `<h1>待办事项列表</h1><form (ngSubmit)="addTodo()"><input [(ngModel)]="newTodo.title"name="title"placeholder="标题" required /><textarea [(ngModel)]="newTodo.description"name="description"placeholder="描述"></textarea><select [(ngModel)]="newTodo.priority"name="priority"><option value="低">低</option><option value="中">中</option><option value="高">高</option></select><input type="date"[(ngModel)]="newTodo.dueDate"name="dueDate" /><button type="submit">添加待办事项</button></form><ul><li *ngFor="let todo of todos">{{ todo.title }} - {{ todo.priority }} - {{ todo.dueDate |date}}<button (click)="removeTodo(todo)">删除</button></li></ul>`, styleUrls: ['./todo.component.css']})export class TodoComponent { todos: Todo[]=[]; newTodo: Todo = new Todo('', '', '中', new Date());addTodo(){ this.todos.push(new Todo( this.newTodo.title, this.newTodo.description, this.newTodo.priority, this.newTodo.dueDate )); this.newTodo = new Todo('', '', '中', new Date());} removeTodo(todo: Todo){ this.todos = this.todos.filter(t => t !== todo);}}

场景 3：添加 Todo 列表排序和筛选功能
提示词：为待办事项列表添加排序功能，按优先级排序，并添加筛选功能，只显示已完成的待办事项。

Agent 会根据此提示词对现有的组件代码进行修改，加入排序和筛选功能。以下是更新后的代码：

// todo.component.ts import{ Component } from '@angular/core';import{ Todo } from './todo.model'; @Component({ selector: 'app-todo', template: `<h1>待办事项列表</h1><form (ngSubmit)="addTodo()"><input [(ngModel)]="newTodo.title"name="title"placeholder="标题" required /><textarea [(ngModel)]="newTodo.description"name="description"placeholder="描述"></textarea><select [(ngModel)]="newTodo.priority"name="priority"><option value="低">低</option><option value="中">中</option><option value="高">高</option></select><input type="date"[(ngModel)]="newTodo.dueDate"name="dueDate" /><button type="submit">添加待办事项</button></form><label> 只显示已完成 <input type="checkbox"[(ngModel)]="showCompleted" /></label><ul><li *ngFor="let todo of todos | filter:showCompleted">{{ todo.title }} - {{ todo.priority }} - {{ todo.dueDate |date}}<button (click)="removeTodo(todo)">删除</button></li></ul><button (click)="sortTodos()">按优先级排序</button>`, styleUrls: ['./todo.component.css']})export class TodoComponent { todos: Todo[]=[]; newTodo: Todo = new Todo('', '', '中', new Date()); showCompleted: boolean =false;addTodo(){ this.todos.push(new Todo( this.newTodo.title, this.newTodo.description, this.newTodo.priority, this.newTodo.dueDate )); this.newTodo = new Todo('', '', '中', new Date());} removeTodo(todo: Todo){ this.todos = this.todos.filter(t => t !== todo);}sortTodos(){ this.todos.sort((a, b)=>{return a.priority.localeCompare(b.priority);});}}

场景 4：生成服务和数据持久化功能
提示词：创建一个服务，将待办事项存储在本地localStorage中，并在应用初始化时加载它们。

根据这个提示，Agent 将自动为你创建一个服务，用于将待办事项存储到 localStorage 并在应用初始化时加载数据。生成的代码如下：

// todo.service.ts import{ Injectable } from '@angular/core';import{ Todo } from './todo.model'; @Injectable({ providedIn: 'root'})export class TodoService { private todos: Todo[]=[];constructor(){ this.loadTodos();}loadTodos(){ const savedTodos = JSON.parse(localStorage.getItem('todos')||'[]'); this.todos = savedTodos.map((todo: any)=> new Todo( todo.title, todo.description, todo.priority, new Date(todo.dueDate), todo.completed ));}saveTodos(){ localStorage.setItem('todos', JSON.stringify(this.todos));} addTodo(todo: Todo){ this.todos.push(todo); this.saveTodos();}getTodos(){return this.todos;}}

接着在 TodoComponent 中通过服务来加载和保存待办事项：

// todo.component.ts import{ Component, OnInit } from '@angular/core';import{ Todo } from './todo.model';import{ TodoService } from './todo.service'; @Component({ selector: 'app-todo', template: `...`, styleUrls: ['./todo.component.css']})export class TodoComponent implements OnInit { todos: Todo[]=[]; newTodo: Todo = new Todo('', '', '中', new Date()); constructor(private todoService: TodoService){}ngOnInit(){ this.todos = this.todoService.getTodos();}addTodo(){ this.todoService.addTodo(new Todo( this.newTodo.title, this.newTodo.description, this.newTodo.priority, this.newTodo.dueDate )); this.newTodo = new Todo('', '', '中', new Date());}}

场景5 增加删除功能

提示词：添加删除按钮，点击删除可以删除该项

  1. 更新组件的模板
    我们需要在模板中为每个待办事项添加一个删除按钮。当用户点击该按钮时，应该删除相应的待办事项。
// todo.component.ts import{ Component } from '@angular/core';import{ Todo } from './todo.model';import{ TodoService } from './todo.service'; @Component({ selector: 'app-todo', template: `<h1>待办事项列表</h1><form (ngSubmit)="addTodo()"><input [(ngModel)]="newTodo.title"name="title"placeholder="标题" required /><textarea [(ngModel)]="newTodo.description"name="description"placeholder="描述"></textarea><select [(ngModel)]="newTodo.priority"name="priority"><option value="低">低</option><option value="中">中</option><option value="高">高</option></select><input type="date"[(ngModel)]="newTodo.dueDate"name="dueDate" /><button type="submit">添加待办事项</button></form><label> 只显示已完成 <input type="checkbox"[(ngModel)]="showCompleted" /></label><ul><li *ngFor="let todo of todos | filter:showCompleted">{{ todo.title }} - {{ todo.priority }} - {{ todo.dueDate |date}}<!-- 删除按钮 --><button (click)="removeTodo(todo)">删除</button></li></ul><button (click)="sortTodos()">按优先级排序</button>`, styleUrls: ['./todo.component.css']})export class TodoComponent { todos: Todo[]=[]; newTodo: Todo = new Todo('', '', '中', new Date()); showCompleted: boolean =false; constructor(private todoService: TodoService){}ngOnInit(){ this.todos = this.todoService.getTodos();}addTodo(){ this.todoService.addTodo(new Todo( this.newTodo.title, this.newTodo.description, this.newTodo.priority, this.newTodo.dueDate )); this.newTodo = new Todo('', '', '中', new Date());} removeTodo(todo: Todo){ // 从 todos 数组中移除对应的 Todo this.todos = this.todos.filter(t => t !== todo); // 更新本地存储 this.todoService.saveTodos();}sortTodos(){ this.todos.sort((a, b)=>{return a.priority.localeCompare(b.priority);});}}
  1. 修改 Todo 服务
    在 TodoService 中，我们需要确保每次删除待办事项时，都更新 localStorage，确保删除操作在应用重新加载后仍然有效。

以下是修改后的 TodoService：

// todo.service.ts import{ Injectable } from '@angular/core';import{ Todo } from './todo.model'; @Injectable({ providedIn: 'root'})export class TodoService { private todos: Todo[]=[];constructor(){ this.loadTodos();}loadTodos(){ const savedTodos = JSON.parse(localStorage.getItem('todos')||'[]'); this.todos = savedTodos.map((todo: any)=> new Todo( todo.title, todo.description, todo.priority, new Date(todo.dueDate), todo.completed ));}saveTodos(){ localStorage.setItem('todos', JSON.stringify(this.todos));} addTodo(todo: Todo){ this.todos.push(todo); this.saveTodos();}getTodos(){return this.todos;} removeTodo(todo: Todo){ // 删除待办事项 this.todos = this.todos.filter(t => t !== todo); this.saveTodos();}}

场景6 增加单元测试
提示词：为关键逻辑添加单元测试

import{ ComponentFixture, TestBed } from '@angular/core/testing';import{ FormsModule } from '@angular/forms';import{ TodoComponent } from './todo.component';import{ TodoService } from '../todo.service';import{ Todo } from '../todo.model'; describe('TodoComponent', ()=>{let component: TodoComponent;let fixture: ComponentFixture<TodoComponent>;let todoService: TodoService; beforeEach(async ()=>{ await TestBed.configureTestingModule({ declarations: [ TodoComponent ], imports: [ FormsModule ], providers: [ TodoService ]}) .compileComponents();}); beforeEach(()=>{ fixture = TestBed.createComponent(TodoComponent); component = fixture.componentInstance; todoService = TestBed.inject(TodoService); // 清空本地存储 spyOn(todoService, 'loadTodos').and.returnValue([]); spyOn(todoService, 'saveTodos'); fixture.detectChanges();}); it('should create', ()=>{ expect(component).toBeTruthy();}); describe('添加待办事项', ()=>{ it('应该能添加一个新的待办事项', ()=>{ const initialLength = component.todos.length; component.newTodo ={ title: '测试任务', description: '测试描述', priority: 3, dueDate: new Date('2025-12-31'), completed: false}; component.addTodo(); expect(component.todos.length).toBe(initialLength + 1); expect(component.todos[component.todos.length - 1].title).toBe('测试任务'); expect(todoService.saveTodos).toHaveBeenCalled();}); it('如果标题为空，不应添加待办事项', ()=>{ const initialLength = component.todos.length; component.newTodo ={ title: '', description: '测试描述', priority: 3, dueDate: new Date('2025-12-31'), completed: false}; component.addTodo(); expect(component.todos.length).toBe(initialLength);}); it('如果截止日期为空，不应添加待办事项', ()=>{ const initialLength = component.todos.length; component.newTodo ={ title: '测试任务', description: '测试描述', priority: 3, dueDate: undefined, completed: false}; component.addTodo(); expect(component.todos.length).toBe(initialLength);}); it('添加后应重置表单', ()=>{ component.newTodo ={ title: '测试任务', description: '测试描述', priority: 3, dueDate: new Date('2025-12-31'), completed: false}; component.addTodo(); expect(component.newTodo.title).toBe(''); expect(component.newTodo.description).toBe(''); expect(component.newTodo.priority).toBe(1); expect(component.newTodo.dueDate).toBeUndefined();});}); describe('删除待办事项', ()=>{ beforeEach(()=>{ component.todos =[ new Todo('任务1', '描述1', 1, new Date('2025-12-31'), false), new Todo('任务2', '描述2', 2, new Date('2025-12-31'), false), new Todo('任务3', '描述3', 3, new Date('2025-12-31'), false)];}); it('应该能删除指定索引的待办事项', ()=>{ const initialLength = component.todos.length; component.deleteTodo(1); expect(component.todos.length).toBe(initialLength - 1); expect(component.todos[0].title).toBe('任务1'); expect(component.todos[1].title).toBe('任务3'); expect(todoService.saveTodos).toHaveBeenCalled();});}); describe('筛选待办事项', ()=>{ beforeEach(()=>{ component.todos =[ new Todo('任务1', '描述1', 1, new Date('2025-12-31'), false), new Todo('任务2', '描述2', 2, new Date('2025-12-31'), true), new Todo('任务3', '描述3', 3, new Date('2025-12-31'), false)];}); it('未启用筛选时应返回所有待办事项', ()=>{ component.filterCompleted =false; const filtered = component.filteredTodos; expect(filtered.length).toBe(3);}); it('启用筛选时应只返回已完成的待办事项', ()=>{ component.filterCompleted =true; const filtered = component.filteredTodos; expect(filtered.length).toBe(1); expect(filtered[0].title).toBe('任务2'); expect(filtered[0].completed).toBe(true);});}); describe('排序待办事项', ()=>{ beforeEach(()=>{ component.todos =[ new Todo('任务1', '描述1', 1, new Date('2025-12-31'), false), new Todo('任务2', '描述2', 3, new Date('2025-12-31'), false), new Todo('任务3', '描述3', 2, new Date('2025-12-31'), false)];}); it('未启用排序时应按原顺序返回', ()=>{ component.sortByPriority =false; const sorted = component.filteredTodos; expect(sorted[0].priority).toBe(1); expect(sorted[1].priority).toBe(3); expect(sorted[2].priority).toBe(2);}); it('启用排序时应按优先级降序返回', ()=>{ component.sortByPriority =true; const sorted = component.filteredTodos; expect(sorted[0].priority).toBe(3); expect(sorted[1].priority).toBe(2); expect(sorted[2].priority).toBe(1);});}); describe('完成状态变更', ()=>{ it('完成状态变更时应保存到本地存储', ()=>{ component.todos =[ new Todo('任务1', '描述1', 1, new Date('2025-12-31'), false)]; component.onCompletedChange(); expect(todoService.saveTodos).toHaveBeenCalledWith(component.todos);});});});

5.总结

通过输入中文提示词，Agent 可以自动生成 Angular 应用的各个功能模块，包括模型类、组件、排序和筛选功能、数据持久化等。这样的开发方式使得开发者能够快速构建功能完整的应用，减少了手动编写代码的工作量，同时也确保了代码的质量和一致性。

在这个例子中，我们展示了如何通过简单的中文提示词，生成 Angular 应用中的多个功能，从而实现一个完整的 待办事项管理 系统。使用 Agent 自动化生成代码，可以显著提升开发效率，使得开发者能够将更多精力集中在业务逻辑和用户体验上，而不是处理繁琐的代码实现。

6.管理系统界面

在这里插入图片描述

Read more

金融场景实践：用GLM-4.6V-Flash-WEB分析报表截图

金融场景实践：用GLM-4.6V-Flash-WEB分析报表截图 在银行风控部门的早会上，分析师小张又一次面对堆积如山的PDF报表和微信截图——客户上传的对账单、交易流水截图、资产负债表照片……这些非结构化图像每天超过2000张。人工逐张识别、转录、核验，平均耗时8分钟/张，错误率超12%。当一笔可疑交易因延迟识别错过黄金处置窗口，问题就不再是效率，而是风险。 这不是个例。大量金融机构正卡在“最后一公里”：已有OCR工具能识字，却读不懂表格逻辑；传统NLP模型能分析文本，却无法理解“左上角第三行‘本期余额’数值异常偏低”这类跨模态指令。真正需要的，是一个能看懂图、听懂话、理清业务逻辑的智能体。 GLM-4.6V-Flash-WEB正是为此而生——它不只是一张更清晰的“眼睛”，更是一套嵌入金融语境的“业务大脑”。本文将带你跳过理论推演，直接进入真实战场：用一张手机拍摄的资产负债表截图，完成从上传到风险提示的完整闭环。 1. 为什么金融场景特别需要视觉大模型？ 1.1 传统方案的三重失效 金融数据天然具有强图像属性：监管报送的扫描件、

浏览器远程桌面终极方案：Web RDP完整实现指南

浏览器远程桌面终极方案：Web RDP完整实现指南 【免费下载链接】mstsc.jsA pure Node.js Microsoft Remote Desktop Protocol (RDP) Client 项目地址: https://gitcode.com/gh_mirrors/ms/mstsc.js 在数字时代的技术探索中，远程控制早已不再是专业IT人员的专属领域。今天，我们将深入解析一款革命性的工具——mstsc.js，它通过纯JavaScript实现了完整的Microsoft远程桌面协议，让浏览器直接变身RDP客户端，开启Web端远程控制的全新篇章。 技术原理深度揭秘 mstsc.js的核心魅力在于其纯前端实现架构。该项目巧妙地运用了Canvas渲染技术和Socket.IO实时通信机制，在浏览器与远程服务器之间构建了一座高效的数据桥梁。 前端模块位于client/js/目录，包含多个关键组件： * mstsc.js：主控制模块，处理远程桌面会话管理 * canvas.js：负责远程桌面的图像渲染和显示
Java计算机毕设之基于springboot的智能推荐高考志愿辅助填报系统基于web的高考志愿填报系统的设计与实现基于Java + vue高考志愿填报系统（完整前后端代码+说明文档+LW，调试定制等）

Java计算机毕设之基于springboot的智能推荐高考志愿辅助填报系统基于web的高考志愿填报系统的设计与实现基于Java + vue高考志愿填报系统（完整前后端代码+说明文档+LW，调试定制等）

博主介绍：✌️码农一枚 ，专注于大学生项目实战开发、讲解和毕业🚢文撰写修改等。全栈领域优质创作者，博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战 ✌️技术范围：：小程序、SpringBoot、SSM、JSP、Vue、PHP、Java、python、爬虫、数据可视化、大数据、物联网、机器学习等设计与开发。 主要内容：免费开题报告、任务书、全bao定制+中期检查PPT、代码编写、🚢文编写和辅导、🚢文降重、长期答辩答疑辅导、一对一专业代码讲解辅导答辩、模拟答辩演练、和理解代码逻辑思路。 特色服务内容：答辩必过班 （全程一对一技术交流，帮助大家顺利完成答辩，小白必选） 全网粉丝50W+，累计帮助2000+完成优秀毕设 🍅文末获取源码🍅 感兴趣的可以先收藏起来，还有大家在毕设选题，
前端计算机基础

前端计算机基础

进程和线程的区别 简单记：进程是 “独立的容器”，线程是 “容器里干活的人”，多人共享容器资源，效率更高但也更容易互相影响。 进程：独立可运行的程序，比如微信，留言及，VSCODE 进程是操作系统资源分配的最小单位（资源包括内存、CPU 时间片、文件句柄等），每个进程都有自己独立的内存空间，进程之间互不干扰。 线程：是进程的执行单位，一个进程可以包含多个县城，比如微信进程中，有接收消息线程，渲染界面线程 线程是调度执行的最小单位 ,同一进程内的线程共享进程的内存和资源。 类比：进程像一家 “独立的公司”，有自己的办公场地（内存）、资金（系统资源）；线程像公司里的 “员工”，共享公司的场地和资金，各自做不同的工作，协作完成公司整体任务。 维度进程线程资源分配系统资源分配的最小单位资源调度 / 执行的最小单位内存空间每个进程有独立的内存空间共享所属进程的内存空间通信方式复杂（需 IPC：管道、套接字、共享内存等）简单（直接读写进程内共享变量）创建