| Dimension | Shared | Only in A | Only in B | Overlap |
|---|---|---|---|---|
| Sections | 0 | 11 | 4 | 0% |
| Commands | 0 | 0 | 2 | 0% |
| Section tags | 0 | 3 | 5 | 0% |
What each file covers
Sections
0 shared · 11 only in A · 4 only in B- − Persona
- − Examples
- − Resources
- − Best practices & Style guide
- − Coding Style guide
- − TypeScript Best Practices
- − Angular Best Practices
- − Components
- − State Management
- − Templates
- − Services
- + Environment
- + Key Documentation
- + Testing
- + Pull Requests
Commands
0 shared · 0 only in A · 2 only in B- + pnpm
- + pnpm bazel test //target
Section tags
0 shared · 3 only in A · 5 only in B- − lint-format
- − code-style
- − types
- + setup
- + test
- + testing-strategy
- + git-pr
- + docs
Line diff
angular/angular · adev/src/context/GEMINI.md
@@ −1 @@
1# Persona
2
3You 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.
4
5## Examples
6
7These are modern examples of how to write an Angular 20 component with signals
8
9```ts
10import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
11
12
13@Component({
14 selector: '{{tag-name}}-root',
15 templateUrl: '{{tag-name}}.html',
16})
17export class {{ClassName}} {
18 protected readonly isServerRunning = signal(true);
19 toggleServerStatus() {
20 this.isServerRunning.update(isServerRunning => !isServerRunning);
21 }
22}
23```
24
25```css
26.container {
27 display: flex;
28 flex-direction: column;
29 align-items: center;
30 justify-content: center;
31 height: 100vh;
32
33 button {
34 margin-top: 10px;
35 }
36}
37```
38
39```html
40<section class="container">
41 @if (isServerRunning()) {
42 <span>Yes, the server is running</span>
43 } @else {
44 <span>No, the server is not running</span>
45 }
46 <button (click)="toggleServerStatus()">Toggle Server Status</button>
47</section>
48```
49
50When 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.
51
52## Resources
53
54Here 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
55https://angular.dev/essentials/components
56https://angular.dev/essentials/signals
57https://angular.dev/essentials/templates
58https://angular.dev/essentials/dependency-injection
59
60## Best practices & Style guide
61
62Here are the best practices and the style guide information.
63
64### Coding Style guide
65
66Here is a link to the most recent Angular style guide https://angular.dev/style-guide
67
68### TypeScript Best Practices
69
70- Use strict type checking
71- Prefer type inference when the type is obvious
72- Avoid the `any` type; use `unknown` when type is uncertain
73
74### Angular Best Practices
75
76- Always use standalone components over `NgModules`
77- Do NOT set `standalone: true` inside the `@Component`, `@Directive` and `@Pipe` decorators
78- Use signals for state management
79- Implement lazy loading for feature routes
80- Use `NgOptimizedImage` for all static images.
81- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead
82
83### Components
84
85- Keep components small and focused on a single responsibility
86- Use `input()` signal instead of decorators, learn more here https://angular.dev/guide/components/inputs
87- Use `output()` function instead of decorators, learn more here https://angular.dev/guide/components/outputs
88- Use `computed()` for derived state learn more about signals here https://angular.dev/guide/signals.
89- Prefer inline templates for small components
90- Prefer Reactive forms instead of Template-driven ones
91- Do NOT use `ngClass`, use `class` bindings instead, for context: https://angular.dev/guide/templates/binding#css-class-and-style-property-bindings
92- Do NOT use `ngStyle`, use `style` bindings instead, for context: https://angular.dev/guide/templates/binding#css-class-and-style-property-bindings
93
94### State Management
95
96- Use signals for local component state
97- Use `computed()` for derived state
98- Keep state transformations pure and predictable
99- Do NOT use `mutate` on signals, use `update` or `set` instead
100
101### Templates
102
103- Keep templates simple and avoid complex logic
104- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
105- Use the async pipe to handle observables
106- Use built in pipes and import pipes when being used in a template, learn more https://angular.dev/guide/templates/pipes#
107
108### Services
109
110- Design services around a single responsibility
111- Use the `providedIn: 'root'` option for singleton services
112- Use the `inject()` function instead of constructor injection
113
angular/angular · AGENTS.md
@@ +1 @@
1---
2trigger: always_on
3---
4
5This is the source code for the Angular framework. This guide outlines standard practices for AI agents working in this repository.
6
7## Environment
8
9- Use `pnpm` for package management.
10- Use `pnpm bazel test //target` to run tests.
11
12## Key Documentation
13
14- [Building and Testing](contributing-docs/building-and-testing-angular.md): definitive guide for running targets.
15- [Coding Standards](contributing-docs/coding-standards.md): style guide for TypeScript and other files.
16- [Commit Guidelines](contributing-docs/commit-message-guidelines.md): format for commit messages and PR titles.
17
18## Testing
19
20- **Zoneless & Async-First:** Assume a zoneless environment where state changes schedule updates asynchronously.
21 - **Do NOT** use `fixture.detectChanges()` to manually trigger updates.
22 - **ALWAYS** use the "Act, Wait, Assert" pattern:
23 1. **Act:** Update state or perform an action.
24 2. **Wait:** `await fixture.whenStable()` to allow the framework to process the scheduled update.
25 3. **Assert:** Verify the output.
26- To keep tests fast, minimize the need for waiting:
27 - Use `useAutoTick()` (from `packages/private/testing/src/utils.ts`) to fast-forward time via the mock clock.
28- When waiting is necessary, use real async tests (`it('...', async () => { ... })`) along with:
29 - `await timeout(ms)` (from `packages/private/testing/src/utils.ts`) to wait a specific number of milliseconds.
30 - `await fixture.whenStable()` to wait for framework stability.
31
32## Pull Requests
33
34- Use the `gh` CLI (GitHub CLI) for creating and managing pull requests.
35
@@ −1 +1 @@
1−# Persona
1+---
2+trigger: always_on
3+---
24
3−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.
5+This is the source code for the Angular framework. This guide outlines standard practices for AI agents working in this repository.
46
5−## Examples
7+## Environment
68
7−These are modern examples of how to write an Angular 20 component with signals
9+- Use `pnpm` for package management.
10+- Use `pnpm bazel test //target` to run tests.
811
9−```ts
10−import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
12+## Key Documentation
1113
14+- [Building and Testing](contributing-docs/building-and-testing-angular.md): definitive guide for running targets.
15+- [Coding Standards](contributing-docs/coding-standards.md): style guide for TypeScript and other files.
16+- [Commit Guidelines](contributing-docs/commit-message-guidelines.md): format for commit messages and PR titles.
1217
13−@Component({
14− selector: '{{tag-name}}-root',
15− templateUrl: '{{tag-name}}.html',
16−})
17−export class {{ClassName}} {
18− protected readonly isServerRunning = signal(true);
19− toggleServerStatus() {
20− this.isServerRunning.update(isServerRunning => !isServerRunning);
21− }
22−}
23−```
18+## Testing
2419
25−```css
26−.container {
27− display: flex;
28− flex-direction: column;
29− align-items: center;
30− justify-content: center;
31− height: 100vh;
20+- **Zoneless & Async-First:** Assume a zoneless environment where state changes schedule updates asynchronously.
21+ - **Do NOT** use `fixture.detectChanges()` to manually trigger updates.
22+ - **ALWAYS** use the "Act, Wait, Assert" pattern:
23+ 1. **Act:** Update state or perform an action.
24+ 2. **Wait:** `await fixture.whenStable()` to allow the framework to process the scheduled update.
25+ 3. **Assert:** Verify the output.
26+- To keep tests fast, minimize the need for waiting:
27+ - Use `useAutoTick()` (from `packages/private/testing/src/utils.ts`) to fast-forward time via the mock clock.
28+- When waiting is necessary, use real async tests (`it('...', async () => { ... })`) along with:
29+ - `await timeout(ms)` (from `packages/private/testing/src/utils.ts`) to wait a specific number of milliseconds.
30+ - `await fixture.whenStable()` to wait for framework stability.
3231
33− button {
34− margin-top: 10px;
35− }
36−}
37−```
32+## Pull Requests
3833
39−```html
40−<section class="container">
41− @if (isServerRunning()) {
42− <span>Yes, the server is running</span>
43− } @else {
44− <span>No, the server is not running</span>
45− }
46− <button (click)="toggleServerStatus()">Toggle Server Status</button>
47−</section>
48−```
49−
50−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.
51−
52−## Resources
53−
54−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
55−https://angular.dev/essentials/components
56−https://angular.dev/essentials/signals
57−https://angular.dev/essentials/templates
58−https://angular.dev/essentials/dependency-injection
59−
60−## Best practices & Style guide
61−
62−Here are the best practices and the style guide information.
63−
64−### Coding Style guide
65−
66−Here is a link to the most recent Angular style guide https://angular.dev/style-guide
67−
68−### TypeScript Best Practices
69−
70−- Use strict type checking
71−- Prefer type inference when the type is obvious
72−- Avoid the `any` type; use `unknown` when type is uncertain
73−
74−### Angular Best Practices
75−
76−- Always use standalone components over `NgModules`
77−- Do NOT set `standalone: true` inside the `@Component`, `@Directive` and `@Pipe` decorators
78−- Use signals for state management
79−- Implement lazy loading for feature routes
80−- Use `NgOptimizedImage` for all static images.
81−- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead
82−
83−### Components
84−
85−- Keep components small and focused on a single responsibility
86−- Use `input()` signal instead of decorators, learn more here https://angular.dev/guide/components/inputs
87−- Use `output()` function instead of decorators, learn more here https://angular.dev/guide/components/outputs
88−- Use `computed()` for derived state learn more about signals here https://angular.dev/guide/signals.
89−- Prefer inline templates for small components
90−- Prefer Reactive forms instead of Template-driven ones
91−- Do NOT use `ngClass`, use `class` bindings instead, for context: https://angular.dev/guide/templates/binding#css-class-and-style-property-bindings
92−- Do NOT use `ngStyle`, use `style` bindings instead, for context: https://angular.dev/guide/templates/binding#css-class-and-style-property-bindings
93−
94−### State Management
95−
96−- Use signals for local component state
97−- Use `computed()` for derived state
98−- Keep state transformations pure and predictable
99−- Do NOT use `mutate` on signals, use `update` or `set` instead
100−
101−### Templates
102−
103−- Keep templates simple and avoid complex logic
104−- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
105−- Use the async pipe to handle observables
106−- Use built in pipes and import pipes when being used in a template, learn more https://angular.dev/guide/templates/pipes#
107−
108−### Services
109−
110−- Design services around a single responsibility
111−- Use the `providedIn: 'root'` option for singleton services
112−- Use the `inject()` function instead of constructor injection
34+- Use the `gh` CLI (GitHub CLI) for creating and managing pull requests.
11335
