From 64e02d82c68e3758855de8c882af2897f6103f9e Mon Sep 17 00:00:00 2001 From: Kam Date: Fri, 21 Aug 2026 10:04:28 +0300 Subject: [PATCH] docs: point the LLM indexes at current pages, not redirects `llms-list.md` feeds the generated `llms-full.txt`. Three of its DI entries were left behind by a page rename: two named files that no longer exist and one named a copy that had been superseded. The generator warns on an unreadable file and carries on, so the build stayed green while `llms-full.txt` quietly lost three DI guides and shipped a stale fourth. `llms.txt` linked the same old URLs, which only reach their pages through a redirect, plus `guide/hybrid-rendering`, which redirects to `/guide/ssr` and duplicates the line above it. Also removes `creating-injectable-service.md`, left behind by that rename and reachable from nothing. (cherry picked from commit 51cb07e98081ab7e4e84a9e0949266a8e19cca84) --- .../guide/di/creating-injectable-service.md | 151 ------------------ adev/src/context/llms-list.md | 6 +- adev/src/llms.txt | 6 +- 3 files changed, 5 insertions(+), 158 deletions(-) delete mode 100644 adev/src/content/guide/di/creating-injectable-service.md diff --git a/adev/src/content/guide/di/creating-injectable-service.md b/adev/src/content/guide/di/creating-injectable-service.md deleted file mode 100644 index bbc4094b680..00000000000 --- a/adev/src/content/guide/di/creating-injectable-service.md +++ /dev/null @@ -1,151 +0,0 @@ -# Creating an injectable service - -A service is a broad category that encompasses any value, function, or feature that your application needs. -A service is typically a class with a focused and well-defined purpose. -A component is one type of class that you can use with dependency injection (DI). - -Angular distinguishes components from services to improve modularity and reusability. -By separating a component's view-related features from other types of processing, you can keep your component classes lean and efficient. - -Ideally, your component's responsibility is to enable the user experience and nothing more. -A component should present properties and methods for data binding, to mediate between the view (rendered by the template) and the application logic (which often includes some notion of a model). - -You can delegate tasks from a component to services, such as fetching data from a server, validating user input, or logging to the console. -By defining such tasks in an injectable service class, you make those capabilities available to any component. -You can also make your application more adaptable by configuring different providers for the same type of service based on different circumstances. - -Angular does not strictly enforce these principles. -Angular helps you follow these principles by making it easy to organize your application logic into services and make those services available to components through DI. - -## Service examples - -Here's an example of a service class that logs to the browser console: - -```ts {header: "logger.service.ts (class)"} -export class Logger { - log(msg: unknown) { - console.log(msg); - } - error(msg: unknown) { - console.error(msg); - } - warn(msg: unknown) { - console.warn(msg); - } -} -``` - -Services can depend on other services. -For example, here's a `HeroService` that depends on the `Logger` service, and also uses `BackendService` to get heroes. -That service in turn might depend on the `HttpClient` service to fetch heroes asynchronously from a server: - -```ts {header: "hero.service.ts", highlight="[7,8,12,13]"} -import {inject} from '@angular/core'; - -export class HeroService { - private heroes: Hero[] = []; - - private backend = inject(BackendService); - private logger = inject(Logger); - - async getHeroes() { - // Fetch - this.heroes = await this.backend.getAll(Hero); - // Log - this.logger.log(`Fetched ${this.heroes.length} heroes.`); - return this.heroes; - } -} -``` - -## Creating an injectable service with the CLI - -The Angular CLI provides a command to create a new service. In the following example, you add a new service to an existing application. - -To generate a new `HeroService` class in the `src/app/heroes` folder, follow these steps: - -1. Run this [Angular CLI](/tools/cli) command: - -```sh -ng generate service heroes/hero -``` - -This command creates the following default `HeroService`: - -```ts {header: 'heroes/hero.service.ts (CLI-generated)'} -import {Service} from '@angular/core'; - -@Service() -export class HeroService {} -``` - -The `@Service()` decorator specifies that Angular can use this class in the DI system and that the `HeroService` is available throughout your application. - -Add a `getHeroes()` method that returns the heroes from `mock.heroes.ts` to get the hero mock data: - -```ts {header: 'hero.service.ts'} -import {Service} from '@angular/core'; -import {HEROES} from './mock-heroes'; - -@Service() -export class HeroService { - getHeroes() { - return HEROES; - } -} -``` - -For clarity and maintainability, it is recommended that you define components and services in separate files. - -## Injecting services - -To inject a service into a component, declare a class field for the dependency and use Angular's [`inject`](/api/core/inject) function to initialize it. - -The following example specifies the `HeroService` in the `HeroList`. -The type of `heroService` is `HeroService`. - -```ts -import {inject} from '@angular/core'; - -export class HeroList { - private heroService = inject(HeroService); -} -``` - -It is also possible to inject a service into a component using the component's constructor: - -```ts {header: 'hero-list.ts (constructor signature)'} - constructor(private heroService: HeroService) -``` - -The [`inject`](/api/core/inject) method can be used in both classes and functions, while the constructor method can naturally only be used in a class constructor. However, in both cases, you can only inject a dependency within a valid [injection context](guide/di/dependency-injection-context), typically during the construction or initialization of a component. - -## Injecting services in other services - -When a service depends on another service, follow the same pattern as injecting into a component. -In the following example, `HeroService` depends on a `Logger` service to report its activities: - -```ts {header: 'hero.service.ts, highlight: [[3],[9],[12]]} -import {inject, Service} from '@angular/core'; -import {HEROES} from './mock-heroes'; -import {Logger} from '../logger.service'; - -@Service() -export class HeroService { - private logger = inject(Logger); - - getHeroes() { - this.logger.log('Getting heroes.'); - return HEROES; - } -} -``` - -In this example, the `getHeroes()` method uses the `Logger` service by logging a message when fetching heroes. - -## What's next - - - - - diff --git a/adev/src/context/llms-list.md b/adev/src/context/llms-list.md index 8942066a147..c4e75200353 100644 --- a/adev/src/context/llms-list.md +++ b/adev/src/context/llms-list.md @@ -39,9 +39,9 @@ adev/src/content/guide/signals/resource.md ## Dependency injection -adev/src/content/guide/di/dependency-injection.md -adev/src/content/guide/di/creating-injectable-service.md -adev/src/content/guide/di/dependency-injection-providers.md +adev/src/content/guide/di/overview.md +adev/src/content/guide/di/creating-and-using-services.md +adev/src/content/guide/di/defining-dependency-providers.md adev/src/content/guide/di/lazy-loading-services.md adev/src/content/guide/di/dependency-injection-context.md adev/src/content/guide/di/hierarchical-dependency-injection.md diff --git a/adev/src/llms.txt b/adev/src/llms.txt index 74b0edbe889..10f6153ecff 100644 --- a/adev/src/llms.txt +++ b/adev/src/llms.txt @@ -45,9 +45,8 @@ Angular — Deliver web apps with confidence 🚀 ## Dependency injection (DI) - [Dependency Injection overview](https://angular.dev/guide/di) -- [Understanding Dependency injection](https://angular.dev/guide/di/dependency-injection) -- [Creating an injectable service](https://angular.dev/guide/di/creating-injectable-service) -- [Configuring dependency providers](https://angular.dev/guide/di/dependency-injection-providers) +- [Creating and using services](https://angular.dev/guide/di/creating-and-using-services) +- [Defining dependency providers](https://angular.dev/guide/di/defining-dependency-providers) - [Lazy loading services](https://angular.dev/guide/di/lazy-loading-services) - [Injection context](https://angular.dev/guide/di/dependency-injection-context) - [Hierarchical injectors](https://angular.dev/guide/di/hierarchical-dependency-injection) @@ -94,7 +93,6 @@ Angular — Deliver web apps with confidence 🚀 - [SSR Overview](https://angular.dev/guide/performance) - [Server and hybrid rendering](https://angular.dev/guide/ssr) - [Rendering strategies in Angular](https://angular.dev/guide/routing/rendering-strategies) -- [Hybrid rendering with server routing](https://angular.dev/guide/hybrid-rendering) - [Hydration](https://angular.dev/guide/hydration) - [Incremental Hydration](https://angular.dev/guide/incremental-hydration)