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

daoudaDiallo/NoteProjetAngular

npm install

RESULTAT