Routes, suite

Activated

📚 Activated route

Lors d'une navigation, on peut fournir des paramètres à la route qui seront accessibles dans le component de destination.

Il existe 2 types de paramètres :

• Parameterized Route, /recipes/2
  • Déclenche une navigation vers une route qui declare le parametre explicitement
• Query String, /recipes?search=abc
  • Ajoute des informations arbitraire à une route sans affecter le path de la route
• On peut aussi combiner les 2!
  • /recipes/favorites?search=abc

Habituellement, la route identifie une ressource, tandis que la query string ajoute un contexte supplémentaire.

// Parameterized
{ path: 'profile/:email', component: ProfileDetailComponent }

// Query, pas de changement
{ path: 'profile', component: ProfileComponent }

Pour fournir les paramètres, on ajoute les données au routerLink ou router.navigate()

// Parameterized
['/profile', 'a@a']
// ou
'/profile/a@a'

// Query
//  dans le component
router.navigate(['/profile'], {queryParams: {email: 'a@a'}});
//  ou le HTML
[routerLink]="['/profile']" [queryParams]="{email: 'a@a'}"

// On peut sans problème utiliser une EXPRESSION pour alimenter les paramètres

Dans le component, on peut récupérer les paramètres de la route

// On doit injecter la route
constructor(private route: ActivatedRoute) { }

// Puis attendre que notre component soit initialisé
// pour acceder aux données
// Generalement, on reserve l 'initialisation dans le constructeur
// et le traitement de données via Angular dans le ngOnInit
ngOnInit(): void {
  const email = this.route.snapshot.paramMap.get('email');
  console.log(email);
}

Le snapshot de la route est statique est représente la valeur des parametres lors de la navigation initiale, si on modifie les paramètres sans déclencher de navigation(exemple, un paramètre pour un terme de recherche, filtre, tri qui appelle la route actuelle va réutiliser le component) il faut utiliser une méthode asynchrone pour recevoir la valeur des paramètres.

// meme principe pour paramMap ou queryParamMap
this.route.paramMap.subscribe(params => {
  const asyncEmail = params.get('email');
  console.log(asyncEmail);
});

Guarded

📚 Guarded route

Pour restreindre la navigation dans l'application, on peut utiliser le mécanisme de guard et décider si on autorise l'accès à une route ou non.

2 types de guard nous intéressent particulièrement

• canActivate, s'applique sur une seule route
• canActivateChild, s'applique sur une route et la navigation entre les sous-routes. On peut donc regrouper plusieurs routes pour leurs appliquer une validation commune

ng g guard guards/auth --skip-tests

  { path: 'simple', component: MyComponent, canActivate: [MyGuard] },

  { path: '', canActivateChild: [MyChildGuard], children: [
    { path: 'route', component: MyRouteComponent },
    { path: 'other', component: MyOtherComponent },
    { path: 'another/:email', component: AnotherComponent },
  ]}

Dans le guard, on valide ensuite si on autorise ou pas la navigation

export class MyGuard implements CanActivateChild {

  // On peut injecter des dependances au besoin
  constructor(private router: Router) { }

  canActivateChild(
    childRoute: ActivatedRouteSnapshot, 
    state: RouterStateSnapshot
  ): boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree> {
    // Si on retourne true, la navigation a lieu
    if (condition) {
      return true;
    } else {
      // sinon, on peut fournir un URLTree pour rediriger l'utilisateur
      return this.router.parseUrl('/route/...');
    }
  }
}

✅ Recipeasy

• À partir du profil, qui affiche la liste des users, le clic sur un item du tableau doit naviguer vers la page profile-detail qui affiche un utilisateur précis via un paramètre de route.

  • Le AuthService expose findUser()

• Autoriser l'accès aux recettes et profil si l'utilisateur est connecté, sinon rediriger au login

  • Le AuthService offre la propriété isLoggedIn
  • On peut ajouter un constructor au guard pour utiliser l'injection de dependance

Requêtes HTTP

📚 Client HTTP

Le client HTTP facilite la gestion des requêtes HTTP par notre application(verbe, paramètres, données, headers, transformations, interception).

On ajoute le module dans app.module.ts

import { HttpClientModule } from "@angular/common/http";

//...
imports: [
  BrowserModule,
  ReactiveFormsModule,
  AppRoutingModule
  HttpClientModule, // Apres BrowserModule
],
//...

Puis, via l'injection de dépendance, on peut récupérer le client HTTP et effectuer des requêtes

constructor(private http: HttpClient) { }

// ...

this.http.post('http://url.com').subscribe(response => {
  console.log(response);
})

// body est un objet JSON à envoyer par la requête
this.http.post('http://url.com', body, { headers: {'auth' : window.btoa('user:pass')}}).subscribe(response => {
  console.log(response);
})

// Pour utiliser encodage base64, il faut faire croire a TypeScript que l'objet global window existe
declare const window: any

ATTENTION Une requête HTTP n'est lancée que si on lui subscribe!

Si on veut capturer les requêtes OU réponses HTTP globalement dans l'application, il est possible d'appliquer un filtre(un peu comme les guard du routeur) pour valider et traiter les données avant que le processus ne se poursuive.

📚 Interceptors

Observables

📚 Observables

📚 Observables vs Promises

Les Observables sont utilisés pour la gestion de plusieurs tâches traitées de façon asynchrone par Angular(HTTP, Routing, Forms). Il est possible de créer ses propres Observables pour communiquer des données entre différents éléments de notre application.

+------------+               +-------------+
|            |    notifie    |             |
|  Observer  +<--<--<--<--<--+ Observable  |
|            |    (pipe)     |             |
+-----+------+               +------+------+
      |                             ^
      |                             |
      +-----------------------------+
                subscribes

Il est possible d'interagir avec les notifications via les opérateurs RxJS.

📚 RxJS

✅ Recipeasy

• Convertir le AuthService pour exploiter le MarthaService
  • Importer les fichiers queries et dump dans Martha
  • Ajouter les fichiers MarthaService et InsertResult fournis ci-dessous
  • Modifier le login, sign up et liste des utilisateurs du profil pour utiliser l'API Martha
• [ EXTRA ] Utiliser un interceptor pour faire un affichage console de toutes les réponses reçues des requêtes HTTP

👩 Martha

💾 queries.json

💾 dump.sql

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import { InsertResult } from '../models/insert-result.model';

declare const window: any

@Injectable({
  providedIn: 'root'
})
export class MarthaRequestService {
  private readonly username = 'abc';
  private readonly password = 'xyz';

  constructor(private http: HttpClient) { }

  private get headers() {
    return { headers: {'auth' :  window.btoa(`${this.username}:${this.password}`)}};
  }

  private getUrl(query: string) {
    return `http://martha.jh.shawinigan.info/queries/${query}/execute`;
  }

  select(query: string, body: any = null): Observable<any[] | false | null> {
    return this.http.post(this.getUrl(query), body, this.headers).pipe(
      map((response: any) => {
        console.log('Martha select', response);

        if (response.success) {
          return response.data;
        } else {
          return false;
        }
      }),
      catchError(error => {
        console.log('Error', error);

        return of(null);
      })
    );
  }

  insert(query: string, body: any = null): Observable<InsertResult | null> {
    return this.http.post(this.getUrl(query), body, this.headers).pipe(
      map(result => {
        console.log('Martha insert', result);

        return new InsertResult(result);
      }),
      catchError(error => {
        console.log('Error', error);

        return of(null);
      })
    );
  }
}

import {JSONObject, optional, required} from 'ts-json-object'

export class InsertResult extends JSONObject {
  @required
  success!: boolean;

  @optional
  lastInsertId!: number;
}

Internationalisation

📚 i18n

Le mécanisme d'internationalisation d'Angular est très complet mais également imposant à mettre en place. Plus particulièrement, il demande de déployer une version de l'application pour chaque langue et rend difficile de changer la langue dynamiquement à l'exécution.

La librairie ngx-translate nous permets de supporter facilement plusieurs langues dans notre application.

npm install @ngx-translate/core @ngx-translate/http-loader

ℹ️ Tutoriel ngx-translate

Déploiement

📚 Building and serving

📚 Deployment

ng build # --c production
# Voir defaultConfiguration dans angular.json

Le flag produit la version optimisée de notre application de le dossier dist à la racine du projet(par défaut). Ces fichiers sont des artéfacts statiques pouvant être servis par n'importe quel serveur web, assurez-vous de rediriger toutes les requêtes qui auraient menée à un 404 Not Found vers le fichiers index.html de votre application pour gérer les routes via le code client Angular(ex. avec Apache).

Il est possible d'utiliser des variables d'environnement qui seront différentes en développement vs en production(ex: URL de serveur, log de debug);

Certaines librairie, comme ts-json-object, ne sont pas optimisées pour le processus de build Angular. Il faut ajouter une exception dans la configuration du projet dans projects > NOM_PROJET > architect > build > options de angular.json pour indiquer à Angular de les ignorer.

"allowedCommonJsDependencies": [
  "ts-json-object"
],

✅ Recipeasy

• Autoriser la librairie ts-json-object
• Déployer l'app en production
• Tester avec un serveur web à partir de la racine du site compilé npx http-server