Angular 15 Food Order Project
Creating a login page in Angular and making a login API in Node.js with Express.js is an essential part of building a food order project. In this article, we will walk through the steps to create a login page using Angular and implement a login API using Node.js and Express.js.
Create Login Page in Angular
First, let’s start by creating a login page in Angular. We will use Angular’s CLI to generate a new component for our login page. Open your terminal and run the following command:
ng generate component login
This will create a new folder named ‘login’ inside the ‘src/app’ directory with the necessary files for our login page. Open the ‘login.component.html’ file and add the following code to create a simple login form:
<form>
<div>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
</div>
<button type="submit">Login</button>
</form>
Now, let’s implement the logic to handle the login form submission. Open the ‘login.component.ts’ file and add the following code:
import { Component } from '@angular/core';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent {
constructor() { }
login(form: NgForm) {
// Handle form submission logic here
}
}
With this code, we have created a basic login form in Angular and implemented the logic to handle the form submission. Next, we need to create a login API in Node.js with Express.js.
Make Login API in Node.js | Express.js
To create a login API in Node.js, we need to set up a new Node.js project and install Express.js. Open your terminal and run the following commands:
mkdir login-api
cd login-api
npm init -y
npm install express
Next, create a new file named ‘server.js’ and add the following code to create a simple login API:
const express = require('express');
const app = express();
const port = 3000;
app.use(express.json());
app.post('/login', (req, res) => {
const { username, password } = req.body;
// Handle login logic here
});
app.listen(port, () => {
console.log(`Login API is running at http://localhost:${port}`);
});
With this code, we have set up a basic login API in Node.js with Express.js. We can now handle the login logic inside the ‘/login’ endpoint and connect it to a database or any other authentication system.
Now that we have created the login page in Angular and made a login API in Node.js with Express.js, we can integrate the two to create a complete food order project with user authentication.
By following these steps, you can create a login page in Angular and make a login API in Node.js with Express.js for your food order project. This will allow users to log in and access the food ordering system securely.
There is error in my code ,line no 3 in login.component.html. saying app- title is not a known element.can u plzz help me in resolving this??
Thanks Sir.