archety/frontend-ui-employees repository overview

⁠Angular Frontend – Bootstrap + Signals + Reactive Forms

Educational frontend application built with Angular, Bootstrap, Signals, and Reactive Forms.

This image is designed as the frontend layer of the Archety Full Stack learning project and communicates with the ASP.NET Core REST API backend.

The project demonstrates how to build a modern Angular application connected to a real backend and SQL Server database through a complete Docker-based Full Stack architecture.

⁠⚠️ Backend dependency

This frontend is designed to work together with the Archety ASP.NET Core REST API image.

The backend provides the REST endpoints used by Angular to manage employees and departments.

The complete application architecture is:

Angular Frontend
       |
       | HTTP / JSON
       v
ASP.NET Core REST API
       |
       | Entity Framework Core
       v
SQL Server
       |
       v
CompanyDB

The frontend therefore depends on the REST API being available and correctly configured.

⁠Main technologies

• Angular
• TypeScript
• Bootstrap
• Angular Signals
• Computed Signals
• Reactive Forms
• Angular Router
• HttpClient
• Dependency Injection
• REST API integration
• Docker
• Nginx

⁠Application features

The frontend provides a user interface for managing:

⁠Employees

• List employees
• View employee data
• Create a new employee
• Edit an existing employee
• Delete employees
• Select departments
• Form validation
• Reactive UI updates

⁠Departments

• Load department data
• Display department information
• Use departments inside employee forms

⁠Angular Signals

The project demonstrates Angular Signals for reactive state management.

Example:

employees = signal<Employee[]>([]);

Signals are used to store and update application state.

Example update:

this.employees.update(
  employees => [
    ...employees,
    newEmployee
  ]
);

The UI automatically reacts when the signal changes.

⁠Computed state

The project also demonstrates computed values.

Example:

employeesCount = computed(
  () => this.employees().length
);

Computed signals automatically update when their dependencies change.

⁠Reactive Forms

Employee creation and editing are implemented using Angular Reactive Forms.

Example:

employeeForm = this.fb.nonNullable.group({
  firstName: [
    '',
    [
      Validators.required,
      Validators.maxLength(255)
    ]
  ],

  lastName: [
    '',
    [
      Validators.required,
      Validators.maxLength(255)
    ]
  ],

  employeeRole: [
    ''
  ],

  employeeCode: [
    '',
    [
      Validators.required,
      Validators.maxLength(10)
    ]
  ],

  departmentRef: [
    0,
    [
      Validators.required,
      Validators.min(1)
    ]
  ]
});

The forms demonstrate:

• FormBuilder
• FormGroup
• formControlName
• Validators
• patchValue
• getRawValue
• form submission
• client-side validation

⁠Routing

Angular Router is used to navigate between application pages.

Example routes:

/employees
/employees/insert
/employees/edit/:id

This allows the application to separate:

• employee list
• employee creation
• employee editing

⁠REST API integration

The application uses Angular HttpClient to communicate with the backend.

Example:

getAll() {
  return this.http.get<Employee[]>(
    this.apiUrl
  );
}

The frontend consumes endpoints such as:

GET     /api/employees
GET     /api/employees/{id}
POST    /api/employees
PUT     /api/employees/{id}
DELETE  /api/employees/{id}

and:

GET     /api/departments

⁠Example data flow

Angular Form
     |
     v
Reactive Form
     |
     v
Employee Service
     |
     | HTTP POST
     v
ASP.NET Core API
     |
     v
Entity Framework Core
     |
     v
SQL Server

The same flow is used for read, update and delete operations.

⁠Bootstrap

Bootstrap is used for the user interface.

The project demonstrates:

• Containers
• Forms
• Tables
• Buttons
• Alerts
• Validation styles
• Responsive layouts

Example:

<button
  class="btn btn-success"
  type="submit">

  Create Employee

</button>

⁠Docker architecture

The Angular project is compiled using Node.js and served using Nginx.

The Docker image uses a multi-stage build:

Node.js
   |
   | npm ci
   | npm run build
   v
Angular dist
   |
   v
Nginx
   |
   v
Static frontend

This keeps the final runtime image small and efficient.

⁠Dockerfile concept

Build stage:

FROM node:22-alpine AS build

WORKDIR /app

COPY package*.json ./

RUN npm ci

COPY . .

RUN npm run build

Runtime stage:

FROM nginx:alpine

COPY --from=build /app/dist/frontend/browser /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

⁠Nginx and Angular Router

When Angular Router is used, Nginx should redirect unknown frontend routes to index.html.

Example configuration:

server {
    listen 80;

    server_name localhost;

    root /usr/share/nginx/html;

    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

This allows routes such as:

/employees/edit/5

to work correctly even after a browser refresh.

⁠Docker Compose

Example configuration:

frontend:
  image: archety/angular-company-frontend:latest

  ports:
    - "4200:80"

  depends_on:
    - backend

The frontend can then be accessed at:

http://localhost:4200

⁠Full Stack architecture

The complete project can be deployed using Docker Compose:

┌─────────────────────────────┐
│ Angular + Nginx             │
│ localhost:4200              │
└──────────────┬──────────────┘
               |
               | HTTP / JSON
               v
┌─────────────────────────────┐
│ ASP.NET Core .NET 10 API    │
│ localhost:8080              │
└──────────────┬──────────────┘
               |
               | Entity Framework Core
               v
┌─────────────────────────────┐
│ SQL Server                  │
│ CompanyDB                   │
└─────────────────────────────┘

⁠Educational project

This image was created primarily for educational purposes.

The goal is to demonstrate how Angular can be used as the frontend of a real Full Stack application.

The project progressively introduces:

• Angular components
• Standalone components
• Angular Router
• Services
• Dependency Injection
• HttpClient
• Signals
• Computed Signals
• Reactive Forms
• Validation
• REST API integration
• Bootstrap
• Docker
• Nginx
• Full Stack containerization

⁠🎓 Complete YouTube course

The complete project is explained step by step inside the free Archety YouTube course:

https://www.youtube.com/playlist?list=PLoZNHBEyxFQF_WPhyI1dBR6H3dBkOUqwO⁠

The course covers the complete Full Stack architecture:

• SQL Server
• Docker
• Docker Compose
• ASP.NET Core .NET 10
• Entity Framework Core
• REST APIs
• DTOs
• Angular
• Bootstrap
• Signals
• Reactive Forms
• Routing
• HttpClient
• Frontend / Backend integration
• Dockerized Full Stack deployment

⁠Related images

This frontend is part of the same Full Stack learning environment as the ASP.NET Core backend and SQL Server database.

SQL Server image:

https://hub.docker.com/repository/docker/archety/sqlserver-emplyees⁠

The Angular frontend communicates with the ASP.NET Core REST API, which in turn uses this SQL Server image.

⁠Archety

Archety is a technical education project focused on practical software development, DevOps, cloud technologies and modern development stacks.

🌐 Website
https://www.archety.dev⁠

▶️ YouTube Channel
https://www.youtube.com/@archetydev⁠

🎓 Full Stack Course
https://www.youtube.com/playlist?list=PLoZNHBEyxFQF_WPhyI1dBR6H3dBkOUqwO⁠

⁠License

This project is provided for educational purposes.

You are free to use, study and modify the source code for learning and experimentation.

Please provide appropriate attribution when redistributing substantial portions of the project.

⁠Author

Archety

Software Development, DevOps and Technical Training.

https://www.archety.dev⁠