Full Stack + Angular 18 Material + Node JS + MongoDB
In this Video, We will be building a Full Stack project for Student system in which we'll use Angular 18 as a Frontend and Node JS as Backend and MongoDB as a Database.
We will first create one database and collection on MongoDB Database side using MongoDB Compass tool which is user interface for creating database and collection for MongoDB database.
Our database will store student related documents in students collection.
On the backend side We are going to create Backend application using Node JS and implement all the CRUD functionality using node JS API.
We will also test our backend API's using Postman and verify results in database side.
On the frontend side we are going to create our angular standalone application using version angular 18 and install angular material library for creating material table.
We can create proxy configuration in angular so that our angular application will communicate with backend application which is running on different port.
Next we will create required components like module,service, component and interface using ng generate command.
Next we will add routing logic so that It will navigate to home component.
We will create angular material table and populate it with columns and data.
We will implement all the http methods like get, post, put and delete using HttpClient provider in service component.
We will implement GetMapping method and render returned data in our Material Table.
Next we will implement searching (filter), sorting and pagination functionality with the help of angular material library and apply it on table data to confirm these functionalities are working as expected.
We can integrate our get api data and show returned data on home page along with action buttons like edit and delete on table in html page.
Next we will use Mat From Fields and Input Material controls to capture data in input fields and submit the same on click of submit button.
Similar way we can populate Form fields with data on click of edit button in table and update modified data into MongoDB database on click of submit button.
Finally, To remove the student from table We will implement delete functionality as a part of CRUD Operations.
Full Stack + Angular 18 Material + Node JS + MongoDB
Full Stack + Angular 18 + Node JS + MongoDB
Full Stack with Angular 18 Node JS & MongoDB
Full Stack with Angular 18 and Node JS
Nodejs Angular with MongoDB Crud Application
Full Stack Web Development
angular full stack project
Full Stack Node JS API with Angular (ADVANCED)
MongoDB Full Stack
angular full stack project
Full Stack with Angular 18 standalone and Node JS
angular 18 standalone with Node JS
Full web application | Node JS | Angular
Full web application | Node JS| Angular 18
Angular + Node JS CRUD Full Stack Application
FULL STACK APPLICATION Node JS || ANGULAR 18 || MongoDB
Full Stack Node JS API with Angular 18
Angular 18 + Node JS + MongoDB
Full Stack Project with Node JS, Angular, and MongoDB
Full Stack Project with Node JS, Angular 18, and MongoDB
Angular + Node JS + MongoDB CRUD Tutorial
Full Stack + Angular + Node JS + MongoDB
Full Stack + Angular 18 + Node JS + MongoDB
Angular + Node JS + MongoDB
Angular + Node JS
Full Stack + Angular + Node JS + MongoDB CRUD Tutorial
Angular projects for beginners
Angular projects with Visual Studio code tutorial
full stack web development course
full stack
Timecodes
0:00 | Introduction
2:47 | Architecture
5:03 | User interface demo
8:48 | Node JS project
14:46 | Node JS mongodb connection
16:57 | MongoDB database
19:46 | Node JS model
22:01 | node js crud | node js controller
32:55 | postman api testing
40:00 | auto increment in mongodb
50:01 | create an angular project
54:34 | proxy configuration in Angular
56:55 | angular generate component
1:00:00 | angular routing
1:02:10| angular material
1:04:32 | angular home component
1:12:50 | table mat table | angular material table
1:18:22 | angular http get example
1:25:40 | css style table
1:26:49 | angular filter
1:29:50 | mat sort | angular sorting
1:33:45 | paginator | pagination
1:36:07 | angular http post
1:41:50 | action button | edit delete action button
1:44:14 | angular http put
1:48:14 | angular http delete
#fullstack #angular #springboot #angular18 #mongodb #codefortechsolutions
Watch video Full Stack + Angular 18 Material + Node JS + MongoDB online without registration, duration hours minute second in high quality. This video was added by user CodeforTechSolutions 11 October 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 127 once and liked it 3 people.