This is the front-end user interface for the FullStack application, built using Angular. It provides a user-friendly interface for managing employees.
- Add new employees with their details such as name, email, phone, age, salary, and department.
- View a list of all employees with their details.
- Update existing employee details.
- Delete employees from the system.
- Angular: Front-end framework for building the user interface.
- Tailwind CSS: A utility-first CSS framework used for styling the UI components.
- HttpClient: Angular's built-in module for making HTTP requests to the server.
- RxJS: Reactive Extensions for JavaScript used for handling asynchronous operations.
- FormsModule, ReactiveFormsModule: Angular modules for working with forms and form validation.
- ASP.NET Core: Backend framework for building the Web API.
- Node.js and npm installed on your machine.
- Angular CLI installed globally (
npm install -g @angular/cli).
- Clone the repository:
git clone <repository_url>- Navigate to the project directory:
cd FullStackUI- Install dependencies:
npm install- Start the development server:
ng serve- Open your browser and visit
http://localhost:4200to view the application.
- The base URL for API requests is set to
https://localhost:7048/apiin theenvironment.tsfile. You may need to change this URL according to your backend server configuration.
- To build the production-ready version of the application, run:
ng build --prodThis will create a dist folder with the compiled assets.
This project is integrated with a backend ASP.NET Web API for managing employee data.
- ASP.NET Core: Backend framework for building the Web API.
- Entity Framework Core: ORM (Object-Relational Mapping) framework for interacting with the database.
- Microsoft.AspNetCore.Mvc: Library for building HTTP services and APIs.
- GET /api/employees: Get all employees.
- POST /api/employees: Add a new employee.
- GET /api/employees/{id}: Get employee details by ID.
- PUT /api/employees/{id}: Update employee details by ID.
- DELETE /api/employees/{id}: Delete an employee by ID.
The API uses the following data model for employees:
public class Employee
{
public Guid Id { get; set; }
public string Name { get; set; }
public string Email { get; set; }
public string Phone { get; set; }
public int Age { get; set; }
public decimal Salary { get; set; }
public string Department { get; set; }
}Contributions are welcome! Please fork the repository and create a pull request with your changes.
This project is licensed under the MIT License.