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

如何在Llama-Factory中实现动态mask机制？

如何在 Llama-Factory 中实现动态 mask 机制 在大语言模型（LLM）微调日益普及的今天，一个看似不起眼却至关重要的细节——注意力掩码（attention mask），正悄然决定着训练效率与模型表现。尤其是在使用像 Llama-Factory 这类开箱即用的微调框架时，开发者往往关注于数据格式、LoRA 配置或学习率调度，却忽略了 mask 的生成逻辑 才是确保梯度正确传播、防止信息泄露的关键防线。 更进一步地，在处理指令微调、对话生成等结构化任务时，标准的 padding-based attention mask 已不足以满足需求。我们需要一种更智能的策略：根据样本内容动态调整注意力范围，也就是所谓的“动态 mask 机制”。 Llama-Factory 虽然没有直接暴露“动态 mask”这一术语作为配置项，但其底层基于 Hugging Face Transformers 构建，天然支持通过自定义 DataCollator

语音识别新篇章：Whisper模型从入门到实战完整指南

语音识别新篇章：Whisper模型从入门到实战完整指南 【免费下载链接】whisper-tiny.en 项目地址: https://ai.gitcode.com/hf_mirrors/openai/whisper-tiny.en 还在为语音识别技术的高门槛而烦恼吗？🤔 今天，让我们一起探索OpenAI Whisper这款革命性的语音识别工具，看看它是如何让语音转文字变得如此简单高效！ 🎯 为什么选择Whisper？ 想象一下，你正在参加一个重要的国际会议，需要实时记录多国代表的发言内容。传统方法可能需要多名翻译人员协同工作，而Whisper却能一个人搞定所有任务！💪 Whisper的核心优势： * 🚀 一键安装，快速上手 * 🌍 支持98种语言，真正全球化 * 🎵 智能降噪，适应各种环境 * 💰 完全免费开源，商业友好 📦 快速开始：环境搭建全攻略 准备工作 首先，确保你的系统满足以下基本要求： * Python 3.9或更高版本 * 至少8GB内存 * 支持CUDA的GPU（可选，但推荐） 安装步骤 让我们一步步搭建Whisp
开题报告撰写新思路：通过9款AI写作工具和模板修改技巧提高质量

开题报告撰写新思路：通过9款AI写作工具和模板修改技巧提高质量

工具对比速览 工具名称 核心功能 适用场景 效率评分 特色优势 AIBiYe 开题报告生成/降重 中文论文全流程 ★★★★★ 国内院校适配度高 AICheck 初稿生成/格式检查 快速产出框架 ★★★★☆ 结构化输出优秀 AskPaper 文献综述辅助 外文文献处理 ★★★★ 跨语言检索强 秒篇 模板化写作 紧急赶稿 ★★★★ 5分钟速成 AI论文及时雨 全流程辅助 长论文写作 ★★★★☆ 20万字长文支持 学术GPT 语言润色 英文论文优化 ★★★★ 学术用语专业 PubScholar 文献检索 中科院资源 ★★★★ 免费权威 Grammarly 语法检查 语言纠错 ★★★★ 实时修改建议 智谱清言 框架构建 跨学科论文 ★★★☆ 多轮交互设计 AI工具如何革新开题报告写作？ Q：AI工具真的能帮我们写好开题报告吗？ A：当前AI技术已深度融入学术研究全流程，能够实现文献综述框架的快速搭建、

3分钟搭建本地AI绘画平台：StableDiffusion-webui让创意秒变精美画作

3分钟搭建本地AI绘画平台：StableDiffusion-webui让创意秒变精美画作 【免费下载链接】ChatTTS-ui匹配ChatTTS的web界面和api接口 项目地址: https://gitcode.com/GitHub_Trending/ch/ChatTTS-ui 你是否还在为AI绘画需要付费API而烦恼？是否担心在线服务存在隐私泄露风险？本文将带你从零开始，通过StableDiffusion-webui在本地部署一套全功能AI绘画系统，无需美术功底，3分钟即可拥有媲美专业画师的创作能力。 读完本文你将获得： * 4种零代码部署方案（Windows一键安装/容器化部署/源码部署/移动端适配） * 6种常用绘画风格参数配置与自定义方法 * API接口调用全流程及Python示例代码 * 95%常见问题的解决方案 项目核心架构 StableDiffusion-webui是一个基于Stable Diffusion模型的Web界面和API接口项目，主要由前端交互层、图像生成层和模型管理层构成。项目采用模块化设计，核心代码集中在以下目录： * Web界面