Creating a Blogging App Using Angular & MongoDB: Login

Angular is a one-stop framework for creating mobile and web apps using the same reusable code. Using Angular, you can divide the whole application into reusable components, which makes it easier to maintain and reuse code.

In this tutorial series, you’ll learn how to get started with creating a web app using Angular with MongoDB as the back end. You’ll be using Node.js for running the server.

Throughout the course of this tutorial, you’ll be building a blogging application using Angular, Node.js, and MongoDB. 

In this tutorial, you’ll see how to get started with setting up the application and creating the Login component.

Getting Started

Let’s get started by installing the Angular CLI.

Once you have installed the Angular CLI, create a project folder called AngularBlogApp

From the project folder, create a new Angular app using the following command:

Once you have the client app created, navigate to the project folder and install the required dependencies using Node Package Manager (npm).

Start the client server using npm.

You should have the application running at http://localhost:4200/.

Setting Up the Application

Your Angular web app will have a root component. Create a folder called root inside the src/app folder. Create a file called root.component.html and add the following HTML code:

Add a file called root.component.ts and add the following code:

Remove the files app.component.html, app.component.ts, app.component.scss, and app.component.spec.ts. You will have only one file called app.module.ts inside the src/app folder.

Import the RootComponent inside the app.module.ts file.

Include the RootComponent in the ngModules and bootstrap it.

Save the changes and restart the server. You will have the RootComponent displayed when the application loads.

You’ll be using Angular Router for routing in our blogging app. So import routing-related dependencies in a new file called app.routing.ts inside the src/app folder.

Define the route path along with the components as shown:

Export the routes to create a module with all route providers.

Here is how the app.routing.ts file looks:

As seen in the above code, you haven’t yet created the LoginComponent. It’s been added for the sake of clarity.

Import the ROUTING class in the app.module.ts file. 

Include it in the NgModule imports.

Place RouterOutlet in the root.component.html page. This where the route’s component gets rendered.

Create a folder called login inside the src/app folder. Inside the login folder, create a file called login.component.ts and add the following code:

Create a file called login.component.html and add the following code:

Save the above changes and restart the server. As the per the routes defined when the application loads the LoginComponent will get displayed.

Login Component -  Blogging App

Creating the Login Component

You already laid the foundation for the LoginComponent while setting up the application. Let’s create the view for the LoginComponent using Bootstrap.

Download and include the bootstrap CSS style in the assets folder and include the reference in the src/index.html page.

Place a wrapper around the app-root in the index.html page.

Add the following HTML to the login.component.html page.

Create a file called login.component.css inside the login folder and add the following CSS style.

Modify the @Component decorator to include the CSS style.

Save the above changes and try loading the application. You will have the LoginComponent displayed with the login view.

Login Screen Angular Blogging App

Creating the Login Service

LoginComponent will need to interact with the database to see if the logged-in user is valid or not. So it will need to make API calls. You’ll keep the database interaction portion in a separate file called login.service.ts.

Create a file called login.service.ts and add the following code:

Import the LoginService in the LoginComponent and add it as a provider in the component decorator. 

Add a method called validateLogin in the login.service.ts file which will make the API call. Here is how it looks:

As seen in the above code, it returns an observable which will be subscribed in the login.component.ts file. Here is how the login.service.ts file looks:

Implementing User Login Validation

Add the ngModel directive to the input elements in login.component.html.

Add a click event to the sign in button.

Here is how the modified login.component.html looks:

Define and initialize the user variable in the login.component.ts file.

The User model has been defined in the src/app/models folder. Here is how it looks:

Define a method called validateLogin which will be called on button click. Here is how the method looks:

When both username and password have been entered, the validateLogin method subscribes to the LoginService method to validate the user login.

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

Wrapping It Up

In this part of the Angular blogging app tutorial series, you saw how to get started with creating a web app using Angular. You created the basic structure of the Angular app and created the LoginComponent which will enable the user to validate the username and password. 

In the next part of the tutorial series, you’ll write the REST API for user login validation and create the home component.

Source code from this tutorial is available on GitHub.

Do let us know your thoughts and suggestions in the comments below.

Powered by WPeMatico

Leave a Comment

Scroll to Top