,

Angular 5 (Component, Template, Modèle et Service)

Angular4 une introduction : component service template controleur API REST

L’objectif de ce tutoriel est de communiquer avec l’API REST développée préalablement grâce à une application Angular 5 (LTS).

Note : si vous n’avez pas d’API REST fonctionnelle, pensez à JSON-SERVER. Vous pourrez, en quelques minutes, exécuter un serveur de développement RESTful.

Récit utilisateur proposé

  • En tant qu’utilisateur anonyme, j’aimerais envoyer un commentaire afin de donner mon opinion.

Créer un nouveau projet Angular

La première étape consiste à créer un nouveau projet Angular grâce à l’outil Angular-cli :

Le modèle

Entreposer les données

Il est aussi pertinent de créer un modèle qui contiendra les informations du commentaire.

Le modèle aura les attributs publiques suivants :

  • le texte du commentaire
  • la date de création
  • l’identifiant de l’utilisateur

Ce modèle correspond à une classe, donc un nouveau type. Il sera utilisé par le component, le template ainsi que pour transmettre les données au service.

Créons la nouvelle classe :

Voici le code de la nouvelle classe qui sera utilisée comme modèle :

1
2
3
4
5
6
7
export class Comment {
  constructor(
   public body: string,
   public user_id: number,
   public created_at: date,
  ) { }
}

Le component

Interaction avec l’utilisateur

À propos des components

Les components sont les éléments fondamentaux d’une application Angular. Ils permettent d’afficher les données à l’écran, écouter les événements générés par l’utilisateur et lancer des actions basées sur ces événements.

Le component sera composé d’un contrôleur (.ts) ainsi que d’un formulaire (.html) muni d’un champ de texte et d’un bouton soumettre.

Le component aura besoin d’un service pour envoyer les données du modèle au serveur. Le service CommentService, sera injecté par injection de dépendance. Le service sera créé un peu plus tard.

L’objectif est donc de créer un component qui pourra gérer le formulaire HTML qui permettra à l’utilisateur d’envoyer un commentaire au serveur via le service.

Le component peut donc être créé à partir de la ligne de commande suivante :

  • g : raccourci pour generate
  • c : raccourci pour component

Après l’exécution de cette commande, un nouveau dossier sera créé dans la structure du projet.

Vous y trouverez 4 fichiers :

  • post-comment.component.ts – le contrôleur format TypeScript.
  • post-comment.component.spec.ts – les tests Jasmine reliés au component.
  • post-comment.component.html – le template est un mélange de HTML et de HTML augmenté par Angular.
  • post-comment.comment.css – la feuille de style pour le component.

La vue ou template du component

Présentation à l’utilisateur

Regardons maintenant le code HTML du template (.html). On y retrouve un formulaire HTML standard ainsi que quelques ajouts propres à Angular comme ngForm.

À propose de ngForm

Afin d’utiliser ngForm, le module de gestion des formulaire Angular, il faudra l’enregistrer (faire un import) à partir du @NgModule (fichier app.module.ts).

La balise form

Voici un exemple de la balise form proposée :

1
<form (ngSubmit)="onSubmit()" #commentForm="ngForm">

  • (ngSubmit): défini la méthode utilisée pour gérer la soumission du formulaire.
  • #commentForm: déclare une variable de type ‘template reference‘. Cette variable permet un accès directe à un élément du  template. Notez que la variable débute par le signe #.

Réinitialiser le formulaire avec la méthode .reset()

Afin de réinitialiser le formulaire, commentForm.reset() pourrait être utilisé lorsque la méthode onSubmit a bien été appelée.

1
<form (ngSubmit)="onSubmit(); commentForm.reset();" #commentForm="ngForm">

La balise input

Analysons maintenant le champ input du formulaire. C’est dans ce champ que l’utilisateur pourra définir le texte de son commentaire. Les attributs HTML suivants : type, id, name et placeholder sont standards.

Voici le détail de la balise input :

1
2
3
4
5
6
7
<input type="text"
    id="body"
    name="body"
    placeholder="Commentaire"
    required
    #body="ngModel"
    [(ngModel)]="model.body" />

Vous avez sûrement identifié les particularités de Angular :

  • #body= »ngModel » : défini une variable body qui sera accessible dans le template. Cette variable pointe vers un ngModel, donc vers le contenu du champ de texte.
  • [(ngModel)]= »model.body »: Défini un ‘two-way data binding‘ sur l’attribut body du modèle. Cela signifie que si le champ est modifié par l’utilisateur, le modèle sera mis à jour automatiquement et si le code modifie le modèle, le contenu du champ sera mis à jour.

Par exemple, l’attribut hidden (élément caché) aura la valeur true ou false en fonction de l’expression évaluée (voir #body).

On pourrait donc cacher le message d’erreur si le modèle est valide.

1
[hidden]="body.valid"

En savoir plus sur le data-binding

  • https://angular.io/guide/template-syntax#binding-targets

À propos du input ainsi que du template reference

  • https://angular.io/guide/user-input
  • https://angular.io/guide/template-syntax#ref-vars

Property binding ( [property] )

  • [disabled]
  • [hidden]
  • [src]

Il est aussi possible de définir des valeurs d’attributs HTML à partir d’expressions Angular.

1
[disabled]="isUnchanged"

D’autres expressions sont automatiquement gérés par ngForm.

  • .touched
  • .dirty
  • .valid
  • .pristine

En savoir plus sur le changement d’état du modèle

  • https://angular.io/guide/forms#track-control-state-and-validity-with-ngmodel

La balise button

Il ne reste plus qu’à ajouter le bouton pour soumettre le formulaire afin de compléter le template de base.

Il serait pertinent d’activer le bouton seulement si le formulaire est valide.

La méthode onSubmit du component

Retournons à notre contrôleur. Nous pouvons donc créer la méthode onSumit() qui sera appelée lorsque le formulaire aura été soumis par l’utilisateur.

Prenez le temps de lire le code tout en sachant qu’un peu de théorie sur le patron de conception Observable sera bien utile (des références sont fournies un peu plus loin). La classe CommentService sera créé dans la prochaine section.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
onSubmit() {
   this.commentService.postComment(this.model).subscribe(
      comment => this.onNext(comment),
      error => console.log(error),
      () => this.onComplete()
    );
}
onNext(comment) {
    this.model = comment;
    console.log('Success Response : ' + comment.body );
}
onComplete() {
    // Si angular4-toaster est installé
    this.toasterService.pop('success', 'Commentaire', 'Ajouté avec succès');
}

La méthode subscribe() permet d’écouter le flux d’événements d’un Observable. Cette méthode supporte trois paramètres: next, error et complete. Il est donc possible de lui fournir des fonctions de callback.

  • next: les données sont disponibles.
  • error : une erreur est survenue.
  • complete: le flux de données a été complété avec succès.

Afin de libérer les ressources, il serait aussi important de se désinscrire à l’Observable avec la méthode unsuscribe().

Références sur la classe Observable de la librairie rxjs

  • http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html
  • http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-subscribe

Le service

Interagir avec l’API REST

La prochaine étape consiste à créer un service qui aura pour mandat de soumettre les données du commentaire grâce à une requête POST envoyée à l’API REST.

La logique sera encapsulée dans la méthode postComment(). Cette méthode retournera un objet Observable sur un commentaire. Comme nous l’avons vu préalablement, le Component s’est inscrit à cet observable avec la méthode subscribe() afin d’être informé du flux d’information entre le service et l’API REST. En fait, ce qui nous intéresse, c’est de savoir quand les données du serveur seront disponible chez le client.

Créons le service :

Le code suivant présente la classe CommentService. Notez l’injection de dépendance dans le constructeur. La classe HttpClient est nécessaire afin de communiquer avec le serveur qui héberge l’API REST.

1
2
3
4
5
6
7
8
9
10
@Injectable()
export class CommentService {
 
  constructor(private http: HttpClient) { }
 
  postComment(comment: Comment): Observable<Comment> {
    const url = 'http://localhost:3000/comments';
    return this.http.post<Comment>(url, comment);
  }
}

La méthode postComment() prend en paramètre un commentaire et retournera un Observable sur un commentaire. Nous espérons donc une réponse du serveur qui contiendra le nouveau commentaire. En plus des données envoyées, il contiendra la date de création générée par le serveur.

Notez aussi l’annotation @Injectable(), elle nous indique que la classe pourra être injectée dans une autre classe. Dans notre cas, on demandera au cadriciel d’injecter ce service dans le component créé préalablement.

Au niveau du contrôleur du component, il faudra appeler la méthode postComment() afin d’envoyer nos données au serveur.

Tester le component et son service

Pour favoriser la qualité

Afin de tester le component, nous vérifions premièrement qu’il est instancié convenablement.

1
2
3
it('should create', () => {
    expect(component).toBeTruthy();
});

Le deuxième test vise à vérifier que lorsque le formulaire est soumis et que la méthode onSubmit() est appelée, cela déclenche l’appel de la méthode postComment du service.La méthode fakeAsync est utilisée afin de faciliter la gestion du code asynchrone.

Dans la section arrange, un espion est mis en place avec la méthode spyOn(). Ce dernier permet de définir ce que devra retourner la méthode espion postComment(). Dans ce cas, un objet Observable sur un commentaire sera retourné.

Dans la section act, le modèle est modifié, la méthode onSubmit() est appelée, on demande à ce que les changements au formulaire soient détectés et la méthode tick() permet d’attendre que le code asynchrone soit exécuté.

Finalement, dans la section assert, on vérifie que la méthode du service a bien été appelée une fois.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
it('should call the postComment method when form is submitted', fakeAsync(() => {
 
  // Arrange
  spyOn(commentService, 'postComment').and.returnValue(Observable.of(PostComment));
  tick();
 
  // Act
  component.model.body = 'Test comment';
  component.onSubmit();
  tick(10000);
 
  // Assert
  expect(commentService.postComment).toHaveBeenCalledTimes(1);
}));

Tester le service

Pour l’instant, la stratégie de base vise à vérifier qu’il est bien possible d’instancier le service. La méthode toBeThruty() est donc utilisée.

1
2
3
it('should be created', inject([CommentService], (service: CommentService) => {
   expect(commentService).toBeTruthy();
}));

Erreurs communes

Error: 1 timer(s) still in the queue

  • Modifier votre tick() pour tick(1000) et essayer de nouveau.

‘component’ is not a known element

  • Modifier votre module et ajouter la constante NO_ERRORS_SCHEMA ou CUSTOM_ELEMENTS_SCHEMA
    • schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA]

Conclusion

Pour terminer, prenez le temps de bien comprendre les rôles des différents éléments :

  • Component: Élément d’interface graphique composé d’un contrôleur (.ts) et d’une vue (.html).
  • Template: Contenu HTML du component (vue).
  • Modèle : Gestion et entreposage des données.
  • Service: Accès à l’API REST. Appel HTTP (GET|POST|PUT|DELETE, …).
  • Test : Augmente la qualité de votre logiciel.

L’utilisateur entre les données dans le template, ces données sont synchronisées avec le modèle, le modèle est passé au service et le service envoi ces données à l’API REST qui se charge de la persistance dans la base de données.

Afin de bien comprendre, il faut passer à l’action et programmer, faire face aux problèmes et trouver les solutions pertinentes. Passez-donc à l’action!

Code source de l’application Angular 5

Si vous appréciez cet article et que vous désirez avoir accès au code, penser à aimer la page Facebook Atomrace.

 

Facebook Comments

/0 Commentaires/par
Vous aimerez peut-être aussi
Assurance qualité avec de données de tests ou fixtures Créer des fixtures pour faciliter les tests
CRUD avec $resource
Déployer votre app Angular sur Heroku
Tests unitaires pour votre formulaire Angular
Développer une API REST avec Spring Boot
introduction aux directives angular Introduction aux directives Angular
0 réponses

Laisser un commentaire

Participez-vous à la discussion?
N'hésitez pas à contribuer!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.