Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  1. Code
  2. Angular

Creating a Blogging App Using Angular & MongoDB: Home

Read Time:9 minsLanguages:
This post is part of a series called Creating a Blogging App Using Angular & MongoDB.
Creating a Blogging App Using Angular & MongoDB: Login
Creating a Blogging App Using Angular & MongoDB: Show Post

In the first part of the tutorial series, you saw how to get started with creating an Angular web app. You learnt how to set up the application and created the Login component.

In this part of the series, you'll move further and write down the REST API required for interacting with the MongoDB bank end. You'll also create the Home component which will be displayed after the user has logged in successfully.

Getting Started

Let's get started by cloning the source code from the first part of the tutorial series.

Navigate to the project directory and install the required dependencies.

Once you have the dependencies installed, restart the application server.

Point your browser to http://localhost:4200 and you should have the application running.

Creating the Login REST API

Inside the project folder AngularBlogApp-Home, create another folder called server. You'll be writing the REST APIs using Node.js.

Navigate to the server folder and initialize the project.

Enter the required details and you should have the project initialized.

You'll be using the Express framework for creating the server. Install Express using the following command:

Once you have Express installed, create a file called app.js. This will be the root file for your Node.js server.

Here is how the app.js file looks:

As seen in the above code, you imported express into app.js. Using express, you created an application app.

Using app, you exposed an endpoint /api/user/login which will display a message. Start the Node.js server using the following command:

Point your browser to http://localhost:3000/api/user/login and you should have the message displayed.

You'll be making a POST request from the Angular service to the server with the username and password parameters. So you need to parse the request parameters.

Install body-parser, which is Node.js body-parsing middleware to parse request parameters.

Once you have it installed, import it in app.js .

Add the following code to the app.js file.

The above two body-parser options return the middleware that only parses json and urlencoded bodies and only looks at requests where the Content-Type header matches the type option.

You'll be using Mongoose to interact with MongoDB from Node.js. So install Mongoose using Node Package Manager (npm).

Once you have mongoose installed, import it in app.js.

Define the MongoDB database URL in app.js.

Let's use Mongoose to connect to the MongoDB database. Here is how it looks:

If the connection is established, the message gets logged along with the username and password.

Here is how the app.js file looks:

Restart the Node server using the following command:

To connect to the Node server from the Angular application, you need to set the proxy. Create a file called proxy.json inside the client/src folder. Here is how it looks:

Modify the client package.json file to start the application using the proxy file.

Save the changes and start the client server.

Point your browser to http://localhost:4200 and enter the username and password. Click the sign in button and you should have the parameters logged in the Node console.

Validating the User Login

To interact with MongoDB using Mongoose, you need to define a schema and create a model. Inside the server folder, create a folder called model.

Create a file called user.js inside the model folder. Add the following code to the user.js file:

As seen in the above code, you imported mongoose into user.js. You created a userSchema using the mongoose schema and created the User model using the mongoose model.

Import the user.js file inside the app.js file.

Before querying the MongoDB user collection, you need to create the collection. Go to the MongoDB shell by typing mongo. Create the collection user using the following command:

Insert a record which you'll be querying against.

Now, once mongoose gets connected to MongoDB, you'll find the record from the database using the username and password passed in. Here is how the API looks:

As seen in the above code, once you receive a response from the database, you return the same to the client side.

Save the above changes and try running the client and server. Enter the username as roy and password as 123 and you should be able to view the result in the browser console.

Redirecting to the Home Component

Once the user has been validated successfully, you need to redirect the user to the Home component. So let's start by creating the Home component. 

Create a folder called Home inside the src/app folder. Create a file called home.component.html and add the following HTML code:

Create a file called home.component.css and add the following CSS style:

Create the component file called home.component.ts and add the following code:

As seen in the above code, you just created the HomeComponent using the @Component decorator and specifying the selector, templateUrl, and styleUrls

Add the HomeComponent to the NgModules in app.module.ts.

Import the HomeComponent in the app.routing.ts and define a route for home.

In the validateLogin method in the login.component.ts file, on successful validation redirect the user to the HomeComponent. To redirect, you need to import the Angular Router.

If the response from the API call is a success, you'll navigate to the HomeComponent using the Angular Router.

Here is how the login.component.ts file looks:

Save the above changes and restart the server. Sign in to the application using the existing username and password, and you will be redirected to the HomeComponent.

Angular Blog App Home ComponentAngular Blog App Home ComponentAngular Blog App Home Component

Wrapping It Up

In this tutorial, you saw how to write the REST API endpoint for user sign-in. You learnt how to use Mongoose to interact with MongoDB from Node. After successful validation, you saw how to use Angular Router for navigating to the HomeComponent.

How was your experience learning to write an Angular application and its back end? Do let us know your thoughts and suggestions in the comments below.

Source code from this tutorial is available on GitHub.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.