Spring Boot And Angular Material Full Stack Development

Create the BRM database and student table with defined columns, then configure a MySQL data source in IntelliJ IDEA, and run the project to verify successful setup.

Create three student dto classes—student dto, student save dto, and student update dto—with fields id, name, address, mobile, and active, using Lombok to generate constructors and getters/setters for front-end data.

Implement the add student flow in Spring Boot by wiring the controller to the student service and repository, using an entity and DTO, and exposing a post /save endpoint.

Learn to view student records in a Spring Boot and Angular Material full stack app by exposing a get all students endpoint, mapping entities to DTOs, and validating via Postman.

Learn to run an Angular project by installing dependencies with npm, using ng serve to launch the app on localhost:4200, and viewing the welcome page built from the app component.

Apply Angular CSS styles by creating and referencing a component CSS class to color headings and paragraphs, experimenting with red, blue, and navy colors.

Learn to implement an angular material card by importing the card module, updating app.module.ts, applying the predefined material css, and embedding the card html in the component to render.

Build a header component with a Bootstrap navbar integrated into an Angular app, style with custom CSS, and implement a student management system interface using Angular Material and Bootstrap.

Run the Spring Boot backend, fetch all students via the API, and display them in a material design table with id, student name, address, mobile, and active. Implement pagination.

Configure the http client module and perform a get all students request to load api data into an Angular Material table with a data source and paginator.

Create a new spring boot todo app project using spring initializer, configure maven, and set java 17 with dependencies for mysql, jpa, and web.

Create and implement employee dto from the front end in a Spring Boot project, including employee dto, save dto, and update dto, with Lombok and Maven dependencies.

Configure the rest controller to receive employee data via DTO format and request body with post mapping, then delegate to a service which saves the employee through a JPA repository.

Implement a one-to-many relationship where one employee has many tasks in Spring Boot by configuring the employee with one-to-many mapped by employee and the task with many-to-one join column employee_id.

Create a task controller, define a task service interface and implementation, and build a task repository to enable front-end DTO requests to flow through controller and service to the database.

Update a task via a put /update endpoint using a task update DTO, verify the task exists by id, map changes to the entity, and save via the task repository.

Open the angular project in VSCode using the terminal and the code dot command, then run ng to start the project and view the home page on the running port.

Create two Angular components, employee and task, in the src/app folder using ng generate component for an Angular 17 project.

Explore how to install angular material and style integration in your project by running ng add angular material, placing styles in the app folder, and selecting indigo pink with animations.

Bind employee name, address, and mobile to input fields with ngModel, and import FormsModule in app.module.ts to enable ngModelOptions standalone true for active state binding.

Install and integrate sweet alert 2 in an Angular Spring Boot full stack app, set up delete confirmations, and display success messages such as employee has been saved or updated.

Design the task table and form, outlining fields such as task id, task name, description, complete, and employee, with edit, delete, view, and pagination in the backend api.

Set up Angular routes by replacing HTML links with routerLink, define paths for employee and task, connect them to their respective components, and configure the router outlet for navigation.

Load employee data into a dropdown list in an Angular task component by fetching employees via HTTP client, populating an array, and binding employee id and name to the dropdown.

learn to edit and update tasks by wiring the front end to a Spring Boot back end via a put API, mapping task id, name, description, complete, and employee id.

Explains how to implement a clear button in the task component, wiring a click event to a clear method that empties all fields and resets the form.