Creation of Web Application with Node JS and Angular V6 — Part 2 (FRONTEND)

FRONTEND

TOOLS

ANGULAR CLI 6

INSTALLATION

Below the command allowing us to install angular cli last version (version 6)

npm install -g @angular/cli@latest

VERIFICATION

With the below command, we verify our version of angular.

PACKAGE INSTALLATION

We have to install package them below;

npm i -g @angular-devkit/core typescript

PROJECT CREATION

We are going to create our project angular;

ng new NoteProjetAngularDemo

START THE PROJECT

With the command below:

ng serve -o

ANGULAR MATERIAL 6 INSTALLATION

With the command below:

ng add @angular/material
ng add @angular/cdk

ADD STYLISH OF ANGULAR MATERIAL 6 — style.css

Let us import the style of material in our project;

src/styles.css

ADD MODULE BrowserAnimationsModule — app.module.ts

Let us add BrowserAnimationsModule in app.module.ts to the line 33 and let us import him for the line 19.

src/app/app.module.ts

BOOTSTRAP 4 INSTALLATION

npm install bootstrap --save

ADD STYLISH OF BOOSTRAP 4 — style.css

Let us add the style of bootstrap in our project.

src/styles.css

GENERATION OF COMPONENT NAV — dashboard

We are going to use the command below to generate a material component of type nav:

ng generate @angular/material:material-nav –name=dashboard

ADD COMPONENT NAV TO APP — app.component.html

Then we are going to add the component dashboard in our project.

src/app/app.component.html

CREATION OF COMPONENT MATIERE

With the command below we are going to generate our component matieres:

ng g c matieres

CREATION OF THE INTERFACE — Matiere

We are going to create an interface Matiere with the following properties:

id_matire, libelle et coefficient .

src/app/matieres/matieres.interface.ts

NGX TOASTR INSTALLATION

With the command below, we install a library of notification TOASTR.

npm install ngx-toastr --save

ADD STYLISH OF NGX TOASTR — style.css

Let us add the style of Toastr in our project.

src/styles.css

CREATION OF THE SERVICE — MatiereService

We are then going to create a service to angular which will allow us to communicate with our BACKEND(NODE JS).

In this service we shall have 2 methods a method:

getMatiere : This method allows us to get back the list of the subjects.

createMatiere: This method allows us to create a subject.

So we use 3 libraries in our service:

HttpClient : Allows us to communicate with our BACKEND

Toastr : We use this library for the notifications in case of error or success.

Router: This library for the rerouting in case of success after the creation of a subject.

src/app/matieres/matiere.service.ts

ADD MODULES, PROVIDERS AND PATHS

We are going to add our modules, paths and providers in our module root.

Of the line 27 in the line 29, we set up our path /matiere.

Of the line 50 in the line 54, we import HttpClient, Router and Toastr. Which is going to allow us to use them in all our application.

In the line 57, we register our MatiereService service as providers so that it is available in all our application.

src/app/app.module.ts

GET ALL SUBJECTS — MatieresComponent

In MatieresComponent component, during its load we are going to get back the list of the subjects with the method ngOnInit.

Before we initialize the variable matieres which is going to contain our list of subject, line 13. For it we use our interface, which is going to verify that the list to return is correct.

Having to recover the list of the subject with our service matiereService in Line 18–20, we set them to our variable matieres.

Finally we have the method goToAddMatiere which allows us to redirect our user on the add subject page.

src/app/matieres/matieres.component.ts

SHOW THE SUBJECTS

In our HTML page, we are going to show the list of the subjects with the directive *ngFor and the interpolation: line 18–22.

Then we add a button Ajout Matiere which is going to allow us to redirect the user on the page of subject creation with our goToAddMatiere method.

src/app/matieres/matieres.component.html

UPDATE OF COMPONENT DASHBOARD

We are going to update our component Dashboard by registering our paths <route-outlet></router-outlet> in the line 29.
Then we add our page subject in the menu to the line 11.

src/app/dashboard/dashboard.component.html

CREATION OF COMPONENT ADD SUBJECT

With the order below we are going to generate our component ajout-matiere;

ng g c ajout-matiere

ANGULAR CONFIRMATION INSTALLATION

With the command below, We are going to install angular confirmation.

npm install --save angular-confirmation-popover

ADD MODULES AND PATHS

In our module root we are going to add our path ajout-matiere to the line 20.

Then we import modules FormModule and ConfirmationPopoverModule to be able to use them in our application Angular.

src/app/app.module.ts

ADD SUBJECT — AjoutMatiereComponent

In our component AjoutMatiereComponent, we are going to create the method createMatiere which is going to allow us to send our data to the service matiereService.

We use the interface Matiere to oblige the user to respect our schema.

src/app/ajout-matiere/ajout-matiere.component.ts

CREATE THE SUBJECTS

We are going to set up an ajoutMatiereForm form which is going to allow us to add a subject.

We create a local variable ajoutMatiereForm of type ngForm (line 3) who is going to allow us to make some validation of form. In Line 32, we activate the save button only when the form is valid. That is all the required fields are filled.

We use the directive ngModel for the binding of data, to see lines 7 and 18.

src/app/ajout-matiere/ajout-matiere.component.html

ADD pad-10 class — style.css

Let us add the style of pad-10 in our project.

src/styles.css

IMPROVEMENT

Create components UpdateMatiere and DeleteMatiere.

GITHUB

daoudaDiallo/NoteProjetAngular

npm install

RESULT