Premier service en Angular
Bonjour,
Je débute en angular (version 16).
Je souhaite accéder à un service web sur un back Spring, de ce côté ça marche.
J'ai du JSON quand j'appelle l'url depuis un navigateur
J'ai tout générer avec la cli et les éléments sont biens dans le fichier "app.module.ts"
Le composant ne s'affiche pas.
Le problème est qu'il n'y a pas de message, d'erreur.
J'ai du mal à trouver l'erreur même dans la console de la ligne de commandes.
Si vous pouvez m'orienter SVP.
Cordialement
Voici le code
Mon model
Code:
1
2
3
4
5
6
| export class Journal {
constructor(public code: string,
public libelle : String) {}
} |
Mon service
J'ai tenté deux approches, qu'est ce qui est le plus simple pour le composant ? any ou le type objet ou le type du model ?
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
| import { Injectable } from '@angular/core';*
import { HttpClient, HttpHeaders } from '@angular/common/http';*
import { Observable } from 'rxjs';*
import { classe } from '../models/Classe.model';
import { Journal } from '../models/Journal.model';
@Injectable({
providedIn: 'root'
})
export class JournalService {
* constructor(private http: HttpClient) {}*
getAll(): Observable<any> {*
let url : string = 'http://localhost:8080/journal/getAll';
* * *let observable: Observable<any> =*
* * * * *this.http.get(url); *
* * return observable;*
* }*
getAll2(): Observable<Journal[]>{
let headers = new HttpHeaders();
headers.append('content-type', 'application/json');
headers.append('accept', 'application/json');
return this.http.get<Journal[]>('http://localhost:8080/journal/getAll', {headers: headers});
}
/*
journaux = [
{code : "code", libelle : "libelle"},
{code : "ac", libelle : "Achats"},
{code : "ve", libelle :"ventes"}
];
}
*/
} |
le code TSdu composant
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| import { Injectable } from '@angular/core';*
import { HttpClient, HttpHeaders } from '@angular/common/http';*
import { Observable } from 'rxjs';*
import { classe } from '../models/Classe.model';
import { Journal } from '../models/Journal.model';
@Injectable({
providedIn: 'root'
})
export class JournalService {
* constructor(private http: HttpClient) {}*
getAll(): Observable<any> {*
let url : string = 'http://localhost:8080/journal/getAll';
* * *let observable: Observable<any> =*
* * * * *this.http.get(url); *
* * return observable;*
* }*
getAll2(): Observable<Journal[]>{
let headers = new HttpHeaders();
headers.append('content-type', 'application/json');
headers.append('accept', 'application/json');
return this.http.get<Journal[]>('http://localhost:8080/journal/getAll', {headers: headers});
}
} |
Le template html du composant
Code:
1
2
3
4
5
6
| <ul>
<li *ngFor="let journal of journaux">
{{journal.code}}
{{journal.libelle}}
</li>
</ul> |
