Use inject instead of constructor

Author: Ocunidee

docs/src/components/README.md

@@ -59,7 +59,7 @@ Angular provides lifecycle hook methods to tap into key events in the lifecycle
 
 - `ngOnChanges`: called after the constructor and every time input values change. The method receives a SimpleChanges object of current and previous property values.
 
-- `ngOnInit`: called only once. This is where the **component's initialisation** should take place, such as **fetching intial data**. Indeed components should be cheap to construct, so costly operations should be kept out of the constructor. The constructor should do no more than set the initial local variables to simple values.
+- `ngOnInit`: called only once. This is where the **component's initialisation** should take place, such as **fetching initial data**. Indeed components should be cheap to construct, so costly operations should be kept out of the constructor. The constructor should do no more than set the initial local variables to simple values.
 
 - `ngDoCheck`: called immediately after `ngOnChanges` on every change detection run, and immediately after `ngOnInit` on the first run. Gives an opportunity to implement a custom change detection algorithm.
 

docs/src/fr/pipes/README.md

@@ -83,18 +83,18 @@ Le premier argument de la méthode `transform` est la valeur sur laquelle le pip
 
 Le nom du pipe doit être en lowerCamelCase. C'est une bonne pratique de le faire commencer par les initiales de votre application, tout comme pour le sélecteur de vos composants.
 
-Comme toute autre classe, les pipes peuvent utiliser leur constructeur pour bénéficier de l'injection de dépendances. Il est possible d'injecter un autre pipe par exemple. Ceci est particulièrement utile lorsqu'un pipe intégré doit être utilisé dans toute l'application avec les mêmes paramètres. Un pipe personnalisé peut servir de wrapper afin de simplifier l'utilisation d'un pipe intégré.
+Comme toute autre classe, les pipes peuvent bénéficier de l'injection de dépendances. Il est possible d'injecter un autre pipe par exemple. Ceci est particulièrement utile lorsqu'un pipe intégré doit être utilisé dans toute l'application avec les mêmes paramètres. Un pipe personnalisé peut servir de wrapper afin de simplifier l'utilisation d'un pipe intégré.
 
 Dans l'exemple suivant, le prix remisé est calculé en fonction d'un taux de remise. Aucune donnée du catalogue dans le composant n'est mutée pour afficher le nouveau prix.
 
 <iframe height='500' width='100%' src="https://stackblitz.com/fork/github/ocunidee/atpw-custom-pipe/tree/master?ctl=1&embed=1&file=src/app/discounted.pipe.ts&hideNavigation=1&title=Custom%20pipe"></iframe>
 
 ## Utiliser un pipe en dehors d'un template
 
-Il est également possible d'utiliser des pipes dans une classe de composant en l'injectant dans son constructeur et en appelant sa méthode transform. Le pipe doit alors être ajouté aux providers du composant ou de l'*ApplicationConfig*. Lorsqu'un pipe n'est pas utilisé dans le template, il n'a pas besoin d'être présent dans le tableau des imports du composant.
+Il est également possible d'utiliser des pipes dans une classe de composant en l'injectant et en appelant sa méthode transform. Le pipe doit alors être ajouté aux providers du composant ou de l'*ApplicationConfig*. Lorsqu'un pipe n'est pas utilisé dans le template, il n'a pas besoin d'être présent dans le tableau des imports du composant.
 
 ```ts
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
 import { UpperCasePipe } from '@angular/common'
 
 @Component({
@@ -104,8 +104,7 @@ import { UpperCasePipe } from '@angular/common'
   providers: [ UpperCasePipe ]
 })
 export class AppComponent {
-
-  constructor(private upperCasePipe: UpperCasePipe) {}
+  private upperCasePipe = inject(UpperCasePipe)
 
   title = this.upperCasePipe.transform('title')
 }

docs/src/fr/routing/README.md

@@ -360,20 +360,19 @@ Le service `ActivatedRoute` décrit l'état actuel du *router*. Grâce à lui, l
 `paramMap` et `queryParamMap` sont des Observables, une notion que nous verrons plus en détail dans un chapitre ultérieur. Un Observable permet d'observer comment les informations évoluent dans le temps. Le service `ActivatedRoute` fournit également une propriété `snapshot` pour obtenir uniquement l'état du routeur à un moment donné. Cette propriété est suffisante pour couvrir la plupart des cas.
 
 Pour extraire un paramètre d'une route, deux étapes sont nécessaires :
-1. Injectez le service `ActivatedRoute` dans le constructeur du composant qui en a besoin
+1. Injectez le service `ActivatedRoute` dans le composant qui en a besoin
 2. Récupérez le paramMap depuis le snapshot dans le hook de cycle de vie `OnInit`
 
-```ts{10,13}
-import { Component, OnInit } from '@angular/core'
+```ts{9,12}
+import { Component, OnInit, inject } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 
 @Component({
   selector: 'app-example',
   templateUrl: './exemple.component.html'
 })
 export class ExampleComponent implements OnInit {
-
-  constructor(private route: ActivatedRoute) {}
+  private route = inject(ActivatedRoute)
 
   ngOnInit(): void {
     const id: string = this.route.snapshot.paramMap.get('id')
@@ -387,9 +386,9 @@ Revenons à l'application *Personal Library*. Avec l'aide de `ActivatedRoute`, m
 ```ts
 // book-details.component.ts
 export class BookDetailsComponent implements OnInit {
-  details: BookDetail | null
+  private route = inject(ActivatedRoute)
 
-  constructor(private route: ActivatedRoute) {}
+  details: BookDetail | null
 
   ngOnInit(): void {
     const id = this.route.snapshot.paramMap.get('id')
@@ -399,9 +398,9 @@ export class BookDetailsComponent implements OnInit {
 
 // author-details.component.ts
 export class AuthorDetailsComponent implements OnInit {
-  details: AuthorDetail | null
+  private route = inject(ActivatedRoute)
 
-  constructor(private route: ActivatedRoute) {}
+  details: AuthorDetail | null
 
   ngOnInit(): void {
     const id = this.route.snapshot.paramMap.get('id')
@@ -421,7 +420,7 @@ Qu'est-ce que ça veut dire ? Si vous ne permettez la navigation vers la même r
 ### Service Router
 
 Parfois, il est nécessaire de déclencher certaines actions avant le routage. C'est ce qui se passe lorsque nous cliquons sur un bouton de connexion. Tout d'abord, un appel http est effectué et en fonction de la réponse, le routage a lieu. Le service `Router` permet de déclencher la navigation depuis la classe du composant.
-1. Injecter le service 'Router' via le constructeur
+1. Injecter le service 'Router' via la mtéthode *inject*
 2. Utilisez la méthode `navigateByUrl` pour déclencher la navigation. `navigateByUrl` prend toujours un chemin absolu. Si vous souhaitez utiliser un chemin relatif, utilisez plutôt la méthode `navigate`.
 
 ```ts{6,9}
@@ -430,7 +429,7 @@ Parfois, il est nécessaire de déclencher certaines actions avant le routage. C
   templateUrl: './example.component.html'
 })
 export class ExampleComponent {
-  constructor(private router: Router) {}
+  private router =inject(Router)
 
   navigatePostLogin(): void {
     this.router.navigateByUrl('/dashboard')

docs/src/fr/services/README.md

@@ -23,21 +23,18 @@ export class ExampleService {
 }
 ```
 
-Lorsqu'un composant nécessite un service, le service doit être ajouté à son constructeur de la manière suivante :
+Lorsqu'un composant nécessite un service, le service doit être injecté de la manière suivante :
 
-```ts{11}
-import { Component } from '@angular/core'
+```ts{1, 9}
+import { Component, inject } from '@angular/core'
 import { ExampleService } from '@services/example.service'
 
 @Component({
   selector: 'app-example',
   templateUrl: './example.component.html'
 })
 export class ExampleComponent {
-
-  constructor(
-    private exampleService: ExampleService
-  ) {}
+  private exampleService = inject(ExampleService)
 }
 ```
 
@@ -53,7 +50,7 @@ Au démarrage, Angular crée un injecteur à l'échelle de l'application. Si d'a
 
 Vous ne l'avez peut-être pas réalisé, mais nous avons déjà fait appel à des fournisseurs. Dans le chapitre sur les pipes, pour utiliser le `UpperCasePipe` dans la classe du composant plutôt que dans le template, nous l'avons ajouté au tableau des providers du composant.
 
-Lorsque Angular découvre qu'un composant dépend d'un service, il vérifie d'abord si l'injecteur a une instance existante de ce service. Si une instance du service demandé n'existe pas encore, l'injecteur en crée une à l'aide du provider enregistré et l'ajoute à l'injecteur avant de renvoyer le service à Angular. Lorsque tous les services demandés ont été résolus et renvoyés, Angular peut appeler le constructeur du composant avec ces services comme arguments.
+Lorsque Angular découvre qu'un composant dépend d'un service, il vérifie d'abord si l'injecteur a une instance existante de ce service. Si une instance du service demandé n'existe pas encore, l'injecteur en crée une à l'aide du provider enregistré et l'ajoute à l'injecteur avant de renvoyer le service à Angular. Lorsque tous les services demandés ont été résolus et renvoyés, Angular peut instancié le composant avec ces services.
 
 Les dépendances peuvent être fournies à trois niveaux :
 - **au niveau root:** c'est le comportement par défaut lors de la création d'un service avec le CLI. C'est ce que signifie `providedIn: 'root'`. La *même instance* de la dépendance est injectée partout où elle est nécessaire comme s'il s'agissait d'un singleton.
@@ -117,15 +114,15 @@ inject(Router).createUrlTree(['/login'], { queryParams: { returnUrl: state.url }
 
 Dans une Single Page Application (SPA), la communication avec le serveur se fait via des requêtes HTTP asynchrones (AJAX) ou des protocoles plus spécialisés tels que WebSocket. Nous allons voir comment faire ces requêtes réseau depuis une application Angular.
 
-Angular fournit un module, le `HttpClientModule`, pour effectuer des appels HTTP. Le module fournit un service injectable, le `HttpClient`, pour faire des requêtes GET, POST, PATCH, DELETE et PUT. Pour injecter le `HttpClient` dans un service, ajoutez d'abord le `HttpClientModule` au tableau `imports` de `AppModule`.
+Angular fournit un module, le `HttpClientModule`, pour effectuer des appels HTTP. Le module fournit un service injectable, le `HttpClient`, pour faire des requêtes GET, POST, PATCH, DELETE et PUT. Pour injecter le `HttpClient` dans un service, ajoutez d'abord le `HttpClientModule` au tableau de `providers` de l'application dans le fichier `app.config.ts` en lui passant la fonction `provideHttpClient()`.
 
 Voici quelques exemples:
 
 <CodeGroup>
 <CodeGroupItem title="Service">
 
 ```ts
-import { Injectable } from '@angular/core'
+import { Injectable, inject } from '@angular/core'
 import { HttpClient } from '@angular/common/http'
 import { Observable } from 'rxjs'
 import { User } from '@models/user/user'
@@ -136,19 +133,19 @@ import { UserEdition } from '@models/user/user-edition'
   providedIn: 'root'
 })
 export class UserService {
-  private baseUrl = 'api/backoffice/users'
+  private httpClient = inject(HttpClient)
 
-  constructor(private httpClient: HttpClient) {}
+  private baseUrl = 'api/backoffice/users'
 
-  public create(user: UserCreation): Observable<User> {
+  create(user: UserCreation): Observable<User> {
     return this.httpClient.post<User>(this.baseUrl, user)
   }
 
-  public update(ref: string, user: UserEdition): Observable<User> {
+  update(ref: string, user: UserEdition): Observable<User> {
     return this.httpClient.put<User>(`${this.baseUrl}/${ref}`, user)
   }
 
-  public getByUserReference(ref: string): Observable<User> {
+  getByUserReference(ref: string): Observable<User> {
     return this.httpClient.get<User>(`${this.baseUrl}/${ref}`)
   }
 }
@@ -157,7 +154,7 @@ export class UserService {
 <CodeGroupItem title="Component">
 
 ```ts
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
 import { User } from '@models/user/user'
 import { UserService } from '@services/user.service'
 
@@ -166,11 +163,11 @@ import { UserService } from '@services/user.service'
   templateUrl: './user.component.html'
 })
 export class UserComponent {
+  private userService = inject(UserService)
+
   user: User | undefined = undefined
   reference = ''
 
-  constructor(private userService: UserService) {}
-
   getUser(): void {
     this.userService.getByUserReference(this.reference))
       .subscribe(user => this.user = user)
@@ -306,10 +303,9 @@ Prenez note du token dans la `UserResponse`, il servira à authentifier l'utilis
 <CodeGroupItem title="authentication.service.ts">
 
 ```ts
+private httpClient = inject(HttpClient)
 private baseUrl = 'api/user'
 
-constructor(private httpClient: HttpClient) {}
-
 login(loginRequest: LoginRequest): Observable<UserResponse> {
   return this.httpClient.post<UserResponse>(`${this.baseUrl}/login`, loginRequest)
 }
@@ -334,11 +330,9 @@ register(loginRequest: LoginRequest): Observable<UserResponse> {
 <CodeGroupItem title="login-form.component.ts">
 
 ```ts
-constructor(
-  private router: Router,
-  private activatedRoute: ActivatedRoute,
-  private authenticationService: AuthenticationService
-) {}
+private router = inject(Router)
+private activatedRoute = inject(ActivatedRoute)
+private authenticationService = inject(AuthenticationService)
 
 login(): void {
   this.authenticationService.login(this.loginRequest)

docs/src/pipes/README.md

@@ -91,10 +91,10 @@ In the following example, the discounted price is calculated given a discount ra
 
 ## Using a pipe outside the template
 
-It is also possible to use pipes in a component class by injecting it in its constructor and calling its transform method. The pipe needs to be added to the providers array of the component decorator or *ApplicationConfig*. When not used in the template, the pipe doesn't need to be present in the imports array of the component decorator.
+It is also possible to use pipes in a component class by injecting via the *inject* method and calling its transform method. The pipe needs to be added to the providers array of the component decorator or *ApplicationConfig*. When not used in the template, the pipe doesn't need to be present in the imports array of the component decorator.
 
 ```ts
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
 import { UpperCasePipe } from '@angular/common'
 
 @Component({
@@ -104,8 +104,7 @@ import { UpperCasePipe } from '@angular/common'
   providers: [ UpperCasePipe ]
 })
 export class AppComponent {
-
-  constructor(private upperCasePipe: UpperCasePipe) {}
+  private upperCasePipe = inject(UpperCasePipe)
 
   title = this.upperCasePipe.transform('title')
 }

docs/src/routing/README.md

@@ -360,20 +360,19 @@ The `ActivatedRoute` service describes the current state of the *router*. Throug
 `paramMap` and `queryParamMap` are Observables, a notion we will see more in detail in a later chapter. Observable allows to observe how information change over time. The `ActivatedRoute` service also provides a `snapshot` property to only get the state of the router at a given point in time. This property is enough to cover most cases.
 
 To extract a parameter from a route, two steps are required:
-1. Inject the `ActivatedRoute` service in the constructor of the component needing it
+1. Inject the `ActivatedRoute` service in the component needing it
 2. Retrieve the paramMap from the snapshot in the `OnInit` lifecycle hook
 
-```ts{10,13}
-import { Component, OnInit } from '@angular/core'
+```ts{9,12}
+import { Component, OnInit, inject } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 
 @Component({
   selector: 'app-example',
   templateUrl: './exemple.component.html'
 })
 export class ExampleComponent implements OnInit {
-
-  constructor(private route: ActivatedRoute) {}
+  private route = inject(ActivatedRoute)
 
   ngOnInit(): void {
     const id: string = this.route.snapshot.paramMap.get('id')
@@ -387,9 +386,9 @@ Let's go back to the *Personal Library* app. With the help of the `ActivatedRout
 ```ts
 // book-details.component.ts
 export class BookDetailsComponent implements OnInit {
-  details: BookDetail | null
+  private route = inject(ActivatedRoute)
 
-  constructor(private route: ActivatedRoute) {}
+  details: BookDetail | null
 
   ngOnInit(): void {
     const id = this.route.snapshot.paramMap.get('id')
@@ -399,9 +398,9 @@ export class BookDetailsComponent implements OnInit {
 
 // author-details.component.ts
 export class AuthorDetailsComponent implements OnInit {
-  details: AuthorDetail | null
+  private route = inject(ActivatedRoute)
 
-  constructor(private route: ActivatedRoute) {}
+  details: AuthorDetail | null
 
   ngOnInit(): void {
     const id = this.route.snapshot.paramMap.get('id')
@@ -421,7 +420,7 @@ What does it mean ? If you only allow the navigation to the same route via the a
 ### Router service
 
 Sometimes, it is necessary to trigger some actions before routing. This is what happens when we click on a login button. First, an http call is made and depending on the response, routing takes place. The `Router` service allows to trigger navigation from the component class.
-1. Inject the `Router` service via the constructor
+1. Inject the `Router` service via the inject method
 
 2. Use the `navigateByUrl` method to trigger the navigation. `navigateByUrl` always takes an absolute path. In case you would like to user a relative path, use the `navigate` method instead.
 
@@ -431,7 +430,7 @@ Sometimes, it is necessary to trigger some actions before routing. This is what
   templateUrl: './example.component.html'
 })
 export class ExampleComponent {
-  constructor(private router: Router) {}
+  private router = inject(Router)
 
   navigatePostLogin(): void {
     this.router.navigateByUrl('/dashboard')