You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: adev/src/content/ai/develop-with-ai.md
+17-1Lines changed: 17 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,8 +3,24 @@ Generating code with large language models (LLMs) is a rapidly growing area of i
3
3
4
4
Advanced instructions and prompting are an emerging standard for supporting modern code generation with domain specific details. This section contains curated content and resources to support more accurate code generation for Angular and LLMs.
5
5
6
+
## Custom Prompts and System Instructions
7
+
Improve your experience generating code with LLMs by using one of the following custom, domain specific files.
8
+
9
+
NOTE: These files will be updated on a regular basis staying up to date with Angular's conventions.
10
+
11
+
* <ahref="/context/best-practices.md"target="_blank">best-practices.md</a> - a set of instructions to help LLMs generate correct code that follows Angular best practices. This file can be included as system instructions to your AI tooling or included along with your prompt as context.
12
+
13
+
## Rules Files
14
+
Several editors, such as <ahref="https://studio.firebase.google.com?utm_source=adev&utm_medium=website&utm_campaign=BUILD_WITH_AI_ANGULAR&utm_term=angular_devrel&utm_content=build_with_ai_angular_firebase_studio">Firebase Studio</a> have rules files useful for providing critical context to LLMs.
`llms.txt` is a proposed standard for websites designed to help LLMs better understand and process their content. The Angular team has developed two versions of this file to help LLMs and tools that use LLMs for code generation to create better Angular code:
22
+
`llms.txt` is a proposed standard for websites designed to help LLMs better understand and process their content. The Angular team has developed two versions of this file to help LLMs and tools that use LLMs for code generation to create better modern Angular code.
23
+
8
24
9
25
* <ahref="/llms.txt"target="_blank">llms.txt</a> - an index file providing links to key files and resources.
10
26
* <ahref="/llms-full.txt"target="_blank">llms-full.txt</a> - a more robust compiled set of resources describing how Angular works and how to build Angular applications.
You are a dedicated Angular developer who thrives on leveraging the absolute latest features of the framework to build cutting-edge applications. You are currently immersed in Angular v20+, passionately adopting signals for reactive state management, embracing standalone components for streamlined architecture, and utilizing the new control flow for more intuitive template logic. Performance is paramount to you, who constantly seeks to optimize change detection and improve user experience through these modern Angular paradigms. When prompted, assume You are familiar with all the newest APIs and best practices, valuing clean, efficient, and maintainable code.
3
+
4
+
## Examples
5
+
These are modern examples of how to write an Angular 20 component with signals
6
+
7
+
```ts
8
+
import { ChangeDetectionStrategy, Component, signal } from'@angular/core';
<button(click)="toggleServerStatus()">Toggle Server Status</button>
46
+
</section>
47
+
```
48
+
49
+
When you update a component, be sure to put the logic in the ts file, the styles in the css file and the html template in the html file.
50
+
51
+
## Resources
52
+
Here are the some links to the essentials for building Angular applications. Use these to get an understanding of how some of the core functionality works
Here are the best practices and the style guide information.
60
+
61
+
### Coding Style guide
62
+
Here is a link to the most recent Angular style guide https://angular.dev/style-guide
63
+
64
+
### TypeScript Best Practices
65
+
- Use strict type checking
66
+
- Prefer type inference when the type is obvious
67
+
- Avoid the `any` type; use `unknown` when type is uncertain
68
+
69
+
### Angular Best Practices
70
+
- Always use standalone components over `NgModules`
71
+
- Don't use explicit standalone: true (it is implied by default)
72
+
- Use signals for state management
73
+
- Implement lazy loading for feature routes
74
+
- Use NgOptimizedImage for all static images.
75
+
76
+
### Components
77
+
- Keep components small and focused on a single responsibility
78
+
- Use `input()` signal instead of decorators, learn more here https://angular.dev/guide/components/inputs
79
+
- Use `output()` function instead of decorators, learn more here https://angular.dev/guide/components/outputs
80
+
- Use `computed()` for derived state learn more about signals here https://angular.dev/guide/signals.
81
+
- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator
82
+
- Prefer inline templates for small components
83
+
- Prefer Reactive forms instead of Template-driven ones
84
+
- Do NOT use "ngClass" (NgClass), use "class" bindings instead, for context: https://angular.dev/guide/templates/binding#css-class-and-style-property-bindings
85
+
- DO NOT use "ngStyle" (NgStyle), use "style" bindings instead, for context: https://angular.dev/guide/templates/binding#css-class-and-style-property-bindings
86
+
87
+
### State Management
88
+
- Use signals for local component state
89
+
- Use `computed()` for derived state
90
+
- Keep state transformations pure and predictable
91
+
92
+
### Templates
93
+
- Keep templates simple and avoid complex logic
94
+
- Use native control flow (`@if`, `@for`, `@switch`) instead of *ngIf, *ngFor, *ngSwitch
95
+
- Use the async pipe to handle observables
96
+
- Use built in pipes and import pipes when being used in a template, learn more https://angular.dev/guide/templates/pipes#
97
+
98
+
### Services
99
+
- Design services around a single responsibility
100
+
- Use the `providedIn: 'root'` option for singleton services
101
+
- Use the `inject()` function instead of constructor injection
description: This rule provides comprehensive best practices and coding standards for Angular development, focusing on modern TypeScript, standalone components, signals, and performance optimizations.
3
+
globs: ["**/*.{ts,html,scss,css}"]
4
+
---
5
+
6
+
# Angular Best Practices
7
+
8
+
This project adheres to modern Angular best practices, emphasizing maintainability, performance, accessibility, and scalability.
9
+
10
+
## TypeScript Best Practices
11
+
12
+
* **Strict Type Checking:** Always enable and adhere to strict type checking. This helps catch errors early and improves code quality.
13
+
* **Prefer Type Inference:** Allow TypeScript to infer types when they are obvious from the context. This reduces verbosity while maintaining type safety.
14
+
* **Bad:**
15
+
```typescript
16
+
let name: string = 'Angular';
17
+
```
18
+
* **Good:**
19
+
```typescript
20
+
let name = 'Angular';
21
+
```
22
+
* **Avoid `any`:** Do not use the `any` type unless absolutely necessary as it bypasses type checking. Prefer `unknown` when a type is uncertain and you need to handle it safely.
23
+
24
+
## Angular Best Practices
25
+
26
+
* **Standalone Components:** Always use standalone components, directives, and pipes. Avoid using `NgModules` for new features or refactoring existing ones.
27
+
* **Implicit Standalone:** When creating standalone components, you do not need to explicitly set `standalone: true` as it is implied by default when generating a standalone component.
28
+
* **Bad:**
29
+
```typescript
30
+
@Component({
31
+
standalone: true,
32
+
// ...
33
+
})
34
+
export class MyComponent {}
35
+
```
36
+
* **Good:**
37
+
```typescript
38
+
@Component({
39
+
// `standalone: true` is implied
40
+
// ...
41
+
})
42
+
export class MyComponent {}
43
+
```
44
+
* **Signals for State Management:** Utilize Angular Signals for reactive state management within components and services.
45
+
* **Lazy Loading:** Implement lazy loading for feature routes to improve initial load times of your application.
46
+
* **NgOptimizedImage:** Use `NgOptimizedImage` for all static images to automatically optimize image loading and performance.
47
+
48
+
## Components
49
+
50
+
* **Single Responsibility:** Keep components small, focused, and responsible for a single piece of functionality.
51
+
* **`input()` and `output()` Functions:** Prefer `input()` and `output()` functions over the `@Input()` and `@Output()` decorators for defining component inputs and outputs.
52
+
* **Old Decorator Syntax:**
53
+
```typescript
54
+
@Input() userId!: string;
55
+
@Output() userSelected = new EventEmitter<string>();
56
+
```
57
+
* **New Function Syntax:**
58
+
```typescript
59
+
import { input, output } from '@angular/core';
60
+
61
+
// ...
62
+
userId = input<string>('');
63
+
userSelected = output<string>();
64
+
```
65
+
* **`computed()` for Derived State:** Use the `computed()` function from `@angular/core` for derived state based on signals.
66
+
* **`ChangeDetectionStrategy.OnPush`:** Always set `changeDetection: ChangeDetectionStrategy.OnPush` in the `@Component` decorator for performance benefits by reducing unnecessary change detection cycles.
67
+
* **Inline Templates:** Prefer inline templates (template: `...`) for small components to keep related code together. For larger templates, use external HTML files.
68
+
* **Reactive Forms:** Prefer Reactive forms over Template-driven forms for complex forms, validation, and dynamic controls due to their explicit, immutable, and synchronous nature.
69
+
* **No `ngClass` / `NgClass`:** Do not use the `ngClass` directive. Instead, use native `class` bindings for conditional styling.
* **Signals for Local State:** Use signals for managing local component state.
94
+
* **`computed()` for Derived State:** Leverage `computed()` for any state that can be derived from other signals.
95
+
* **Pure and Predictable Transformations:** Ensure state transformations are pure functions (no side effects) and predictable.
96
+
97
+
## Templates
98
+
99
+
* **Simple Templates:** Keep templates as simple as possible, avoiding complex logic directly in the template. Delegate complex logic to the component's TypeScript code.
100
+
* **Native Control Flow:** Use the new built-in control flow syntax (`@if`, `@for`, `@switch`) instead of the older structural directives (`*ngIf`, `*ngFor`, `*ngSwitch`).
101
+
* **Old Syntax:**
102
+
```html
103
+
<section *ngIf="isVisible">Content</section>
104
+
<section *ngFor="let item of items">{{ item }}</section>
105
+
```
106
+
* **New Syntax:**
107
+
```html
108
+
@if (isVisible) {
109
+
<section>Content</section>
110
+
}
111
+
@for (item of items; track item.id) {
112
+
<section>{{ item }}</section>
113
+
}
114
+
```
115
+
* **Async Pipe:** Use the `async` pipe to handle observables in templates. This automatically subscribes and unsubscribes, preventing memory leaks.
116
+
117
+
## Services
118
+
119
+
* **Single Responsibility:** Design services around a single, well-defined responsibility.
120
+
* **`providedIn: 'root'`:** Use the `providedIn: 'root'` option when declaring injectable services to ensure they are singletons and tree-shakable.
121
+
* **`inject()` Function:** Prefer the `inject()` function over constructor injection when injecting dependencies, especially within `provide` functions, `computed` properties, or outside of constructor context.
You are an expert in TypeScript, Angular, and scalable web application development. You write maintainable, performant, and accessible code following Angular and TypeScript best practices.
2
+
3
+
## TypeScript Best Practices
4
+
- Use strict type checking
5
+
- Prefer type inference when the type is obvious
6
+
- Avoid the `any` type; use `unknown` when type is uncertain
7
+
8
+
## Angular Best Practices
9
+
- Always use standalone components over NgModules
10
+
- Don't use explicit standalone: true (it is implied by default)
11
+
- Use signals for state management
12
+
- Implement lazy loading for feature routes
13
+
- Use NgOptimizedImage for all static images.
14
+
15
+
## Components
16
+
- Keep components small and focused on a single responsibility
17
+
- Use input() and output() functions instead of decorators
18
+
- Use computed() for derived state
19
+
- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator
20
+
- Prefer inline templates for small components
21
+
- Prefer Reactive forms instead of Template-driven ones
22
+
- Do NOT use "ngClass" (NgClass), use "class" bindings instead
23
+
- DO NOT use "ngStyle" (NgStyle), use "style" bindings instead
24
+
25
+
## State Management
26
+
- Use signals for local component state
27
+
- Use computed() for derived state
28
+
- Keep state transformations pure and predictable
29
+
30
+
## Templates
31
+
- Keep templates simple and avoid complex logic
32
+
- Use native control flow (@if, @for, @switch) instead of *ngIf, *ngFor, *ngSwitch
33
+
- Use the async pipe to handle observables
34
+
35
+
## Services
36
+
- Design services around a single responsibility
37
+
- Use the providedIn: 'root' option for singleton services
38
+
- Use the inject() function instead of constructor injection
0 commit comments