Admin Panel in Angular 8 with NodeJS and MongoDB

Introduction

Angular is a popular JavaScript framework used for building robust and scalable web applications. One of the key features of Angular is its robust and user-friendly admin panel, which can be used to manage and administer the application's data and settings. In this tutorial, we will learn how to create an admin panel in Angular 8 with NodeJS and MongoDB.

What you will learn

In this tutorial, we will cover the following topics:

• Setting up a new Angular 8 project with NodeJS and MongoDB
• Creating an admin panel with Angular Components and Services
• Authenticating users with JWT (JSON Web Token) and Angular Guards
• Handling CRUD (Create, Read, Update, Delete) operations with MongoDB
• Implementing routing and navigation for the admin panel

Prerequisites

To follow this tutorial, you will need the following:

• NodeJS installed on your system (version 14 or higher)
• MongoDB installed on your system (version 4.2 or higher)
• Angular CLI installed (version 8 or higher)
• A code editor or IDE (such as Visual Studio Code)

Step 1: Create a new Angular 8 project with NodeJS and MongoDB

Open a terminal or command prompt and run the following command to create a new Angular 8 project:

ng new angular-admin-panel

Follow the prompts to select the project name, package manager, and other options.

Next, install the required dependencies for NodeJS and MongoDB by running the following command:

npm install express mongoose body-parser

Create a new file called server.js in the project root and add the following code:

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.json());

mongoose.connect('mongodb://localhost:27017/admin-panel', { useNewUrlParser: true, useUnifiedTopology: true });

app.get('/api/data', (req, res) => {
  const Data = mongoose.model('Data', { name: String });
  Data.find().then(data => res.json(data));
});

app.listen(3000, () => console.log('Server started on port 3000'));

This code sets up an Express server and connects to a MongoDB database. It also defines a single endpoint for retrieving data.

Step 2: Create an admin panel with Angular Components and Services

In the Angular project, create a new directory called admin and add the following components:

• admin.component.ts
• admin.component.html
• data.service.ts
• data.model.ts

admin.component.ts

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-admin',
  templateUrl: './admin.component.html',
  styleUrls: ['./admin.component.css']
})
export class AdminComponent {
  data = [];

  constructor(private dataService: DataService) { }

  ngOnInit(): void {
    this.dataService.getData().then(data => this.data = data);
  }
}

admin.component.html

<h1>Admin Panel</h1>
<ul>
  <li *ngFor="let item of data">{{ item.name }}</li>
</ul>

data.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private http: HttpClient) { }

  getData(): Promise<any> {
    return this.http.get('/api/data').toPromise();
  }
}

data.model.ts

export interface Data {
  _id: string;
  name: string;
}

These components and services provide a basic admin panel with a list of data fetched from the NodeJS server.

Step 3: Authenticate users with JWT and Angular Guards

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

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  private accessToken = new BehaviorSubject<string>('');
  get accessToken$(): Observable<string> {
    return this.accessToken.asObservable();
  }

  constructor(private http: HttpClient) { }

  login(username: string, password: string): Promise<any> {
    return this.http.post('/api/login', { username, password })
     .toPromise()
     .then(response => {
        this.accessToken.next(response.accessToken);
      });
  }

  logout(): Promise<any> {
    return this.http.post('/api/logout', {})
     .toPromise()
     .then(() => {
        this.accessToken.next('');
      });
  }
}

This service provides authentication using JWT and stores the access token in a BehaviourSubject.

Create a new file called auth.guard.ts and add the following code:

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private authService: AuthService, private router: Router) { }

  canActivate(): boolean {
    if (!this.authService.accessToken$.getValue()) {
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }
}

This guard checks if the user is authenticated before allowing them to access the admin panel.

Step 4: Handle CRUD operations with MongoDB

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

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  private apiUrl = '/api/data';

  constructor(private http: HttpClient) { }

  getData(): Observable<any> {
    return this.http.get(this.apiUrl).pipe(map(response => response.data));
  }

  postData(data: any): Observable<any> {
    return this.http.post(this.apiUrl, data).pipe(map(response => response.data));
  }

  putData(id: string, data: any): Observable<any> {
    return this.http.put(`${this.apiUrl}/${id}`, data).pipe(map(response => response.data));
  }

  deleteData(id: string): Observable<any> {
    return this.http.delete(`${this.apiUrl}/${id}`).pipe(map(response => response.data));
  }
}

This service provides CRUD operations for the Data model using the NodeJS server.

Step 5: Implement routing and navigation for the admin panel

Create a new file called app-routing.module.ts and add the following code:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from './auth.guard';
import { AdminComponent } from './admin/admin.component';
import { LoginComponent } from './login/login.component';

const routes: Routes = [
  { path: 'admin', component: AdminComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent },
  { path: '', redirectTo: 'login', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

This module defines the routing for the admin panel and authenticates users using the AuthGuard.

That's it! You now have a fully functional admin panel in Angular 8 with NodeJS and MongoDB.