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

  1. #1
    Membre émérite
    Avatar de dukoid
    Homme Profil pro
    Développeur informatique
    Inscrit en
    novembre 2012
    Messages
    1 992
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : novembre 2012
    Messages : 1 992
    Points : 2 817
    Points
    2 817
    Par défaut Tutoriel sur une introduction au framework web Angular
    Bonjour chers membres du Club,

    Je vous propose ce tutoriel sur Angular dans lequel tous les principaux concepts sont présentés :



    Ce tutoriel est sous la forme d'un mémo présentant les chapitres les plus importants du framework Angular.
    Chaque chapitre est composé de codes source agrémentés de diverses explications et points-clés à connaitre.
    Ce mémo est destiné aux développeurs Angular débutants et aussi confirmés.
    Connaissances prérequises :
    • TypeScript : débutant ;
    • Angular : débutant.
    Profitez de cette discussion pour laisser vos commentaires.


    Retrouvez les meilleurs cours et tutoriels pour le développement avec Angular

  2. #2
    Membre actif
    Homme Profil pro
    Développement logiciel
    Inscrit en
    mai 2005
    Messages
    69
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développement logiciel
    Secteur : Aéronautique - Marine - Espace - Armement

    Informations forums :
    Inscription : mai 2005
    Messages : 69
    Points : 219
    Points
    219
    Par défaut
    Très bon exposé des fonctionnalités principales d'Angular. Et plus rapide à lire que la documentation officielle

  3. #3
    Nouveau membre du Club
    Profil pro
    Chef projet
    Inscrit en
    novembre 2002
    Messages
    20
    Détails du profil
    Informations personnelles :
    Âge : 44
    Localisation : France, Maine et Loire (Pays de la Loire)

    Informations professionnelles :
    Activité : Chef projet

    Informations forums :
    Inscription : novembre 2002
    Messages : 20
    Points : 35
    Points
    35
    Par défaut
    Super boulot dukoid.

    ça me titille depuis longtemps de me mettre à Angular /Typescript...
    C'est une bonne approche.

  4. #4
    Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    mars 2006
    Messages
    23
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Morbihan (Bretagne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : mars 2006
    Messages : 23
    Points : 60
    Points
    60
    Par défaut
    Bonjour,

    Je viens de débuter la lecture de ce tutoriel qui me semble déjà de très grande qualité.
    Merci pour le partage !

    Je signale déjà 2 liens erronés rencontrés en début de tutoriel :

    Angular elements - Composant web réutilisable : https://angular.io/guide/éléments ;
    La bonne url : https://angular.io/guide/elements sans les accents

    Éditeur de code online : https://stackblitz.com/- ;
    Là l'url est ok. C'est juste le tiret après le dernier slash qui est en trop.

  5. #5
    Membre émérite
    Avatar de dukoid
    Homme Profil pro
    Développeur informatique
    Inscrit en
    novembre 2012
    Messages
    1 992
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : novembre 2012
    Messages : 1 992
    Points : 2 817
    Points
    2 817
    Par défaut
    Merci à tous pour vos avis positifs

    Fab, merci pour le retour. je vais corriger ça dès que je peux..

  6. #6
    Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    mars 2006
    Messages
    23
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Morbihan (Bretagne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : mars 2006
    Messages : 23
    Points : 60
    Points
    60
    Par défaut
    Hello,

    De nouveau merci pour ce tuto que je viens de finir après l'avoir picoré pendant quelques semaines.
    Je confirme ma première impression, il est très complet. Je pense que cela a été un sacré boulot de l'écrire !
    Le corollaire est qu'il est peut-être un peu ardu pour des personnes découvrant complètement Angular, ce qui n'était pas mon cas.

    Pour contribuer, voici quelques remarques/bugs concernant les codes fournis :

    Lorsque l'on initialise un projet Angular, il nous est désormais demandé :
    Do you want to enforce stricter type checking and stricter bundle budgets in the workspace?
    This setting helps improve maintainability and catch bugs ahead of time.
    Si on répond "yes", il y a ensuite des problèmes avec toutes les variables déclarées sans être initialisées, sauf si leur type accepte la valeur undefined.
    Cela vient de TypeScript : https://www.typescriptlang.org/docs/...cript-2-7.html

    De même dans le chapitre XIV-B. Two-way Data Binding, j'ai été obligé de renommer la fonction réceptionFromChild(...) du script parent.component.ts du fait de l'accent.
    Je ne sais pas si cela venait du mode de strict, mais je pense qu'il vaut mieux éviter d'une manière générale les caractères spéciaux dans le code.

    Au bout d'un moment, j'ai refusé le mode strict pour éviter ces problèmes avec les code fournis avec le tuto.

    XIV-C-2. Pratique

    Dans le script comp2.component.ts, il y a une erreur avec la ligne :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    this.stored1Service.emitDataSubject(null);
    La raison de l'erreur est que null n'a pas le type demandé (IUser)
    Une solution possible : rendre tous les attributs du modèle user optionnels :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    export interface IUser {
        name?: string;
        firstname?: string;
        genre?: 'madame' | 'monsieur' | 'mademoiselle';
    }
    Et remplacer la ligne en erreur par :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    this.stored1Service.emitDataSubject({});
    XVIII-C. Schéma

    Dans un des commentaires de app.component.html, on peut lire :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <!-- /comp21, son composant(ou page) sera projeté dans le <router-outlet> du composant racine: app.component.html, donc ici même (voir plus bas) -->
    Ce n'est pas le cas, car il n'y a pas de composants "comp21". Mais ce n'est qu'un commentaire resté d'une première version je suppose

    XIX-A-2. Pratique

    J'ai rencontré une erreur étrange dans le script /register/form-register/form-register.component.ts
    Il s'agit de la ligne :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    import { MustMatch } from '../validators/must-match.validator';
    Générant un :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    Error: ./src/app/register/form-register/form-register.component.ts
    Module not found: Error: Can't resolve '../validators/must-match.validator' in '/home/.../angular-form1/src/app/register/form-register'
    J'ai réglé le bug en renommant le script must-match.validator en must-match-validator.

    XXIV-E-1-c. (A3) Importer dans le fichier module du produit le nouveau package

    Il y a une erreur de chemin dans /features/product/product.module.ts :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    import { ProductPdfViewerComponent } from './components/product-pdf-viewer/product-pdf-viewer.component';
    Il faut mettre :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    import { ProductPdfViewerComponent } from './product-pdf-viewer/product-pdf-viewer.component';
    XXVII-B. Schéma

    Dans /src/app/app.module.ts, il faut remplacer :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    import { StoredService } from './button-toggle-mat/services/stored.service';
    Par :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    import { StoredService } from './services/stored.service';
    De même, dans /src/app/button-toggle-mat/components/button-toggle-mat/button-toggle-mat.component.ts, il faut remplacer :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    import { StoredService } from '../../services/stored.service';
    Par :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    import { StoredService } from '../../../services/stored.service';
    Et dans angular.json, j'ai aussi été obligé d'augmenter les "budgets" par passer l'erreur :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    Warning: /home/.../src/app/button-toggle-mat/components/button-toggle-mat/button-toggle-mat.component.css exceeded maximum budget. Budget 6.00 kB was not met by 65.96 kB with a total of 71.96 kB.
    Peut-être est-ce lié au fait que j'ai choisi l'option css et non scss lors de la création de l'application.

    XXVIII-D. ngx-deploy-docker

    Lorsque je lance :
    J'obtiens :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    An unhandled exception occurred: Cannot read property 'Workspace' of undefined
    See "/tmp/ng-PnydI4/angular-errors.log" for further details.
    Et quand je vais voir le log :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    [error] TypeError: Cannot read property 'Workspace' of undefined
        at Object.<anonymous> (/home/.../angular-ngx-docker1/node_modules/ngx-deploy-docker/src/deploy/builder.js:28:57)
        at Generator.next (<anonymous>)
        at /home/.../angular-ngx-docker1/node_modules/ngx-deploy-docker/src/deploy/builder.js:7:71
        at new Promise (<anonymous>)
        at __awaiter (/home/.../angular-ngx-docker1/node_modules/ngx-deploy-docker/src/deploy/builder.js:3:12)
        at /home/.../angular-ngx-docker1/node_modules/ngx-deploy-docker/src/deploy/builder.js:26:67
        at onInput (/home/.../angular-ngx-docker1/node_modules/@angular-devkit/architect/src/create-builder.js:151:30)
        at SafeSubscriber._next (/home/.../angular-ngx-docker1/node_modules/@angular-devkit/architect/src/create-builder.js:65:29)
        at SafeSubscriber.__tryOrUnsub (/home/.../angular-ngx-docker1/node_modules/@angular-devkit/architect/node_modules/rxjs/internal/Subscriber.js:205:16)
        at SafeSubscriber.next (/home/.../node_modules/@angular-devkit/architect/node_modules/rxjs/internal/Subscriber.js:143:22)
    Les configurations manuelles de Docker expliquées dans le chapitre précédent ont fonctionné, donc c'est ok pour moi.

    XXIX. Étude de cas n°1 : authentification + accès sécurisé à une API

    Dans pages/partials/header/header.component.html, il faut mettre "click" et non "clic".

    Dans le fichier users.json fourni côté node.js, le mot de passe fait moins de 6 caractères alors qu'on a un Validators.minLength(6)
    Il suffit d'en saisir un plus long dans le fichier.

    XXXI. Gestion dynamique des metas tags pour le SEO

    Lorsque l'on revient en page1 après être passé par la page2, les title et meta description restent ceux de page2.
    C'est logique et en même temps contre-intuitif car je m'attendais à retrouver celles de app.component.ts.
    Donc il vaut mieux définir des valeurs pour chaque page.

    XXXII. Les Progressive Web App (PWA)

    Ce n'est pas une erreur mais il n'est pas spécifié qu'il faut ajouter dans app.module.ts :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    import { HttpClientModule } from '@angular/common/http';
    ...
      imports: [
        BrowserModule,
        AppRoutingModule,
        HttpClientModule,
      ],
    Par ailleurs, je n'ai pu tester l'installation de la PWA sur mon PC via firefox (problème connu), mais pas non plus via chromium qui pourtant fonctionne généralement comme chrome. Cela vient peut-être du fait que ma machine est sur GNU/Linux ou bien de l'absence d"https" au début de l'url. Je n'ai pas installé le vrai chrome pour vérifier.

    Il y a peut-être eu d'autres petits problèmes que j'ai oublié de noter. Dans un sens, cela oblige à chercher et donc à mieux comprendre le fonctionnement d'Angular

    Je pense qu'il faut pratiquer un bout de temps Angular pour que tout cela devienne naturel.

    Encore merci pour ce tutoriel !

  7. #7
    Membre émérite
    Avatar de dukoid
    Homme Profil pro
    Développeur informatique
    Inscrit en
    novembre 2012
    Messages
    1 992
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : novembre 2012
    Messages : 1 992
    Points : 2 817
    Points
    2 817
    Par défaut
    wouaah félicitation d'être arrivé au bout de ce tuto
    encore merci pour tes retours, je vais les prendre en compte pour un futur update !

    Je suis content que cela as pu te servir dans ton apprentissage.

    ** si tu souhaites une idée de projet, je te propose celle ci :

    une application de e-commerce avec :
    - authentification
    - affichage des produits (avec pagination)
    - détail d'un produit
    - gestion du panier
    - gestion des commandes (sans pagination, déjà fait avec les produits)
    - sans la livraison, ni le paiement

    le tout de façon basique :
    - un produit (nom + prix) associé à une catégorie (nom)
    - une commande (numéro de commande + date) associé à un ou des produits et associé à un utilisateur

    pour le back, à toi de voir (node, symfony, java...) c'est un autre métier !
    sinon il y a json-server pour ne pas t'embêter à créer un back, c'est juste pour rendre service durant le développement
    ou alors ça peut servir pour des petites choses en prod ...

    **
    il y a la démo Angular : hero que l'on retrouve sur la doc officielle
    pour étudier le code

    **
    on peut aussi récupérer des projets angular sur github pour étudier le code
    (dans le filtre, faut mettre recently updated pour avoir les dernières versions)

    **
    pour se perfectionner, il y a pas mal d'articles sur medium : https://medium.com/all-front/how-to-...e-8870bc7544ce
    inscription gratuite, on reçoit un mail tous les jours avec les articles de ta recherche principal "angular" par exemple

    bon courage !

    -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
    concernant les points suivants :

    XIV-C-2. Pratique
    this.stored1Service.emitDataSubject(null);

    je n'ai pas l'erreur que tu obtiens et cela m'étonne parcequ'un objet peut très bien être à null


    XIX-A-2. Pratique

    c'est surement du au fait que le nom du fichier est : must-match.validator et que le nom de la classe est : MustMatch
    sur mon windows pas de problème mais peut être que sur linux il est pointilleux

    j'ai modifié de la sorte

    must-match.validator
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    import { FormGroup } from '@angular/forms';
    
    export function MustMatchValidator(controlName: string, matchingControlName: string) {
    form-register.component.ts
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    import { MustMatchValidator } from '../validators/must-match.validator';
    ...
    ...
    validator: MustMatchValidator('password', 'confirmPassword')
    peux tu me confirmer si ça fonctionne ainsi ?

    XXVIII-D. ngx-deploy-docker

    j'ai retester sur un autre projet, je n'ai pas cette erreur : "An unhandled exception occurred: Cannot read property 'Workspace' of undefined"

    les mystères de Docker ?

    XXXI. Gestion dynamique des metas tags pour le SEO

    J'ai testé et je ne constate rien d'anormal en changeant plusieurs fois de page1 à page2

    sur la page 1 et tag description (qui hérite de app.component), est toujours celui de app.component
    sur la page 2 et tag description, est toujours celui défini dans page2

    bizaaarre !

  8. #8
    Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    mars 2006
    Messages
    23
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Morbihan (Bretagne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : mars 2006
    Messages : 23
    Points : 60
    Points
    60
    Par défaut
    Merci pour tes conseils.

    Pour la mise en pratique, j'ai dans la tête de réécrire une petite application de suivi de comptes domestiques fonctionnant actuellement en 100% en PHP, utilisée et connue que par moi-même.
    Le cordonnier étant le plus mal chaussé, autant dire qu'elle ne paye pas de mine
    L'idée est d'écrire le backend avec Laravel que je compte aussi apprendre et le front avec Angular, même si dans l'absolu du JS natif ferait le job.
    Et pour le coup, je pourrai la publier le code en licence libre, des fois que cela pourrait servir d'autres personnes...

    Sinon, j'ai testé de nouveau le code du "XIV-C-2." en remettant :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    this.stored1Service.emitDataSubject(null);
    Et j'ai de nouveau le même bug :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    Error: src/app/comp2/comp2.component.ts:41:41 - error TS2345: Argument of type 'null' is not assignable to parameter of type 'IUser'.
     
    41     this.stored1Service.emitDataSubject(null); // (4) bonne pratique : on demande au service d'effectuer le next, car c'est le service qui est chargé d'effectuer des actions sur les observables
    Mais avant de me repencher sur Angular, j'ai pris le temps de lire une bonne partie de la doc de TypeScript et cela me semble logique.
    Normalement il faut préciser que l'on accepte la valeur null.
    Par contre certaines versions de TypeScript peuvent être plus tolérantes que d'autres.
    Pour ma part je suis en version 3.9.7. mais je prévois une mise à jour de mon système dans la semaine donc TypeScript va suivre.

    Pour le bug du "XIX-A-2.", je viens de tester ta solution et je te confirme que cela marche. Bien joué

    Pour le reste, ce sont les fameux mystères du code

    Encore merci et bonne semaine.

Discussions similaires

  1. Réponses: 0
    Dernier message: 05/12/2014, 10h59
  2. Réponses: 0
    Dernier message: 09/01/2005, 12h00
  3. Réponses: 0
    Dernier message: 09/01/2005, 12h00

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