Express Server Integration with Angular UI [#3] | Back End & Front End | Web Application

Опубликовано: 08 Август 2020
на канале: Shaheer Shukur

29,802

362

Source Code: https://github.com/shaheershukur/Mark...
Complete Playlist: • Web Application Development

Connecting the back end JavaScript server built using #Express framework to the front end Web application built using the #Angular framework, using the #HttpClient

Closed Captioning:
We need to integrate it with Angular UI.
Let's go back to UI and make the required changes.
Since we will be getting the cards from API, now in UI, we just need to check whether the display is in Handset mode or Web mode.
Instead of returning the cards array, we will return a boolean value.
We will return true if display matches handset, else false.
And we can create and assign to an observer variable 'isHandsetObserver' to observe the changes.
Till we get the cards data from express server, we can keep the cards variable as empty array.
The 'async' pipe is used to get the latest value from an observable.
Since 'cards' is an array now, and not an observable, the 'async' pipe needs to be removed from the HTML file.
In the TS file, we will also add two more local variables 'cardsForHandset' and 'cardsForWeb' for holding cards we will be receiving from server.
Let it be empty arrays initially. And once we get the cards data from server, we will assign to these variables.
After that we will check whether the current display is handset or not, and assign either of these variable to the 'cards' variable.

'ngOnInit' is the first callback method that gets executed in an Angular component.
So inside 'ngOnInit' method, we will subscribe to the observer 'isHandsetObserver'.
We know that the observer provides a boolean value based on whether the screen is handset or not.
Let's create a local variable 'isHandset' to hold this value.
Whenever the screen size changes, we need a function to be called for assigning the 'cards' variable to either 'cardsForHandset' or 'cardsForWeb'.
Let's write that function.
We will name it 'loadCards'.
Inside this function, we will check the current display size.
If the display is in Handset mode, we will load 'cards' array with 'cardsForHandset', else 'cardsForWeb'.
We should invoke this function here.

Now, importantly we need to get the data from server to UI.
For that we need to create an angular service.
Services are messengers in angular which can be used for fetching data from server and giving it to UI.
If there are three components A, B and C which requests some data or functionality frequently,
angular service can stand there throughout the application lifecycle and provide service to requesting components.
Let's create a service for our application.
We will create a service named 'app' inside the app folder.
Open the folder in terminal and type the command 'ng g s app'.
Open the service file.
Here we will write a function to fetch data from server.
We will name the function 'getDeals'.
For communicating with the server, we need to inject the 'HttpClient' module in the constructor.
In the Express 'app.js' file, we have defined method for GET method.
Therefore we must use the same method in UI while calling the service.
Let's use the GET method of httpClient instance.
To this method, we must pass the URL of required server route.
In this case, we are accessing 'localhost:3000/deals/'.
We may add or omit the final '/'.
We will return the response to whichever component is calling it.
Since this is an asynchronous service call which doesn't give the response immediately, its type will be 'Observable'.
Now, in the home component we must first inject this service.
We will name the instance 'appService'.
After that, we can call the service method inside the 'ngOnInit' function.
Since it return an observable, we must subscribe to it.
The first parameter of the subscribe function contains the response, and the second parameter contains the error if in case any occurs.
We must remember the structure of JSON we are passing from express server, and map accordingly in UI.
In case we successfully receive the data from express server, we must assign the handset and web cards to respective local variables.
And finally we will call the 'loadCards' method here too.
This makes sure that the correct cards data is populated.

Click on the 'Console' tab.
Here we can see an error due to missing 'HttpClient' Module.
To fix that, let's open the app module file, and import the 'HttpClientModule' somewhere at the top, but below the 'BrowserModule'.
Save everything and let's check again.
The 'Cross Origin' error.
It happens when a resource from one origin tries to access another resource from a different origin.
In this case it happened because the Express server running on port 3000 was tried to access by the UI application running at port 4200.
To skip cross origin checks, we must specify it in express server.
Open the express project folder in terminal and install the 'cors' package by typing the command 'npm i cors'.