AngularProject

This project was generated with Angular CLI version 18.2.12.

Angular Project Documentation

Introduction

This project is a basic Angular application demonstrating user authentication, component-based routing, and API communication. It includes auth/login, home, and admin components and uses HttpClientModule for API interactions and localStorage for token management.

---

Prerequisites

Before starting, ensure you have the following installed on your system:

1. Node.js: Download and install Node.js.
2. Angular CLI: Install globally via npm:

   npm install -g @angular/cli

---

Getting Started

1. Create a New Angular Project

1. Create a new Angular application:

   ng new my-app

2. Navigate to the project directory:

   cd my-app

3. Start the development server:

   ng serve

   The application runs at http://localhost:4200.

---

2. Project Setup

Clear Entry File

1. Open src/app/app.component.html.
2. Remove existing content and add the following:

   <main class="main">
     <router-outlet></router-outlet>
   </main>

   This serves as the entry point for other components.

---

3. Add Components

3.1. Login Component

1. Create the auth/login component:

   ng generate component auth/login

2. This component will handle user login.

3.2. Home Component

1. Create the home component for the index page:

   ng generate component home

2. This will serve as the landing page.

3.3. Admin Component

1. Create the admin component for admin functionality:

   ng generate component admin

2. This component will handle admin-related actions.

---

4. Routing Setup

1. Create the routing configuration file src/app/app.routes.ts:

   import { Routes } from "@angular/router";
   
   export const routes: Routes = [
     {
       path: "",
       async loadComponent() {
         const m = await import("./home/home.component");
         return m.HomeComponent;
       },
     },
     {
       path: "login",
       async loadComponent() {
         const m = await import("./auth/login/login.component");
         return m.LoginComponent;
       },
     },
     {
       path: "admin",
       async loadComponent() {
         const m = await import("./admin/admin.component");
         return m.AdminComponent;
       },
     },
     { path: "**", redirectTo: "" }, // Redirect undefined routes to home
   ];

2. Import the routes into AppModule:

   import { provideRouter } from "@angular/router";
   import { routes } from "./app.routes";
   
   bootstrapApplication(AppComponent, {
     providers: [provideRouter(routes)],
   }).catch((err) => console.error(err));

---

5. API Integration

5.1. Install HttpClientModule

Import HttpClientModule into your project for API requests:

import { HttpClientModule } from "@angular/common/http";

@NgModule({
  imports: [HttpClientModule],
})
export class AppModule {}

5.2. Example API Request

Example usage of HttpClient for API interaction:

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

@Injectable({
  providedIn: "root",
})
export class AuthService {
  constructor(private http: HttpClient) {}

  login(credentials: { email: string; password: string }) {
    return this.http.post("http://localhost:5000/api/v1/auth/login", credentials);
  }
}

---

6. Local Storage Usage

Storing Tokens

Store the accessToken and user data in localStorage after login:

localStorage.setItem("accessToken", token);
localStorage.setItem("user", JSON.stringify(user));

Retrieving Tokens

Retrieve the accessToken when making authenticated API requests:

const token = localStorage.getItem("accessToken");

Clearing Tokens

Clear tokens during logout:

localStorage.removeItem("accessToken");
localStorage.removeItem("user");

---

7. Project Commands

Start Development Server

ng serve

Build the Project

ng build

Test the Project

ng test

---

Folder Structure

my-app/
├── src/
│   ├── app/
│   │   ├── auth/
│   │   │   ├── login/
│   │   │   │   ├── login.component.ts
│   │   │   │   ├── login.component.html
│   │   │   │   ├── login.component.css
│   │   │   │   ├── login.module.ts
│   │   │   ├── register/
│   │   │   │   ├── register.component.ts
│   │   │   │   ├── register.component.html
│   │   │   │   ├── register.component.css
│   │   │   │   ├── register.module.ts
│   │   ├── home/
│   │   │   ├── home.component.html
│   │   │   ├── home.component.ts
│   │   ├── admin/
│   │   │   ├── admin.component.html
│   │   │   ├── admin.component.ts
│   │   ├── app.routes.ts
│   ├── index.html
├── package.json
├── README.md

---

License

MIT License

---

Feel free to contribute to this project by creating pull requests or opening issues.

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.