Création d’une Application Web avec NodeJS et Angular V6 — Partie 2 (FrontEnd)
FRONTEND
OUTILS
ANGULAR CLI 6
INSTALLATION
La commande ci-dessous nous permet d’installer la dernière version d’angular-cli (version 6)
npm install -g @angular/cli@latest
VERIFICATION
Avec la commande ci-dessous, nous vérifions notre version d’angular.
INSTALLATION DES PACKAGES
Nous devons installer les packages ci-dessous ;
npm i -g @angular-devkit/core typescript
CREATION DU PROJET
Nous allons créer notre projet angular grâce à la commande ci-dessous;
ng new NoteProjetAngularDemo
LANCER LE PROJET
Grâce à la commande ci-dessous :
ng serve -o
INSTALLATION D’ANGULAR MATERIAL 6
Grâce aux commandes ci-dessous ;
ng add @angular/material
ng add @angular/cdk
AJOUT DU STYLE ANGULAR MATERIAL 6 — style.css
Importons le style de material dans notre projet ;
src/styles.css
AJOUT DU MODULE BrowserAnimationsModule — app.module.ts
Ajoutons BrowserAnimationsModule dans app.module.ts à la ligne 33 et l’importons à la ligne 19.
src/app/app.module.ts
INSTALLATION DE BOOTSTRAP 4
npm install bootstrap --save
AJOUT DU STYLE BOOSTRAP 4 — style.css
Ajoutons le style de bootstrap dans notre projet.
src/styles.css
GENERATION DU COMPOSANT NAV — dashboard
Nous allons utiliser la commande ci-dessous pour générer un composant material de type nav :
ng generate @angular/material:material-nav –name=dashboard
AJOUT DU COMPOSANT NAV — app.component.html
Ensuite nous allons ajouter le composant dashboard dans notre projet.
src/app/app.component.html
CREATION DU COMPOSANT MATIERE
Avec la commande ci-dessous nous allons générer notre composant matieres :
ng g c matieres
CREATION DE L’INTERFACE — Matiere
Nous allons créer une interface Matiere avec les propriétés suivantes :
id_matire, libelle et coefficient .
src/app/matieres/matieres.interface.ts
INSTALLATION DE NGX TOASTR
Avec la commande ci-dessous, on installe une librairie de notification TOASTR.
npm install ngx-toastr --save
AJOUT DU STYLE NGX TOASTR — style.css
Ajoutons le style de Toastr dans notre projet.
src/styles.css
CREATION DU SERVICE — MatiereService
Nous allons ensuite créer un service angular qui nous permettra de communiquer avec notre BACKEND — NODE JS.
Dans ce service nous aurons 2 méthodes :
getMatiere : Cette méthode nous permet de récupérer la liste des matières.
createMatiere: Cette méthode nous permet de créer une matière.
Aussi nous utilisons 3 librairies dans notre service :
HttpClient : Nous permet de communiquer avec notre BACKEND
Toastr : Nous utilisons cette librairie pour les notifications en cas d’erreur ou de succès.
Router: Cette librairie pour la redirection en cas de succès après la création d’une matière.
src/app/matieres/matiere.service.ts
AJOUT DES MODULES, PROVIDERS ET ROUTES
Nous allons ajouter nos modules, routes et providers dans notre module racine.
De la ligne 27 à la ligne 29, on met en place notre route /matiere.
De la ligne 50 à la ligne 54, on importe les librairies HttpClient, Router et Toastr. Ce qui va nous permettre de les utiliser dans toute notre application.
À la ligne 57, on enregistre notre service MatiereService comme providers pour qu’il soit disponible dans toute notre application.
src/app/app.module.ts
RECUPERER LES MATIERES — MatieresComponent
Au niveau du composant MatieresComponent, lors de son chargement nous allons récupérer la liste des matières grâce à la méthode ngOnInit.
Avant on initialise la variable matieres qui va contenir notre liste de matiere, ligne 13. Pour cela on utilise notre interface, qui va vérifier que la liste ramener est correcte.
Après avoir récuperer la liste des matière grâce à notre service matiereService — ligne 18 à 20 , nous les passons à notre variable matieres.
Enfin nous avons la méthode goToAddMatiere qui nous permet de rediriger notre utilisateur sur la page d’ajout de matière.
src/app/matieres/matieres.component.ts
AFFICHER LES MATIERES
Dans notre page HTML, nous allons afficher la liste des matières grâce à la directive *ngFor et l’interpolation: ligne 18 à 22.
Ensuite on ajoute un bouton Ajout Matiere qui va nous permettre de rédiger l’utilisateur sur la page de création de matière grâce à notre méthode goToAddMatiere.
src/app/matieres/matieres.component.html
MISE A JOUR DU COMPOSANT DASHBOARD
Nous allons mettre à jour notre composant Dashboard en enregistrant nos routes grâce à <router-outlet></router-outlet> à la ligne 29.
Ensuite on ajoute notre page matière dans le menu à la ligne 11.
src/app/dashboard/dashboard.component.html
CREATION DU COMPOSANT AJOUT MATIERE
Avec la commande ci-dessous nous allons générer notre composant ajout-matiere ;
ng g c ajout-matiere
INSTALLATION D’ANGULAR CONFIRMATION
Avec la commande ci-dessous, Nous allons installer angular confirmation.
npm install --save angular-confirmation-popover
AJOUT DES MODULES ET ROUTES
Dans notre module racine nous allons ajouter notre route ajout-matiere à la ligne 20.
Ensuite nous importons les modules FormModule et ConfirmationPopoverModule pour pouvoir les utiliser dans notre application Angular.
src/app/app.module.ts
AJOUT MATIERE - AjoutMatiereComponent
Dans notre composant AjoutMatiereComponent, nous allons créer la méthode createMatiere qui va nous permettre d’envoyer nos données au service matiereService.
Nous utilisons l’interface Matiere pour obliger l’utilisateur à respecter notre schéma.
src/app/ajout-matiere/ajout-matiere.component.ts
CRÉER LES MATIERES
Nous allons mettre en place un formulaire ajoutMatiereForm qui va nous permettre d’ajouter une matière.
On crée une variable locale ajoutMatiereForm de type ngForm (ligne 3)qui va nous permettre de faire de la validation de formulaire. À Ligne 32, on active le bouton de sauvegarde seulement quand le formulaire est valide. C’est-à-dire tous les champs requis sont renseignés.
On utilise la directive ngModel pour le binding de données, voir les lignes 7 et 18.
src/app/ajout-matiere/ajout-matiere.component.html
AJOUT de la class pad-10 - style.css
Ajoutons le style de pad-10 dans notre projet.
src/styles.css
AMELIORATION
Créer les composants UpdateMatiere et DeleteMatiere.
GITHUB
npm install
RESULTAT