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 数组中移除对应的 Todothis.todos = this.todos.filter(t => t !== todo);// 更新本地存储this.todoService.saveTodos();}sortTodos() {this.todos.sort((a, b) => {return a.priority.localeCompare(b.priority);});}
}

2. 修改 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.管理系统界面