Tutoriel sur une introduction au framework web Angular

Version imprimable

30/12/2020, 09h40
dukoid

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 :

Introduction au framework web Angular
Citation:
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.

:fleche: Retrouvez les meilleurs cours et tutoriels pour le développement avec Angular
04/01/2021, 11h23
egann538

Très bon exposé des fonctionnalités principales d'Angular. Et plus rapide à lire que la documentation officielle :ccool:
29/01/2021, 23h36
crevecoeurj

Super boulot dukoid.

ça me titille depuis longtemps de me mettre à Angular /Typescript...
C'est une bonne approche.
18/02/2021, 17h35
Fab le Fou

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 ! :bravo:

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

Citation:

Angular elements - Composant web réutilisable : https://angular.io/guide/éléments ;

La bonne url : https://angular.io/guide/elements sans les accents

Citation:

É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.
19/02/2021, 00h50
dukoid

Merci à tous pour vos avis positifs :)

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

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é :

Citation:

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:

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:

1 2 3 4 5 export interface IUser { name?: string; firstname?: string; genre?: 'madame' | 'monsieur' | 'mademoiselle'; }
Et remplacer la ligne en erreur par :

Code:

this.stored1Service.emitDataSubject({});

XVIII-C. Schéma

Dans un des commentaires de app.component.html, on peut lire :

Code:



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:

import { MustMatch } from '../validators/must-match.validator';

Générant un :
Code:

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:

import { ProductPdfViewerComponent } from './components/product-pdf-viewer/product-pdf-viewer.component';

Il faut mettre :

Code:

import { ProductPdfViewerComponent } from './product-pdf-viewer/product-pdf-viewer.component';

XXVII-B. Schéma

Dans /src/app/app.module.ts, il faut remplacer :

Code:

import { StoredService } from './button-toggle-mat/services/stored.service';

Par :

Code:

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:

import { StoredService } from '../../services/stored.service';

Par :

Code:

import { StoredService } from '../../../services/stored.service';

Et dans angular.json, j'ai aussi été obligé d'augmenter les "budgets" par passer l'erreur :

Code:

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 :

Code:

ng deploy

J'obtiens :
Code:

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:

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:

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 :D

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

Encore merci pour ce tutoriel !

19/03/2021, 20h25
dukoid
wouaah félicitation d'être arrivé au bout de ce tuto :mouarf:
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:

1 2 3 4 import { FormGroup } from '@angular/forms'; export function MustMatchValidator(controlName: string, matchingControlName: string) {
form-register.component.ts
Code:

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 !

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:

this.stored1Service.emitDataSubject(null);

Et j'ai de nouveau le même bug :
Code:

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 :roll:

Encore merci et bonne semaine.

03/06/2021, 13h42
skeres95250

Fais moi rêver !

bonjour Dukoid,

Merci pour ce tuto très complet.Mais please, please, fais moi rêver et donne moi envie avec quelques captures d'écrans du rendu de l'app stp :lol:
03/06/2021, 13h58
dukoid

:mouarf::mouarf:

si tu as suivi le tuto tu t'apercevra justement que c'est visuellement très moche.
en effet, j'ai enlevé le design afin d'avoir le moins de code au possible.

peut être le chapitre 30 te fera rêver :

https://iner-dukoid.developpez.com/t...-angular/#LXXX

c'est dispo sur git, prêt à être lancé !