From cbccd368af43d67181cfb521cc64de8a8152ef57 Mon Sep 17 00:00:00 2001 From: yamanerkam Date: Tue, 16 Jun 2026 14:08:16 +0300 Subject: [PATCH] docs: use the @Service decorator in the learn-angular DI tutorial The "Creating an injectable service" tutorial introduced services with `@Injectable({providedIn: 'root'})`, even though the essentials guide and the in-depth dependency injection guides have already moved to the newer `@Service` decorator. This left the tutorial out of step with the rest of the documentation. Update steps 19 and 20 to use `@Service()`. Because `@Service()` is an ergonomic shorthand for `@Injectable({providedIn: 'root'})`, the examples behave identically while teaching the recommended modern API. The step 19 README is reworked to match: it drops the now-unnecessary `providedIn` configuration step and adds a note linking to the in-depth services guide for the `autoProvided: false` opt-out. --- .../README.md | 22 +++++++------------ .../answer/src/app/car.service.ts | 6 ++--- .../src/app/car.service.ts | 2 +- .../answer/src/app/car.service.ts | 6 ++--- .../20-inject-based-di/src/app/car.service.ts | 6 ++--- 5 files changed, 15 insertions(+), 27 deletions(-) diff --git a/adev/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.md b/adev/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.md index ea814015894..6c63cfda239 100644 --- a/adev/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.md +++ b/adev/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.md @@ -10,31 +10,25 @@ In this activity, you'll learn how to create an `injectable` service. One way to use a service is to act as a way to interact with data and APIs. To make a service reusable you should keep the logic in the service and share it throughout the application when it is needed. -To make a service eligible to be injected by the DI system use the `@Injectable` decorator. For example: +To make a class eligible to be injected by the DI system, use the `@Service` decorator. For example: -```ts {highlight:[1,2,3]} -@Injectable({ - providedIn: 'root', -}) +```ts {highlight:[1]} +@Service() class UserService { // methods to retrieve and return data } ``` -The `@Injectable` decorator notifies the DI system that the `UserService` is available to be requested in a class. `providedIn` sets the scope in which this resource is available. For now, it is good enough to understand that `providedIn: 'root'` means that the `UserService` is available to the entire application. +The `@Service` decorator marks the class as a service and notifies the DI system that `UserService` can be accessed anywhere in your application. By default, Angular provides the service across your entire application, so you don't need to write any extra configuration. + +NOTE: By default, `@Service` provides the class at the root injector. If you want to provide it manually, for example, to scope it to a specific route or component, set `autoProvided: false`. Learn more in the [guide on creating and using services](guide/di/creating-and-using-services#using-the-service-decorator). Alright, you try: - -Update the code in `car.service.ts` by adding the `@Injectable` decorator. - - - -The values in the object passed to the decorator are considered to be the configuration for the decorator. -
-Update the `@Injectable` decorator in `car.service.ts` to include the configuration for `providedIn: 'root'`. + +Update the code in `car.service.ts` by adding the `@Service()` decorator to the `CarService` class. TIP: Use the above example to find the correct syntax. diff --git a/adev/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/answer/src/app/car.service.ts b/adev/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/answer/src/app/car.service.ts index 93c3650b657..f0bac319606 100644 --- a/adev/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/answer/src/app/car.service.ts +++ b/adev/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/answer/src/app/car.service.ts @@ -1,8 +1,6 @@ -import {Injectable} from '@angular/core'; +import {Service} from '@angular/core'; -@Injectable({ - providedIn: 'root', -}) +@Service() export class CarService { cars = ['Sunflower GT', 'Flexus Sport', 'Sprout Mach One']; diff --git a/adev/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/src/app/car.service.ts b/adev/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/src/app/car.service.ts index 0ceeaaad191..d518a1292e2 100644 --- a/adev/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/src/app/car.service.ts +++ b/adev/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/src/app/car.service.ts @@ -1,4 +1,4 @@ -import {Injectable} from '@angular/core'; +import {Service} from '@angular/core'; export class CarService { cars = ['Sunflower GT', 'Flexus Sport', 'Sprout Mach One']; diff --git a/adev/src/content/tutorials/learn-angular/steps/20-inject-based-di/answer/src/app/car.service.ts b/adev/src/content/tutorials/learn-angular/steps/20-inject-based-di/answer/src/app/car.service.ts index 93c3650b657..f0bac319606 100644 --- a/adev/src/content/tutorials/learn-angular/steps/20-inject-based-di/answer/src/app/car.service.ts +++ b/adev/src/content/tutorials/learn-angular/steps/20-inject-based-di/answer/src/app/car.service.ts @@ -1,8 +1,6 @@ -import {Injectable} from '@angular/core'; +import {Service} from '@angular/core'; -@Injectable({ - providedIn: 'root', -}) +@Service() export class CarService { cars = ['Sunflower GT', 'Flexus Sport', 'Sprout Mach One']; diff --git a/adev/src/content/tutorials/learn-angular/steps/20-inject-based-di/src/app/car.service.ts b/adev/src/content/tutorials/learn-angular/steps/20-inject-based-di/src/app/car.service.ts index 93c3650b657..f0bac319606 100644 --- a/adev/src/content/tutorials/learn-angular/steps/20-inject-based-di/src/app/car.service.ts +++ b/adev/src/content/tutorials/learn-angular/steps/20-inject-based-di/src/app/car.service.ts @@ -1,8 +1,6 @@ -import {Injectable} from '@angular/core'; +import {Service} from '@angular/core'; -@Injectable({ - providedIn: 'root', -}) +@Service() export class CarService { cars = ['Sunflower GT', 'Flexus Sport', 'Sprout Mach One'];