leolanese / angular-nodejs-restapi

Angular + NodeJS REST Api - Full Stack Development Workflow

Angular (17+) + NodeJS Users Rest Api. Full-Stack Development Workflow

Goal

Show the use of Angular services to consume local and remote end-points, provided localy by NodeJS & ExpressJS and remotly using JsonPlaceHolder` Services. We will be using Angular 17+ with stand-alone component and services.

---

Fetching Users from my NodeJS (and ExpressJS) Rest API

// Front-End
🅰️ Creating an Angular app + Angular Material
 - Initialise GIT repo from GITHUB
 - Create APP:
    - ng new users-rest-api --style=scss
    - code .
    - cd /user-rest-api/npm start
🚉 Adding Angular Material UI
    - ng add @angular/material
🚙 Adding the HttpClient
    - mkdir services
    - cd src/app/services
    - ng g s API-user
    - mkdir models
    - cd src/app/services
    - ng g i users
    - using HTTP Client
🛴 Defining service & interface
    - user Interface (based on public API Service `https://jsonplaceholder.typicode.com/users`)
👥 Fetching & Displaying users

// Back-end
🧨 Endpoint Customisation
    - Moving out from `jsonplaceholder` to local NodeJS Rest API
    - mkdir rest-api-nodejs
    - cd rest-api-nodejs
✨ initialising NodeJS with ExpressJS 
    - npm init -y
    - npm i express
    - npm i morgan
    - npm i cors
    - notepad server.js (add content)
    - node --loader ts-node/esm server.mjs
    - Adjust the `package.json` from "type": "module" to use imports
    - Test API end-point: http://localhost:3000/users
🎇 Adding Image Source for Users
    - Using RoboHash for random images (https://robohash.org/${user.id}.png?set=set1&size=45x4)
    - Test App: http://localhost:4200/

Demo

---

Local mock users locally to be served

// server.mjs
import express from 'express';
import cors from 'cors';

const app = express();
const PORT = 3000;

const users = [
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "[email protected]",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  },
  {
    "id": 2,
    "name": "Ervin Howell",
    "username": "Antonette",
    "email": "[email protected]",
    "address": {
      "street": "Victor Plains",
      "suite": "Suite 879",
      "city": "Wisokyburgh",
      "zipcode": "90566-7771",
      "geo": {
        "lat": "-43.9509",
        "lng": "-34.4618"
      }
    },
    "phone": "010-692-6593 x09125",
    "website": "anastasia.net",
    "company": {
      "name": "Deckow-Crist",
      "catchPhrase": "Proactive didactic contingency",
      "bs": "synergize scalable supply-chains"
    }
  },
  {
    "id": 3,
    "name": "Clementine Bauch",
    "username": "Samantha",
    "email": "[email protected]",
    "address": {
      "street": "Douglas Extension",
      "suite": "Suite 847",
      "city": "McKenziehaven",
      "zipcode": "59590-4157",
      "geo": {
        "lat": "-68.6102",
        "lng": "-47.0653"
      }
    },
    "phone": "1-463-123-4447",
    "website": "ramiro.info",
    "company": {
      "name": "Romaguera-Jacobson",
      "catchPhrase": "Face to face bifurcated interface",
      "bs": "e-enable strategic applications"
    }
  },
  {
    "id": 4,
    "name": "Patricia Lebsack",
    "username": "Karianne",
    "email": "[email protected]",
    "address": {
      "street": "Hoeger Mall",
      "suite": "Apt. 692",
      "city": "South Elvis",
      "zipcode": "53919-4257",
      "geo": {
        "lat": "29.4572",
        "lng": "-164.2990"
      }
    },
    "phone": "493-170-9623 x156",
    "website": "kale.biz",
    "company": {
      "name": "Robel-Corkery",
      "catchPhrase": "Multi-tiered zero tolerance productivity",
      "bs": "transition cutting-edge web services"
    }
  },
  {
    "id": 5,
    "name": "Chelsey Dietrich",
    "username": "Kamren",
    "email": "[email protected]",
    "address": {
      "street": "Skiles Walks",
      "suite": "Suite 351",
      "city": "Roscoeview",
      "zipcode": "33263",
      "geo": {
        "lat": "-31.8129",
        "lng": "62.5342"
      }
    },
    "phone": "[phone]",
    "website": "demarco.info",
    "company": {
      "name": "Keebler LLC",
      "catchPhrase": "User-centric fault-tolerant solution",
      "bs": "revolutionize end-to-end systems"
    }
  }
];

app.use(cors()); // Enable CORS for all routes

// Checking if the application is in development mode
// If it is, morgan middleware is added to the express application to log HTTP requests
if(process.env.MODE === 'development'){
  app.use(morgan('dev'))  
}

app.use(express.json());

app.get('/users', (req, res) => {
  res.json(users);
});

// Starting the express server and listening for connections on the specified port.
app.listen(PORT, (err) =>  
    (err) ? console.error(`Failed to start server: ${err}`) :  console.log(`Server running on: ${PORT}`)
);

---

This project was generated with Angular CLI version 17.0.9.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test to execute the unit tests via Karma.

---

💯 Thanks!

Now, don't be an stranger. Let's stay in touch!

🔘 Linkedin: LeoLanese

🔘 Twitter: @LeoLanese

🔘 Portfolio: www.leolanese.com

🔘 DEV.to: dev.to/leolanese

🔘 Blog: leolanese.com/blog

🔘 Questions / Suggestion / Recommendation: [email protected]