Projet Angular

📚 Sommaire des commandes

L'outil en ligne de commande Angular CLI permet d'accelerer et faciliter le developpement avec le framework.

ng new {PROJECT NAME} --standalone=false
# standalone est la nouvelle architecture Angular
# on reste en mode 'classique' pour la session

cd {PROJECT NAME}
# initialise un repo git par defaut, on peut le lier a un remote
# git remote add origin [URL]
# git push -u origin master

ng serve
# VS Code Remote SSH offre le port forwarding
# Donc pas necessaire d'utiliser l'IP de la VM
# localhost de la machine hote redirige dans la VM avec le port

ng serve --port={PORT} --host={IP}
# ng serve offre le live-reload
# VM Minimum 1 CPU, 3 Go RAM
# echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

ng build # angular.json "defaultConfiguration":"production"

ng build -c development --watch # -c Preciser le nom d'une configuration
                                # --watch Rebuild automatiquement si les fichiers changent

ng generate {...}

Hiérarchie des fichiers

angular.json:    Configurations du framework

src/
  styles.css:    Feuille de style globale
  main.ts:       Point d'entree du programme
  index.html:    Fichier HTML racine, cadre de l'application
  assets/:       Ressources(images, pdf, etc.)

src/app/ : Fichiers de code de l'application, architecture ~MVC
  app.module.ts: Configurations du projet
  app.component.(ts, html et css): Controller, View
  xyz.model.ts: Model
  On regroupe les components et models par dossier
  Ce dossier accueillera egalement les autres composants logiciels
  (services, interceptors, etc.)

📚 Ressources Angular

📚 Référence complète

✅ Recipeasy

• Créer un nouveau projet Angular recipeasy avec le Routing.

• Option 1: Installer uniquement Bootstrap

npm install bootstrap

Indiquer à Angular de charger Bootstrap

// angular.json

// projects > {PROJECT NAME} > architect > build > styles
"styles": [
    "src/styles.css",
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
]

• Option 2: Librairie ngx-bootstrap

Actuellement ne fonctionne pas en Angular 17...

Pour faciliter l'utilisation des composants UI de Bootstrap, on peut utiliser le wrapper ngx-bootstrap

ng add ngx-bootstrap
# Consulter la documentation pour la compatibilite avec la version d'Angular

La commande ng add permet d'exploiter le mécanisme de schematics lors de l'ajout d'une dépendance.

Il existe d'autres librairies de composants UI selon vos goûts et besoins, par exemple :

• Google Material
• PrimeNG
• Kendo UI

On peut valider la configuration de Bootstrap en remplaçant le contenu de app.component.html

• Ajouter les composants ngx-bootstrap Tooltip et Datepicker
• RTFM

<h1 class="text-success">Recipeasy!</h1>

<button type="button" 
        class="btn btn-primary"
        tooltip="This is a tooltip!">
        Hover me
</button>

<bs-datepicker-inline></bs-datepicker-inline>

• Démarrer le serveur de développement pour valider.

Components

📚 Les components

Une application Angular est en fait la composition de plusieurs components. Un component racine heberge les autres components qui peuvent a leur tour heberger un ou plusieurs components. Par exemple, l'interface ci-dessous pourrait etre separee selon les components suivants:

• Application
  • Navigation
    • (Menu)
    • (Breadcrumbs)
  • Products List
    • Product Row(on peut reutiliser un component avec differentes donnees)
    • (Pagination)

+------------------------------------------------------+
|------------------------------------------------------+
||  Home  |  Products  |  Users  |           [Log out] |
+---------+------------+-------------------------------+
|                                                      |
| Products > Inventory > Backorder                     |
|                                                      |
| +--------------------------------------------------+ |
| | +---+                                            | |
| | |   | Product A                           12.34$ | |
| | +---+                                            | |
| +--------------------------------------------------+ |
| +--------------------------------------------------+ |
| | +---+                                            | |
| | |   | Product B                           34.56$ | |
| | +---+                                            | |
| +--------------------------------------------------+ |
| +--------------------------------------------------+ |
| | +---+                                            | |
| | |   | Product C                           56.99$ | |
| | +---+                                            | |
| +--------------------------------------------------+ |
|                                                      |
|                  ≤ 1 2 3 ... 9 ≥                     |
+------------------------------------------------------+

Un component permet donc d'associer un comportement(.ts) et un visuel(le template .html) a des balises réutilisables. Par exemple, pour intégrer une liste de produits, je peux céeer un component et l'ajouter à la page:

<app-products-list></app-products-list>

<!-- <app-products-list /> depuis 15.1 -->

Angular interprète ensuite le HTML et injecte le comportement aux endroits nécessaires.

L'utilitaire en ligne de commande simplifie la création des components et leur inscription auprès d'Angular dans app.module.ts.

ng g component {the--component-name} --skip-tests

# On peut regrouper les components dans le dossier app/components
# On peut deplacer le app component dans le dossier et 
# VS Code devrait offrir de mettre a jour les imports

# Pour generer directement dans un sous-dossier
# Pour un component occupant la page entiere via le routing
# il peut etre interessant d'inscrire le type 'page'
ng g component components/sub/directory --type page --skip-tests 

Le préfix app du sélecteur est ajouté automatiquement lors de la génération pour différencier les balises appartenant à notre application.

✅ Recipeasy

Générer les pages login et signup dans le sous-dossier src/app/components

• Afficher les components dans app.component.html
• Déplacer le component app dans le sous-dossier src/app/components

Routing

📚 Router

On peut intégrer les components dans la page mais il serait plus intéressant de pouvoir naviguer d'un component a l'autre.

Dans app-routing.module.ts on retrouve la configuration des routes, ce qui permet d'injecter le bon component dans un page selon l'URL. On doit définir la coquille qui accueillera des components avec la balise :

<router-outlet></router-outlet>

Puis

// On ne precise PAS le / indiquant la racine

{ path: '', component: MyComponent } // route = /

{ path: 'login', component: MyOtherComponent } // route = /login

Pour indiquer a Angular que le routeur doit procéder à la navigation sur le clic des liens en utilisant la propriété suivante à la place du href sur les balises a:

<a routerLink="/route">Naviguer!</a>
<!-- OU -->
<a [routerLink]="['/route']">Naviguer!</a>

<!-- Attention aux liens relatifs VS absolus -->

Il peut être intéressant d'extraire la déclaration des routes, le tableau routes, de app-routing.module.ts pour la mettre dans un fichier distinct app/app.routes.ts.

✅ Recipeasy

Pour avoir un rendu visuel plus intéressant, intégrer le code suivant dans vos components

<div class="fixed-top">
  <div class="row">
    <div class="col text-center">
      <h1>Recipeasy!</h1>
    </div>
  </div>

  <nav class="navbar navbar-expand navbar-dark bg-primary">
    <div class="container-fluid">
      <div class="collapse navbar-collapse justify-content-between">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a href="#" class="nav-link text-light">Recipes</a>
          </li>
        </ul>

        <ul class="navbar-nav">
          <li class="nav-item">
            <a href="#" class="nav-link text-light">Profile</a>
          </li>
          <li>
            <button type="button" class="btn btn-outline-light">Log out</button>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>

<div class="pt-4" style="margin: 112px 0px 24px 0px;">
  <router-outlet></router-outlet>
</div>

<div class="container text-center">
  <div class="row">
    <div class="col-12 col-sm-10 offset-sm-1">
      <form class="row g-3">
          <input type="email" placeholder="Email" class="form-control">

          <input type="password" placeholder="Password" class="form-control">

          <button class="btn btn-primary" type="submit">Sign in</button>

          <a href="/signup" class="btn btn-sm btn-outline-success mt-4" role="button">Sign up</a>
      </form>
    </div>
  </div>
</div>

<div class="container text-center">
  <div class="row">
    <div class="col-sm-10 offset-sm-1 ">
      <form class="row g-3">
        <input type="email" placeholder="Email" class="form-control">

        <input type="password" placeholder="Password" class="form-control">

        <input type="password" placeholder="Password confirmation" class="form-control">

        <button class="btn btn-success" type="submit">Create my account</button>

        <a href="/" class="btn btn-sm btn-outline-secondary mt-4" role="button">Cancel</a>
      </form>
    </div>
  </div>
</div>

• Declarer les routes '' -> LoginComponent et 'signup' -> SignupComponent
  • Extraire la declaration dans app.routes.ts
  • Le routeur-outlet dans app.component.html affichera le bon component selon la route
• Mettre en place la navigation sur les bouton Sign Up et Cancel

Templates

📚 Directives

Les directives augmentent le HTML des templates pour les rendre dynamiques. Elles permettent une interaction, qui peut etre birectionnelle, entre le controleur(.ts) et la vue(.html).

{{ expression }} : Évaluation de l'expression/variable dans le template

#variable : Ajoute une référence locale vers l'élément disponible dans le template uniquement

[property]="expression" : Assigne une propriété, lorsque la valeur de l'expression change la propriété se met à jour(one-way binding)

(event)="expression" : Inscrit un événement à l'élément, l'expression est exécuté lors de l'événement

[(variable)]="expression" : Data-binding bidirectionnel

ngDirective OU ngDirective="valeur" : Associe un comportement à l'élément(form, model)

*directive="expression" : Modifie la structure du DOM(if, for, etc.)

Par exemple, pour afficher le tableau items dans une liste

let items = [
    { id: 1,  isActive: true, image: 'cat.jpg', name: 'Garfield' },
    { id: 2,  isActive: true, image: 'dog.jpg', name: 'Fido' },
    { id: 3,  isActive: false, image: 'bird.jpg', name: 'Tweetie' },
];

<ul>
  <li *ngFor="let item of items">
    <img *ngIf="item.isActive" [src]="item.image">

    {{ item.name }}

    <button (click)="delete(item.id)">X</button>
  </li>
</ul>

Formulaires

📚 Formulaires

Il existe 2 stratégies pour manipuler les formulaires

• Template-driven : Annotations dans le HTML, comportements simples
• Reactive : Déclaration dans le controller, plus flexible

ℹ️ Template vs Reactive

Nous allons nous concentrer sur la méthode Reactive Forms

Ajouter le module dans la app.module.ts

@NgModule({
  imports: [
    // ...
    ReactiveFormsModule // VS Code devrait suggerer le import { ReactiveFormsModule } from '@angular/forms';
  ],
})

Identifier le formulaire et ses éléments dans le HMTL

<form [formGroup]="loginForm">

<input formControlName="email">
<!-- formControlName n'évalue PAS une expression, donc pas de [] -->

Puis établir la correspondance dans le contrôleur

this.loginForm = = new FormGroup({
  email: new FormControl('a@a.com'),
  password: new FormControl('aaaaaaaa')
});

On peut exécuter une méthode du contrôleur lors de l'événement submit

<form ... (ngSubmit)="logIn()">

On peut récupérer les valeurs du formulaire

console.log( this.loginForm.value );
// value est un objet JSON, donc on peut lire une propriété précise avec value.xyz

// Ou les contrôles individuellement
const control = this.loginForm.controls.email;
// puis manipuler l'element, control.xyz();
console.log( control.value );

✅ Recipeasy

• Ajouter le module ReactiveForms au projet
• Intercepter la soumission du formulaire login
  • Récupérer et afficher ses valeurs dans la console/alerte
• Intercepter la soumission du formulaire sign up
  • Récupérer et afficher ses valeurs dans la console/alerte

Validations des formulaires

📚 Validation Reactives

A la création du FormControl ou du FormGroup, on peut préciser les validations à appliquer

• Attention On peut appliquer les validations sur un champ ou sur le formulaire pour vérifier une concordance entre plusieurs champs

new FormControl(null, [Validators.required, Validators.email, ...])
// Le 1er parametre est la valeur initiale du contrôle

Il est également possible d'utiliser une fonction de validation personnalisée en fournissant un item qui répond à l'interface ValidatorFn

Ensuite dans le template on peut vérifier le statut d'un FormControl ou FormGroup, voir leur super classe AbstractControl pour toutes les propriétés et méthodes.

formOrControl.valid
formOrControl.invalid
formOrControl.errors

formOrControl.dirty   // la valeur a changée via le UI
formOrControl.touched // le champ a été focus puis quitté

form.get('myFormControlName')?.xyz // Recuperer un form control du form
// peut etre null, donc ? pour le chaînage optionel

On peut exploiter les variables locales des templates pour récupérer si le formulaire à été soumis

<form #form="ngForm">
  <!-- form.submitted est disponible dans les expressions -->
  <div [class.is-invalid]="form.submitted">
    ...
  </div>
</form>

✅ Recipeasy

• Appliquer des validations sur les formulaires login et sign up
• Utiliser le mécanisme d'erreurs de Bootstrap
  • On peut alterner la présence de la classe is-invalid avec le Class Binding

<!-- 
  Un input possedant la classe is-invalid suivi du bloc 
  invalid-feedback pour afficher l'erreur 
-->
<div>
  <!-- Attention d'encapsuler dans un bloc -->
  <input class="form-control is-invalid">
  <div class="invalid-feedback text-start">
    Message
  </div>
</div>

• Désactiver le bouton sign up si le formulaire est invalide

• Exploiter les validations sur plusieurs champs pour valider que la confirmation du mot de passe correspond au mot de passe dans le sign up

private passwordMatch(form: AbstractControl): ValidationErrors | null {
  // AbstractControl est la super classe des FormGroup ET FormControl
  // attention sur lequel la validation personnalisée est appliquée

  if (form.value?.password != form.value?.passwordConfirmation) {
    return { passwordConfirmationMustMatch: true };
  } else {
    return null
  }
}

Services

📚 Injection de dépendance

On vise a simplifier l'instantiation de ressources partagées. Plutôt que de devoir nous-même créer manuellement ces objets, le framework fournit un mécanisme pour les récupérer facilement. Les instances de services sont des Singleton.

ng g service services/{the-name} --skip-tests

On peut ensuite injecter la dépendance via les constructor

constructor(private authService: AuthService) {
  // Le mot-clé private est un raccourci 
  // pour créer un membre de classe au même moment
}

Injection de dépendances

L'injection de dépendance permet à différents composants de l'application d'intéragir entre eux ou avec des mécanismes du framework(Router, Client HTTP, Services, DOM, etc.). C'est le framework qui gère l'instantiation des objets injectés et les rends disponibles lorsque demandés.

Par exemple, on peut manipuler la navigation dans les contrôleur TypeScript via le Router

@Component({
    selector: 'app-demo'
})
export class DemoComponent implements OnInit {
    constructor(private router: Router) { }

    clicked() {
        this.router.navigate(['/some/route']);
    }
}

✅ Recipeasy

• Créer les fichiers user.model.ts et user-credentials.ts dans le sous-dossier models à partir du code fourni
• Générer le AuthService dans le sous-dossier services et intégrer le code fourni ci-dessous
• Pour faciliter la manipulation du JSON, nous ajoutons la librairie ts-json-object.
• Créer la page recipes et mettre à jour les routes

Code

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

export class UserCredentials extends JSONObject {
  @required
  @custom((user: UserCredentials, key:string, value: string) => {
    return value.toLowerCase();
  })
  email!: string;

  @required
  password!: string;
}

import { custom, JSONObject, required } from "ts-json-object";

export class User extends JSONObject {
  @required
  @custom((user: User, key:string, value: string) => {
    return value.toLowerCase();
  })
  email!: string;
}

private readonly CURRENT_USER_KEY = 'recipeasy.currentUser';
private readonly USERS_KEY = 'recipeasy.users';

private _currentUser : User | null = null;

get currentUser(): User | null {
  return this._currentUser;
}

get isLoggedIn(): boolean {
  return !!this._currentUser;
}

get users(): User[] {
  return this.usersCredentials.map(userCredentials => new User(userCredentials));
}


private get usersCredentials(): UserCredentials[] {
  let usersCredentials : UserCredentials[] = [];
  const storedUsers = JSON.parse(localStorage.getItem(this.USERS_KEY) ?? 'null');

  if (storedUsers) {
    usersCredentials = (storedUsers as UserCredentials[]).map(obj =>
      new UserCredentials(obj)
    );
  }

  return usersCredentials;
}

constructor() {
  const storedCurrentUser = JSON.parse(localStorage.getItem(this.CURRENT_USER_KEY) ?? 'null');

  if (storedCurrentUser) {
    this._currentUser = new User(storedCurrentUser);
  }
}

private setCurrentUser(user: User | null) {
  this._currentUser = user;
  localStorage.setItem(this.CURRENT_USER_KEY, JSON.stringify(user));
}

private emailExists(email: string): boolean {
  return !!this.usersCredentials.find(credentials =>
    credentials.email == email
    );
}

findUser(email: string): User | null {
    return this.users.find(user =>
        user.email == email.toLowerCase()
    ) ?? null;
}

logIn(credentials: UserCredentials): boolean {
  const validUser = this.usersCredentials.find(userCredentials =>
    userCredentials.email == credentials.email && userCredentials.password == credentials.password
  );

  if (validUser) {
    this.setCurrentUser(new User(validUser))
  }

  return !!validUser;
}

signUp(credentials: UserCredentials): boolean {
  if (this.emailExists(credentials.email)) {
    return false;
  } else {
    let usersCredentials = this.usersCredentials;

    usersCredentials.push(credentials);
    localStorage.setItem(this.USERS_KEY, JSON.stringify(usersCredentials));

    this.setCurrentUser(new User(credentials))

    return true;
  }
}

logOut() {
  this.setCurrentUser(null);
}

Fonctionnalités

• Utiliser le AuthService pour implémenter la fonctionnalité de connexion de l'application
  • Afficher à l'utilisateur si les informations de connexion sont invalides(la méthode logIn retourne false)
  • *ngIf pour modifier la structure de la page selon une condition

<!-- https://getbootstrap.com/docs/5.1/components/alerts/ -->
<div class="alert alert-danger" role="alert">
  Message
</div>

• Utiliser le AuthService pour implémenter la fonctionnalité d'inscription de l'application

  • Afficher à l'utilisateur si le email est deja utilisé(la methode signUp retourne false)
    

• Sur un login/sign up valide, rediriger vers la route /recipes qui presente le composant recipes

• Implémenter l'événement click du bouton Log out qui déconnecte l'utilisateur courant et redirige à la racine(le login)

Communication entre les components

📚 Inputs/Outputs

On peut declarer des propriétés dans un component qui seront visible via la balise HTML permettant au component parent d'envoyer des donnees.

Input

Dans le contrôleur, on declare un membre de classe en ajoutant l'annotation @Input()

@Input() myInput: string; // Le type peut etre un objet

Puis dans la balise HTML, le parent peut fournir la donnée

<app-demo-component [myInput]="expression"></app-demo-component>

Output

Dans la même logique, on peut définir un événement qui peut etre alimenté par un component auxquel s'enregistre le component parent

Dans le contrôleur, on déclare un membre de classe en ajoutant l'annotation @Output()

@Output() readonly myOutput = new EventEmitter();

//Puis pour déclencher l'événement
myOutput.emit(paramOptionnel) // le parametre peut servir à ajouter une valeur à l'événement

Puis dans la balise HTML, le parent peut écouter l'événement

<app-demo-component (myOutput)="expression"></app-demo-component>

<!-- Pour récuperer le paramètre, on utilise la variable $event -->
<app-demo-component (myOutput)="myFunction($event)"></app-demo-component>

On peut sans problème combiner un ou plusieurs Input et Output sur un même component!

✅ Recipeasy

• Ajouter la page profile
  • Créer la route /profile
• Naviguer vers /profile via la barre de navigation

• Le profile affiche l'utilisateur actuel via la JsonPipe
  
  

• À partir du profile, afficher la liste de tous les utilisateur existants via le getter users du AuthService en encapsulant la liste dans le component users-list et chaque item de la liste dans users-list-item

• Créer les components users-list et users-list-item

Users list affiche un tableau via *ngFor.

• Utiliser *ngIf pour gérer un layout alternatif s'il n'y a qu'un user dans le système, sinon afficher le tableau

<table class="table table-hover">
    <thead>
        <tr> <th scope="col">Email</th> </tr>
    </thead>
    <tbody>
        <!-- 
          Les tableau Bootstrap doivent respecter la hierarchie table > tr > td 
          donc il faut indiquer au tr de se comportant EN TANT QUE users-list-item
          en modifiant le selector du component dans le controller .ts pour [app-user-list-item]
          et ensuite ajouter cet attribut sur le tr
        -->
        <tr *ngFor="let user of users" app-users-list-item [user]="user" (userClicked)="userClicked($event)"></tr>
    </tbody>
</table>

Users list item affiche un élément de la liste reçu via un input

• Un bouton offre l'événement click
• Le click est propagé à la liste qui affiche la valeur sélectionnée dans une alert

<td>
    <button (click)="clicked()" type="button" class="btn btn-sm btn-warning">Click!</button>
    {{ user.email }}
</td>