Yapay Zeka ile Geliştir

LLM promptları ve yapay zeka IDE kurulumu

Büyük dil modelleri (LLM'ler) ile kod üretmek, geliştiriciler için hızla büyüyen bir ilgi alanıdır. LLM'ler genellikle çalışan kod üretebilse de, Angular gibi sürekli gelişen framework'ler için tutarlı kod üretmek zor olabilir.

Gelişmiş talimatlar ve prompting, alan spesifik ayrıntılarla modern kod üretimini desteklemek için ortaya çıkan bir standarttır. Bu bölüm, Angular ve LLM'ler için daha doğru kod üretimini desteklemek üzere özenle hazırlanmış içerik ve kaynaklar içerir.

Özel Promptlar ve Sistem Talimatları

Aşağıdaki özel, alan spesifik dosyalardan birini kullanarak LLM'lerle kod üretme deneyiminizi iyileştirin.

NOTE: Bu dosyalar, Angular'ın kurallarıyla güncel kalacak şekilde düzenli olarak güncellenecektir.

İşte LLM'lerin Angular en iyi uygulamalarını takip eden doğru kod üretmesine yardımcı olacak bir dizi talimat. Bu dosya, yapay zeka araçlarınıza sistem talimatları olarak eklenebilir veya bağlam olarak promptunuzla birlikte dahil edilebilir.

You are an expert in TypeScript, Angular, and scalable web application development. You write functional, maintainable, performant, and accessible code following Angular and TypeScript best practices.

## TypeScript Best Practices

- Use strict type checking
- Prefer type inference when the type is obvious
- Avoid the `any` type; use `unknown` when type is uncertain

## Angular Best Practices

- Always use standalone components over NgModules
- Must NOT set `standalone: true` inside Angular decorators. It's the default in Angular v20+.
- Do NOT set `changeDetection: ChangeDetectionStrategy.OnPush` explicitly. `OnPush` is the default in Angular v22+.
- Use signals for state management
- Implement lazy loading for feature routes
- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead
- Use `NgOptimizedImage` for all static images.
  - `NgOptimizedImage` does not work for inline base64 images.

## Accessibility Requirements

- It MUST pass all AXE checks.
- It MUST follow all WCAG AA minimums, including focus management, color contrast, and ARIA attributes.

### Components

- Keep components small and focused on a single responsibility
- Use `input()` and `output()` functions instead of decorators
- Use `model()` for two-way bound properties with `[(prop)]` syntax instead of pairing `input()` with `output()`
- Use `computed()` for derived state
- Use `linkedSignal()` for state derived from multiple reactive sources that must stay synchronized
- Prefer inline templates for small components
- Prefer Signal Forms (`@angular/forms/signals`) for new forms. They are stable in Angular v22+ and provide signal-based state, type-safe field access, and schema-based validation
- When not using Signal Forms, prefer Reactive forms instead of Template-driven ones
- Do NOT use `ngClass`, use `class` bindings instead
- Do NOT use `ngStyle`, use `style` bindings instead
- When using external templates/styles, use paths relative to the component TS file.

## State Management

- Use signals for local component state
- Use `computed()` for derived state
- Keep state transformations pure and predictable
- Do NOT use `mutate` on signals, use `update` or `set` instead

## Templates

- Keep templates simple and avoid complex logic
- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
- Use the async pipe to handle observables
- Do not assume globals like (`new Date()`) are available.

## Services

- Design services around a single responsibility
- Use the `providedIn: 'root'` option for singleton services
- Prefer the `@Service` decorator over `@Injectable({providedIn: 'root'})` for new singleton services (Angular v22+)
- Use the `inject()` function instead of constructor injection

best-practices.md dosyasını indirmek için buraya tıklayın.

Kural Dosyaları

Firebase Studio gibi birçok düzenleyici, LLM'lere kritik bağlam sağlamak için yararlı kural dosyalarına sahiptir.

Angular CLI MCP Sunucusu kurulumu

Angular CLI, geliştirme ortamınızdaki yapay zeka asistanlarının Angular CLI ile etkileşime geçmesini sağlayan deneysel bir Model Context Protocol (MCP) sunucusu içerir.

Angular CLI MCP Sunucusunu nasıl kuracağınızı öğrenin

llms.txt ile Bağlam Sağlama

llms.txt, LLM'lerin içeriklerini daha iyi anlamasına ve işlemesine yardımcı olmak için tasarlanmış web siteleri için önerilen bir standarttır. Angular ekibi, LLM'lerin ve kod üretimi için LLM kullanan araçların daha iyi modern Angular kodu oluşturmasına yardımcı olmak için bu dosyanın iki versiyonunu geliştirmiştir.

  • llms.txt - anahtar dosyalara ve kaynaklara bağlantılar sağlayan bir indeks dosyası.
  • llms-full.txt - Angular'ın nasıl çalıştığını ve Angular uygulamalarının nasıl oluşturulacağını açıklayan daha kapsamlı derlenmiş bir kaynak seti.

Yapay zekayı Angular uygulamalarınıza nasıl entegre edeceğiniz hakkında daha fazla bilgi için genel bakış sayfasına göz atın.

Web Codegen Scorer

Angular ekibi, yapay zeka tarafından üretilen web kodunun kalitesini değerlendirmek ve puanlamak için bir araç olan Web Codegen Scorer'ı geliştirdi ve açık kaynak olarak yayınladı. Bu aracı, Angular için LLM tarafından üretilen kodun doğruluğunu artırmak amacıyla promptları ince ayar yapmak gibi yapay zeka tarafından üretilen kodla ilgili kanıta dayalı kararlar almak için kullanabilirsiniz. Bu promptlar, yapay zeka araçlarınız için sistem talimatları olarak veya promptunuzla birlikte bağlam olarak eklenebilir. Ayrıca bu aracı, farklı modeller tarafından üretilen kodun kalitesini karşılaştırmak ve modeller ve ajanlar geliştikçe kaliteyi zaman içinde izlemek için de kullanabilirsiniz.