A project built using Angular for frontend, ASP.NET Core for creating the WebAPI(backend) and MS SQL Server for database management for easy employee and department details management with add, edit, delete, sort and filter features.
Welcome page:
Departments page:
Add/Edit Department pop-up:
Employees page:
Add/Edit Employee pop-up:
Open MS sql server management studio and create the tables using the folder "tables". Execute and save the tables.
Open Visual Studio Community version and Create a new ASP.NET Web API project. Add the files from folder "api" to this project.
Dowload the following packages from NuGet package manager.
Microsoft.EntityFrameworkCore.SqlServer
Microsoft.EntityFrameworkCore.Tools
Microsoft.EntityFrameworkCore.SqlServer.Design
Microsoft.EntityFrameworkCoreRun the following command in Program Console Manager:
Scaffold-DbContext "connection_string" Microsoft.EntityFrameworkCore.SqlServer -fThe connection string will vary with the database you are using , you can also use Visual Studio local database.
Add the same connection_string in appsettings.json file with the name "EmployeeAppCon".
Make a "Photos" folder , the uploaded employee images will be saved here. Build the project and Run the api. You can check the working of api on postman or by enabling swagger in your program.cs.
Next step is to create the angular project. Make sure you have npm , node.js and angular cli installed. You can check their versions as follows
npm -- version
node --version
ng -version
#install angular-cli
npm install -g @angular.cliYou can create the components of deparment , employee and welcome by running command:
ng g c component_folder/component_nameThe service can be created by command:
ng g s SharedServiceAll the codes for the angular components(.html and .ts files) alongiwth the shared service files can be found in the folder "app".
To run the app make sure your web api is successfully built and running. Run the command:
ng serve -oWelcome page comes up.