added fake api call

.npmrc

@@ -0,0 +1,3 @@
+registry=https://nexus.armundia.com/repository/npm-public
+//nexus.armundia.com/repository/:_authToken=NpmToken.d8eed85e-3da0-3098-b802-07d9f4ab5c54
+always-auth=true

angular.json

@@ -65,7 +65,8 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "angular-project-demo:build"
+            "browserTarget": "angular-project-demo:build",
+            "proxyConfig": "proxy.config.json"
           },
           "configurations": {
             "production": {

db.json

@@ -0,0 +1,63 @@
+{
+  "posts": [
+    {
+      "id": 1,
+      "title": "Hello World"
+    },
+    {
+      "id": 2,
+      "title": "Another Post"
+    }
+  ],
+  "users": [
+    {
+      "id": 1,
+      "name": "John Doe",
+      "email": "john@example.com",
+      "role": [
+        "Admin"
+      ]
+    },
+    {
+      "id": 2,
+      "name": "Jane Dooee",
+      "email": "jane@example.com",
+      "role": [
+        "User"
+      ]
+    },
+    {
+      "id": 3,
+      "name": "Bob Smith",
+      "email": "bob@example.com",
+      "role": [
+        "Moderator",
+        "User"
+      ]
+    },
+    {
+      "id": 4,
+      "name": "Alice Johnson",
+      "email": "alice@example.com",
+      "role": [
+        "User"
+      ]
+    },
+    {
+      "id": 5,
+      "name": "Mike Brown",
+      "email": "mike@example.com",
+      "role": [
+        "Admin"
+      ]
+    },
+    {
+      "name": "test",
+      "email": "test",
+      "role": [
+        "Admin"
+      ],
+      "id": 6
+    }
+  ]
+}

package.json

@@ -26,8 +26,13 @@
     "ag-grid-community": "^22.1.1",
     "bootstrap": "^4.1.1",
     "core-js": "^2.5.4",
+    "cors": "^2.8.5",
+    "express": "^4.17.1",
     "font-awesome": "^4.7.0",
+    "json-server": "^0.16.3",
     "rxjs": "~6.3.3",
+    "swagger-jsdoc": "^6.0.0",
+    "swagger-ui-express": "^4.1.6",
     "tslib": "^1.9.0",
     "zone.js": "~0.8.26"
   },

proxy.config.json

@@ -0,0 +1,9 @@
+{
+    "/api": {
+      "target": "http://localhost:3001/api",
+      "secure": false,
+      "changeOrigin": true,
+      "logLevel": "debug"
+    }
+  }
+  

server.js

@@ -0,0 +1,35 @@
+const express = require('express');
+const swaggerUi = require('swagger-ui-express');
+const swaggerJsdoc = require('swagger-jsdoc');
+const jsonServer = require('json-server');
+
+const app = express();
+const port = 3001; // different from Angular 4200
+
+const cors = require('cors');
+app.use(cors());
+// Swagger setup
+const options = {
+  swaggerDefinition: {
+    openapi: '3.0.0',
+    info: {
+      title: 'Fake API',
+      version: '1.0.0',
+    },
+  },
+  apis: ['./swagger.yaml'], // Your API spec
+};
+
+const swaggerSpec = swaggerJsdoc(options);
+
+app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerSpec));
+
+// JSON Server setup
+const router = jsonServer.router('db.json');
+const middlewares = jsonServer.defaults();
+app.use('/api', middlewares, router);
+
+app.listen(port, () => {
+  console.log(`🚀 Server running at http://localhost:${port}`);
+  console.log(`📚 Swagger docs at http://localhost:${port}/api-docs`);
+});

src/app/app.module.ts

@@ -1,6 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-
+import { HttpClientModule } from '@angular/common/http';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { MenuComponent } from '../components/menu/menu.component';
@@ -17,6 +17,7 @@ import { DashboardComponent } from 'src/components/dashboard/dashboard.component
   imports: [
     BrowserModule,
     AppRoutingModule,
+    HttpClientModule 
   ],
   providers: [],
   bootstrap: [AppComponent]

src/components/menu/menu.component.html

@@ -1,6 +1,6 @@
 <nav class="navbar  navbar-dark bg-dark navbar-expand-lg bg-body-tertiary">
   <div class="container-fluid">
-    <a class="navbar-brand" href="#">Navbar</a>
+    <a class="navbar-brand" href="#">Angular Tutorial</a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>

src/components/users/users.component.html

@@ -1,3 +1,13 @@
-<p>
-  users works!
-</p>
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-12">
+      <button class="btn btn-primary" type="button">Add new User</button>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-12">
+      <!-- Table of users -->
+      <p>users works!</p>
+    </div>
+  </div>
+</div>

src/components/users/users.component.scss

@@ -0,0 +1,4 @@
+button{
+    float: right;
+    margin: 2rem;
+}

src/components/users/users.component.ts

@@ -1,15 +1,44 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit } from "@angular/core";
+import { ServicesService } from "src/services/services.service";
 
 @Component({
-  selector: 'app-users',
-  templateUrl: './users.component.html',
-  styleUrls: ['./users.component.scss']
+  selector: "app-users",
+  templateUrl: "./users.component.html",
+  styleUrls: ["./users.component.scss"],
 })
 export class UsersComponent implements OnInit {
-
-  constructor() { }
+  users: any[] = []; // where you store users
+  newUser: any =  {
+    name: 'test',
+    email: 'test',
+    role: ['Admin'] 
+  };
+  constructor(private servicesService: ServicesService) {}
 
   ngOnInit() {
+    this.getUsers();
   }
 
+  getUsers() {
+    this.servicesService.get<any[]>("users").subscribe(
+      (data) => {
+        this.users = data;
+        console.log("Users loaded:", data);
+      },
+      (error) => {
+        console.error("Error loading users:", error);
+      }
+    );
+  }
+  createUser() {
+    this.servicesService.post('users', this.newUser) 
+      .subscribe(
+        response => {
+          console.log('User created successfully:', response);
+        },
+        error => {
+          console.error('Error creating user:', error);
+        }
+      );
+  }
 }

src/services/services.service.ts

@@ -7,7 +7,7 @@ import { Observable } from 'rxjs';
 })
 export class ServicesService {
 
-  private baseUrl = 'https://your-api-url.com/api'; // Set your base URL
+  private baseUrl = 'http://localhost:3001/api'; 
 
   constructor(private http: HttpClient) {}
 

swagger.yaml

@@ -0,0 +1,17 @@
+openapi: 3.0.0
+info:
+  title: Fake API
+  version: "1.0"
+paths:
+  /api/posts:
+    get:
+      summary: Get all posts
+      responses:
+        '200':
+          description: List of posts
+  /api/users:
+    get:
+      summary: Get all users
+      responses:
+        '200':
+          description: List of users