IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Angular Discussion :

Premier service en Angular


Sujet :

Angular

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éprouvé

    Homme Profil pro
    Développeur informatique
    Inscrit en
    Octobre 2013
    Messages
    1 116
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Conseil

    Informations forums :
    Inscription : Octobre 2013
    Messages : 1 116
    Par défaut 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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <ul>
    <li *ngFor="let journal of journaux">
        {{journal.code}}
            {{journal.libelle}}
    </li>
    </ul>
    Consultez mes articles sur l'accessibilité numérique :

    Comment rendre son application SWING accessible aux non voyants
    Créer des applications web accessibles à tous

    YES WE CAN BLANCHE !!!

    Rappelez-vous que Google est le plus grand aveugle d'Internet...
    Plus c'est accessible pour nous, plus c'est accessible pour lui,
    et meilleur sera votre score de référencement !

  2. #2
    Membre éprouvé

    Homme Profil pro
    Développeur informatique
    Inscrit en
    Octobre 2013
    Messages
    1 116
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Conseil

    Informations forums :
    Inscription : Octobre 2013
    Messages : 1 116
    Par défaut
    Bon j'ai un peu avancé
    Et je suis toujours perdu dans ce monde hostile.
    Maintenant ce que je ne comprends pas c'est pour quoi, quand j'instancie mon service dans mon composant tout plante et je n'ai pas d'erreur.

    Est-ce que je dois traiter une exception au niveau du service ?
    Mon back spring marche et m'envoie bien du JSON

    Voici mon service

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    import { Observable } from 'rxjs';
    import { Journal } from '../model/Journal';
     
    @Injectable({
      providedIn: 'root'
    })
    export class ServiceJournalService {
      private url : string = 'localhost:8080/journal/getAll';
     
      constructor(private httpClient : HttpClient) {}
     
      public getAll()*: Observable<Journal[]>{
        return this.httpClient.get<Journal[]>(this.url);
        }
    }
    J'ai bien ajouté l'import dans appmodule
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    import { HttpClientModule } from '@angular/common/http';
    On est obligé de le faire à la main ?

    Ca plante au niveau de l'instanciation.
    C'est sûr car j'ai remplacé le constructeur par un autre qui n'instancie pas le service et le composant s'affiche avec la valeur en dur.
    J'n'ai pas d'erreur dans la console.

    Comment je peux remonter l'erreur ?

    Mon composant
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    @Component({
      selector: 'app-journal-list',
      templateUrl: './journal.list.component.html',
      styleUrls: ['./journal.list.component.css']
    })
     
    export class JournalListComponent {
        journaux = new Array<Journal>();
        count! : number;
     
        constructor (private serviceJournal :*ServiceJournalService) {}
    //	constructor () {}
     
     
        ngOnInit() {
     
               //this.serviceJournal.getAll().subscribe(response => {
            //this.journaux = response.map(item => 
              //{
                //return new Journal( 
                    //item.code,
                    //item.libelle);
                 //});
    //            });
     
    //            this.count = this.journaux.length;
                this.count = 123;
    	}
     
     
     
        }

    SVP un développeur perdu dans le monde hostile de js sans règles strict comme en java.
    Consultez mes articles sur l'accessibilité numérique :

    Comment rendre son application SWING accessible aux non voyants
    Créer des applications web accessibles à tous

    YES WE CAN BLANCHE !!!

    Rappelez-vous que Google est le plus grand aveugle d'Internet...
    Plus c'est accessible pour nous, plus c'est accessible pour lui,
    et meilleur sera votre score de référencement !

  3. #3
    Membre expérimenté
    Homme Profil pro
    Développeur Web
    Inscrit en
    Avril 2012
    Messages
    135
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Avril 2012
    Messages : 135
    Par défaut
    Bonjour

    Malheureusement, il y a pas mal de choses qui ne vont pas dans ton code et Angular est un framework exigent.

    Par exemple à la ligne suivante
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    private url : string = 'localhost:8080/journal/getAll';
    Tu n'as pas besoin de déclarer le type string puisque l'inférence de type apporté par TypeScript déterminera automatiquement qu'il s'agit d'un string vu que tu as initié la variable avec une chaine de caractères.

    Je te conseil également de préciser le protocole dans ton url, par exemple "http://localhost:8080/journal/getAll".
    J'irai même plus loin en créant une constante de ce type.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    private const apiPathUrl = ""http://localhost:8080/journal/"
    Et dans l'appelle de service tu pourras l'utiliser sous cette forme.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    this.httpClient.get<Journal[]>(`${apiPathUrl}getAll`);
    Ca te permet si tu as plusieurs endpoints à appeler dans le même service, de ne pas répété l'url à chaque fois, au cas où celle-ci change.

    Oui, à chaque fois que tu as besoin d'un service, il faut l'injecter manuellement dans chacun de tes composants.
    En tout cas, c'est la méthode la plus commune sur Angular 16.

    En Angular 16+, la démarche est très différente et largement simplifié, en utilisant l'injection de contexte https://angular.io/api/core/inject

    Quand tu accède à ton application, tu n'as aucune erreur dans ta console ?

  4. #4
    Membre éprouvé

    Homme Profil pro
    Développeur informatique
    Inscrit en
    Octobre 2013
    Messages
    1 116
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Conseil

    Informations forums :
    Inscription : Octobre 2013
    Messages : 1 116
    Par défaut
    Bonjour,

    J'ai remarqué que Angular est exigeant
    Comme je débute je me fait avoir par la forme.

    Bon j'ai changé le code pour ceci.

    Mais si je mets le mots clef "const", j'ai une erreur "a class member can't have the key word xonst".

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    @Injectable({
      providedIn: 'root'
    })
    export class ServiceJournalService {
      private server = 'http://localhost:8080/';
     
      constructor(private httpClient : HttpClient) {}
     
      public getAll()*: Observable<Journal[]>{
    	  //try {
        return this.httpClient.get<Journal[]>(this.server + 'journal/getAll');
    	  //} catch(e) {
    		  //console.log('Erreur daccès au service Journal');
     
    //      return null;
        //}
    }
    }
    Je n'ai pas erreur dans la console.
    Pour l'instant je lance mon projet depuis la ligne de commande.
    J'ai des problèmes d'accessibilités avec Vs code.

    Mais il me semble que ça plante lors de l'appel de HTTP client.

    Je voulais mettre un try/catch, mais le compilateur me demande de retourner un observable quand même. Je voulais mettre un null et ça passe pas.

    Je suis en angular 16.11.
    J'ai commencé avec la version 17.

    Cordialement
    Consultez mes articles sur l'accessibilité numérique :

    Comment rendre son application SWING accessible aux non voyants
    Créer des applications web accessibles à tous

    YES WE CAN BLANCHE !!!

    Rappelez-vous que Google est le plus grand aveugle d'Internet...
    Plus c'est accessible pour nous, plus c'est accessible pour lui,
    et meilleur sera votre score de référencement !

  5. #5
    Membre expérimenté
    Homme Profil pro
    Développeur Web
    Inscrit en
    Avril 2012
    Messages
    135
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Avril 2012
    Messages : 135
    Par défaut
    En effet, tes constantes doivent être déclarées en dehors de la classe.

    Peux tu partager ton message d'erreur ?
    Soit celui du compilateur typescript soit le contenu de la console navigateur.

    Je ne comprends pas le message suivant.
    Pour l'instant je lance mon projet depuis la ligne de commande.
    J'ai des problèmes d'accessibilités avec Vs code.

  6. #6
    Membre éprouvé

    Homme Profil pro
    Développeur informatique
    Inscrit en
    Octobre 2013
    Messages
    1 116
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Conseil

    Informations forums :
    Inscription : Octobre 2013
    Messages : 1 116
    Par défaut
    Bon maintenant je mets l'URL du serveur dans une constante en dehors de la classe.
    Je peux placer aussi l'URL du service pour la maintenance.

    A terme je pensais définir la valeur du serveur de façon globale.

    J'ai maintenant une erreur quand je veux utiliser une exception pour gérer les erreurs et avoir plus d'informations lors de l'appel du service, car je ne retourne rien et je ne sais pas quoi retourner, null, any, undefined, ou un observable vide...

    Function lacks ending return statement and return type does not include 'undefined'.
    Le code
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    import { Injectable } from '@angular/core';
    import { Observable, throwError } from 'rxjs';
    import { catchError } from 'rxjs/operators';
    import {
      HttpClient,
      HttpHeaders,
      HttpErrorResponse,
    } from '@angular/common/http';
    import { Journal } from '../model/Journal';
     
    const server = 'http://localhost:8080/';
     
    @Injectable({
      providedIn: 'root'
    })
     
    export class ServiceJournalService {
        constructor(private httpClient : HttpClient) {}
     
      public getAll()*: Observable<Journal[]>{
        const serviceGetAll = server + 'journal/getAll';
     
    	  try {
        return this.httpClient.get<Journal[]>(server + 'journal/getAll');
    	  } catch(e) {
    		  console.log('Erreur daccès au service gettAll de Journal');
        }
    }
    }
    ****
    Comme je suis non-voyant j'utilise un lecteur d'écrans pour accéder aux informations.
    D'après les tutos sur Angular il faut utiliser vs code et son terminal.
    Mais pour l'instant je n'arrive pas à l'utiliser avec mon outil d'accessibilité, j'utilise à la place le terminal de windows. Il se peut que des informations passent à la trappe.

    Mais jusqu'à présent le code plantait sans message d'erreurs dans la console du terminal.
    Consultez mes articles sur l'accessibilité numérique :

    Comment rendre son application SWING accessible aux non voyants
    Créer des applications web accessibles à tous

    YES WE CAN BLANCHE !!!

    Rappelez-vous que Google est le plus grand aveugle d'Internet...
    Plus c'est accessible pour nous, plus c'est accessible pour lui,
    et meilleur sera votre score de référencement !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Mon premier service Windows avec timer
    Par OmegA_MRS dans le forum Services Windows
    Réponses: 7
    Dernier message: 20/02/2012, 11h56
  2. Mon premier Service Windows
    Par BOSSANT dans le forum Services Windows
    Réponses: 3
    Dernier message: 05/02/2011, 12h51
  3. Création de mon premier service web
    Par hugo7 dans le forum Services Web
    Réponses: 2
    Dernier message: 28/10/2010, 13h08
  4. La beta du premier Service Pack de Windows Server 2008 R2
    Par Gordon Fowler dans le forum Actualités
    Réponses: 0
    Dernier message: 13/07/2010, 10h33
  5. premier service web - afficher chaîne de caractère
    Par ludovik49 dans le forum Services Web
    Réponses: 0
    Dernier message: 25/11/2009, 00h19

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo