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 4:从零开始利用Python构建

详解如何复现LLaMA 4:从零开始利用Python构建

🧠 向所有学习者致敬！ “学习不是装满一桶水，而是点燃一把火。” —— 叶芝 我的博客主页：https://lizheng.blog.ZEEKLOG.net 🌐 欢迎点击加入AI人工智能社区！ 🚀 让我们一起努力，共创AI未来！ 🚀 LLaMA 4 发布以来已经面临了大量的批评，但LLaMA 4 是继 Mistral 之后的一个新进展，展示了基于 MoE（Mixture-of-Experts，混合专家）模型的优势。 在本博客中，我们从零开始构建 LLaMA 4 的 MoE 架构，以了解它是如何实际构建的。 更多LLM图解内容可以查看 详解如何复现DeepSeek R1:从零开始利用Python构建 详解如何从零用 Python复现类似 GPT-4o 的多模态模型 复现BPE 以下是我们在GPU 上训练的 220 万参数的 LLaMA MoE 在一个微小的英语数据集上训练
【Matlab】最新版2025a发布，深色模式、Copilot编程助手上线！

【Matlab】最新版2025a发布，深色模式、Copilot编程助手上线！

文章目录 * 一、软件安装 * 1.1 系统配置要求 * 1.2 安装 * 二、新版功能探索 * 2.1 界面图标和深色主题 * 2.2 MATLAB Copilot AI助手 * 2.3 绘图区升级 * 2.4 simulink * 2.5 更多 🟠现在可能无法登录或者注册mathworks（写这句话的时间：2025-05-20）： 最近当你登录或者注册账号的时候会显示：no healthy upstream，很多人都遇到了这个问题，我在reddit上看到了mathworks官方的回答：确实有这个问题，正在恢复，不知道要几天咯，大家先用旧版本吧。 — 已经近10天了，原因是：遭受勒索软件攻击 延迟一个月，终于发布了🤭。 一、软件安装 1.1
【混元AIGC+腾讯云智能体+首创Coze核心流思维导图MCP】：打造一个文思通-智能写作助手Agent

【混元AIGC+腾讯云智能体+首创Coze核心流思维导图MCP】：打造一个文思通-智能写作助手Agent

【混元AIGC+腾讯云智能体+首创Coze核心流思维导图MCP】：打造一个文思通-智能写作助手Agent 1.背景 作为一名长期关注人工智能发展的内容创作者，我经常需要撰写关于AI技术、应用趋势和产品体验的文章。然而，在实际写作过程中，常常会遇到灵感枯竭、结构混乱、表达不够精准等问题。有时候写到一半才发现逻辑断层，或者内容重复，甚至忘记了一些关键知识点。 为了解决这些痛点，我决定打造一个专属于自己的智能写作助手，取名为“文思通”——寓意“文思如泉涌，条理通达”。这个助手不仅要能帮我生成内容，更要具备结构化思维引导、逻辑梳理和语言润色的能力。 最近，我接触到一种创新的工具组合：以 Coze 平台为核心逻辑流，结合自研的思维导图 MCP 服务，可以实现从文本到可视化思维导图的自动转换。这正好解决了我在构思阶段缺乏条理的问题。而选择开发平台时，我注意到腾讯云智能体开发平台与腾讯混元大模型（Hunyuan AIGC） 的深度整合能力非常出色，支持工作流编排、插件扩展（MCP），并且提供稳定高效的推理服务。 最终，我决定采用“混元AIGC + 腾讯云智能体平台
基于FPGA的简易数据采集系统

基于FPGA的简易数据采集系统

一、实验目的         本实验基于Intel Alter CycloneⅣ EP4CE6F17C8N开发板与Verilog HDL语言设计简易数据采集系统。该系统需要实现DDS正常产生波形，通过DAC与ADC转换后的波形数据一致。为实现该目的，需进行的操作细则如下:         1.查阅资料，理解并掌握dds运行原理。         2.阅读ADC和DAC芯片手册理解芯片工作原理及时序要求。         3.进行模块化程序设计，独立进行各个模块的代码设计和仿真调试，完成各个模块设计之后，再进行模块互联，最后测试模块互联后的顶层程序功能是否与预期设计一致。         4.板级测试，将通过仿真调试的程序烧录到开发板上，用Singal Tap联合调试，抓取输入与输回的波形数据，观察二者是否一致。 二、实验原理         本次实验原理将分为理论原理、硬件原理两部分进行阐述。 2.1 理论原理 2.1.1 DDS基本原理         DDS（Direct Digital Synthesis）是一种用于产生可控制频率的数字信号的技术，由于其易于