Spring Boot + Angular 8 CRUD Example | Spring Data | Java Techie
HTML-код
- Опубликовано: 7 сен 2024
- This video explain you how to develop a CRUD (Create, Read, Update, Delete) Web Application using Angular 8 as a front-end and Spring boot 2 restful API as a back-end.
#javatechie #SpringBoot #Angular 8
Angular Playlist :
• Angular For Beginners ...
GitHub:
github.com/Jav...
Blogs:
javagyanmantra...
Facebook:
/ 919464521471923
guys if you like this video please do subscribe now and press the bell icon to not miss any update from Java Techie
Disclaimer/Policy:
--------------------------------
Note : All uploaded content in this channel is mine and its not copied from any community , you are free to use source code from above mentioned GitHub account
Bro that " OK " of yours always gives me Chills .... thank you for this tutorial
This is exactly what I was looking for. Great tutorial on Angular and Springboot.
have you done update functionality to this??
Simplified way of explanation and easy to understand, it is helpful Thank you!!!
One of the best tutorial I have ever gone through😍
This is a very good tutorial, easy to understand. It will be helpful if there is a multi micro services.
Okay I will do
thanks for releasing this video ,waiting for more in angular8 and spring boot
Great headstart for a quick overview front end backend integration.. Good work
Thank you for your explaination ...i thought its difficult but it looks easier than what i am thinking of...Best Of luck
I like this series so much. It helped me lot to learn angular. Best series for backend developer.
Wonderful explanation sir..i have learnt lot of things from this channel.
Good to hear this Ananya . keep learning
Excellent ..Super presentation and examples used.. Thank you!!
Great end to end tutorials
thanks for your tutorial, I got troubled on configuring but still solved it so I got the app up and running on my local.
Really nice contents very useful
Good information sir...thank you so much for uploading .
I am learning a lot from your videos
@Java Techie The user.ts class just has a constructor with no class members in it ( pardon me for Java terminology ). I was not able to execute your code 'cos the compiler was throwing and error at registration.component.html stating that name ( and others) property is not identified for User type. When I added the missing class members in user.ts the code works fine.
Hey can you please elaborate a bit, because I'm getting the same error.
Hey got I got your point and it worked, thanks man!
How to add please rply me bro
I also getting the same error please help me
@@harshkumar-tz1ipplease help me bro
Thank you so much for this tutorial.. it helped me a lot.🙏
when i click on delete the page doesn't automatically refreshes but i manually have to refresh the page to see the changes and also the search is not working well
oh sorry... my bad ... i didn't subscribe to the data properly
now it works like a charm
Great and Simplest tutorial , thanks
From ngOnInit() did you call getAll() method as I wrote .
Search should work please inspect it and verify request is going or not
wow ...sir am new subscriber after watching this I feel i want to angular ....pls upload more videos ...
1.has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
2.net::ERR_FAILED
3.HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "localhost/Voting/api/addUser", ok: false, …}
Buddy how you could be putting so hard? I really appreciate your time and hard work :) God bless you brother.
Thanks Naveed
thankyou for the best explanation 🙏
Thank you soo much for awsome tutorial,,,
Thanks very helpfull
great tutorial gets u up to speed. althpugh i was never able to work my dleete out. the ids never show up on the webpage and delete functionality doesnt work. not sure why. :(
Hi .. I seen this is great to understand HTTP in angular and crud too.. I will check rest of your videos ..it's crystal clear.. If you have any angular training please let me know ..
Hi please checkout my angular playlist .
Great Job, appreciated and very helful for me to know CRUD operaton is performed in Angular
Awesome tutorial! Thank you.
Awesome
Your videos are very much useful..can you make video on COVID vaccination management project using spring boot and angular ...it would be a great help for me..thanks in advance
Awesome idea man , I never thought this let me give a try
@@Javatechie Thanks a lot sir
It was really very helpful
Great video Sir 👍👍👍
talking about backend code , their is no need of service interface and its implementation ????
bcos i havnt get code for service and its implementation ,plss explain asap, bty video is osm ,very helpful....
Best explanation
excellent video
Good job thanks for the upload
Can u please respond soon... because I'm trying to replicate the same thing which u have done in this video so that I can understand better... I was searching for this kind of video I got it... it is very beautifully explained I understand better from this video.
your like god
@
Java Techie
for me getting response from the bakend but on UI it is not binding for the findByEmail
Error please?
I am not able to use Object property in the html page, it is showing giving me error Property name does not exist on the component, any help please
Excellent tutorial for beginners SPRINGBOOT+ANGULAR+MYSQL !!
If we use Spring Cloud (Config Server + Service Registry + ELK) Microservices, possible to call Service-Name from the registry instead of hardcode the RESTful API?
Kudos !!
Hi, thanks for your video. One question. In spring boot, the base url is localhost:9090. Then you use it in angular. My question if you don't hard code it, how can you pass it from spring boot to angular? The base url maybe dynamically changed.
You need to configure in some central place to avoid this .
Example you can use vault , consul
Useful video on angular, Please upload few more videos on angular
User object is not recognizing.. Anyone suggest me on this
Did you save all your files before run start server
@@Javatechie Thank you it's working.. It's just an awesome session. Please upload multiple videos on spring batch
getting earror in component.html that name does not exit on type registrationCompnents
Great video (as usual).. but why no more on the back end. You are only showing the rest controller class. You didn't show any of your lower level implementation.
BTW, keep it up! You are quickly becoming one of my favorite youtubers.
Thank you Nate ,
Here I focous more on controller because it will easy for viewers to understand how client can communicate with server .
@@Javatechie I understand.
Hi Sir, We had some security issues in Spring Security like avoiding multiple logins, session time out, browser incompatibility, XSS protection, and SQL injection. How to solve those issues in Angular. if possible plz make a video on the above things sir. It will be much useful to integrate angular and spring boot. Thanks in advance sir.
Please do let me know your exact scenario so that I can plan accordingly
Thank you😊
Nice tutorial Java Techie!!!
One question, how do you run this in production? shouldn't there be a build command which builds the angular and dumps the JS files into the spring boot resources folder for spring boot to pick up?
Yes in production we shouldn't use this codebase
We need to generate prod build then it will generate dist folder with all compiled files
Java Techie ah ok thought so. Any guides on how to do this? Or is it the same as with react bundle.js?
I want to integrate my Angular with Spring Boot, but not use any JpaRepository or CrudRepository. I do not want to save or do anything related to database, just merge the Angular UI with Spring backend. Can anyone help me what do I need to do ?
You can refer same example just avoid writing persistent layer
facing error like property domain,experience,name does not exist on type User.What to do please help anyone
There are small syntactical changes in upper angular 8 version just add ! Before datatype of each variable in ts file
super Bro
Awesome 💞
intro track is a banger
Hi,
for this line , i don't want to use click action, i want to use an action onchange ,should i use Pipe filter or there is another action instead of click ?
Thanks
Hi Ninoos , pipes can be only applicable in attribute level
Onclick and onchange used to trigger an event
@Java Techie, how to pass a single value like how to pass only the name from the complete object 'user' in the angular service. I have my complete 'user' being passed as an argument. How to get only the first name in method body?
As part of request you want to send only name instead of User obj right?
@@Javatechie Yes but the method argument remains same i.e. user. But I want to pass only user name that is stored in user object using form.
@@devyanshgoyal9228 can we connect through TeamViewer else share your code in GitHub so that I can check it out
@@Javatechie I will share the link of github. Please check and revert.
excellent , thanks for this vidoe
excellent
hello sir i have a question if our spring boot application i am using 2 pathvariable in getmapping url so how can call this in angular
please let me know how can create this .
In HttpClient you need to append two parameters like below
localhost:8080/users/{field1}/{field2}
hi
I am facing this issue while using [(ngModel)]
localhost/:1 Refused to load the image 'localhost:4200/favicon.ico' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
please help
Spring not use in intelliJ community?
Thanks brother
Nice tuto! Thanks!
hey thanks for thsi video i am not able to import {User} statment please help me asap
Manually add it in import then
Can you also put a tutorial for the spring boot part?? Can you also explain what is the postman? I am really new to these concepts.
In my backend code find by email isn't working the rest are working fine.. can u tell me what to do?
This was the code i had written:
@GetMapping("users/{username}")
public List findUserbyUsername(@PathVariable String username)
{
return b_repository.findByUsername(username);
}
the error thrown was Failed to convert value of type 'java.lang.String' to required type 'int'; For input string: "RUclips"
Check the data type of username in your entity class also verify your repository class data type
i had two problems here, one is with delete, Access to XMLHttpRequest at 'localhost:8080/cancel/1' from origin 'localhost:4200' has been blocked by CORS policy:
solution : instead@DeleteMapping use @GetMapping. and in user.ts class you should use public name:string,
public ....etc
Hi,
First of all I would like to thank you for this tutorial. I am facing a issue while using [(ngModel)] in the html file but its working completely fine with ng-model. Could you please let me know the reason for it?
What error you are getting can you please mention that
@@Javatechie localhost/:1 Refused to load the image 'localhost:4200/favicon.ico' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
Hello basant bhai i have one doubt we are mentioning selector name of a component as a html tag in aap.component.html .but when we have multiple component then how can we mention the selector name in aap.component.html. see for example we have two component registration and search ...for registration i want to view register page separately and for search i want to view search page separately ...so please help me to solve this problem.
We can add multiple selector otherwise you can use router
Yes actually I removed router-outlet tag from app.component.html...thanks for your help
Hello,
First of all I would like to thank you for the wonderful application. I am facing some issue while implementing [(ngModel)] in the html file . Could you let me know the reason for it? Here I have attached the details. Angular cli version 10.0.7 and error code is error TS2339: Property 'name' does not exist on type 'Product'. (Product is a class in angular and name is a property in the class like user and name in your application).
NgModel is used to perform 2 way data binding
Basically form input I want to bind into Product.ts object .
So I believe your error because you didn't save your file .
Java Techie
Thanks for the quick reply. I copied your code as it is . I am using angular cli 10.0.7 while running I am getting error in HTML page (user.name . Etc..) i saved the file but still I am getting the same error . If you can give me solution it would be very helpful for me.
@@kanjirathunkaljohnson2422 please send complete error message to javatechie4u@gmail.com I will cg🔥 this out
Java Techie
Will do it today
Could you check your email
Master!
Hey , Once i send post request using postman, save Null value for all fields. why ?
Are you getting this exception in backend if yes then please verify your json request attribute name should be same as your variable name
where is java code its not in github repository????
Yes it's there please check with name "registration-service"
Access to XMLHttpRequest at 'localhost:9191/api/addProduct' from origin 'localhost:4200' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. Help me
I have written angular in visual Studio and spring boot in eclipse. Now how could I run angular ui on localhost of spring boot means 8080 port instead of localhost:4200
Even I want to know that, I am searching from while and I came to this tutorial to understand but he didn't show hear
@
Java Techie If possible please give us a link to know how to access angular UI from springboot server
@@RajeshHatwar I solved it... I can help u if needed
@@DeepakKumar-kz5dz thank you very much Deepak, but I have done this with the help of my friend. Thanks for your reply.
@@RajeshHatwar ok.. No issue
Hi! I'm a java developer and new on Fron-End, how do I deploy that angular application? Could I deploy it in the same server I deployed my BE application?
Already I uploaded how to deploy in pcf just have a look
can you please mention the video name for the same.
Deploy angular application in pivotal cloud foundry
All Data return null what should i do please tell i used getter and setter but still same issue
Configure lombok in your ide
@@Javatechie Thanks a lot you saved my life. God gives you more and more what you want to achieve in life and make your family life Healthy. This is my wish from my side.
Thank you so much for your word buddy 😊
@@Javatechie Hello sir i tried to changed the attribute name in database and in eclipse user. Java file but it will not show the output of all attribute after changing name
What should i do?
Where did you change in entity class ?
Give me next tutorial link of this video
please upload more videos sir
Hi Java Techie,when i use put method its updated only empty values i can't identify where the issue @spring boot or @angular here my code please help me out in this issue -service- public up(id :any,user : Employee){
return this.http.put("localhost:8080/update/"+user.id,user,{responseType:'text' as 'json'})
}-up_compon-public up(){
let respo= this.serv.up(this.user.id,this.user);
respo.subscribe((data)=>this.message=data);
}
private _user: Employee = new Employee();
public get user(): Employee {
return this._user;
}
public set user(value: Employee) {
this._user = value;
}
And when I check with postman update works fine
Add logger in your controler method to verify value coming from client or not
Else directly debug it
@@Javatechie direct debugging
Hi, I got below error . I created emp Object in registration.ts file
src/app/empregistration/empregistration.component.html:40:91 - error TS2339: Property 'domain' does not exist on type 'Emp'.
40
Why emp.domain why can't you pass directly attribute name i.e domain?
@@Javatechie You paased the value as user.name,user.domain right. same I created ngmodel and emp object like below code
here I am using Angular 9
@@Javatechie We need to set values to emp object then pass that object to http request. So, we mention like emp.domain ..etc
Please save all your files before you start ng server .
May be HTML file not saved 🤔
@@Javatechie All files saved and I mentioned all fields in user.ts file
I GOT this issue Once i send post request using postman, save Null value for all fields. why ?
Your attribute name should be same in both server and client application
@@Javatechie i given same but still i get null insertions
Debug your backend code and see what value you are getting from client
Parameter 'user' implicitly has an 'any' type., how to resolve this error?
Hi.. I have cloned the code from GitHub as a maven project into eclipse. But the problem is front end code is not imported only back code is imported into eclipse. Can you please help me on this.
Front end code better to import in visual studio , not in eclipse
@@Javatechie Don't we have any other way to use this code through eclipse
@@sruthiselva6958 yes we can do it in eclipse as well , could you please Google it I never tried
I got the frontend code through GitHub but where to find the backend Code ??? can u please share the backend code which u have used in this video.???
Hi backend code is available in same repository please check
Yeah Got it. Thank u soo much
Thank you
app.component.css is missing in the repo .. Please reupload
Hi, your tutorial is good, where is githublink for spring-boot application which you shown in the video ??
Thanks man , it's mentioned in video description
instead of port 4200, how can we make all those APIs to work on port 8080?
You need to allow cross origin for all URL
Hi it's great video. I have some doubt in service class. In this tutorial you have used user argument when write register method but that user argument not declared why ? Where from angular fetch that user argument in the post method
Are you taking about backend or frontend
Hi Basanth, Can you please share the video if any you already have for the registration service DB connection setup. Also any free SQL DB we can download and use it in local setup is needed. Thanks in Advance!
Appreciate your efforts on the Angular and Spring boot courses you did so for. Its excellent.
Thank you Rajesh , yes DB connection code is there in GitHub link please check in video description
@@Javatechie Java Techie I downloaded the code and trying to execute the same but i am getting below error. Can you help me on this please?
The last packet sent successfully to the server was 0 milliseconds ago. The driver has not received any packets from the server.
at com.mysql.cj.jdbc.exceptions.SQLError.createCommunicationsException(SQLError.java:174) ~[mysql-connector-java-8.0.15.jar:8.0.15]
at com.mysql.cj.jdbc.exceptions.SQLExceptionsMapping.translateException(SQLExceptionsMapping.java:64) ~[mysql-connector-java-8.0.15.jar:8.0.15]
at com.mysql.cj.jdbc.ConnectionImpl.createNewIO(ConnectionImpl.java:835) ~[mysql-connector-java-8.0.15.jar:8.0.15]
at com.mysql.cj.jdbc.ConnectionImpl.(ConnectionImpl.java:455) ~[mysql-connector-java-8.0.15.jar:8.0.15]
a
I am getting error in ngmodel in html file
Nice basant but you have not used any observable in service class??
No I subscribe it in component.ts
@java Techie
I'm getting an error like this please help me out
Access to XMLHttpRequest at 'localhost:8086/springproject/addcustomer' from origin 'localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
You need to enable cross origin
Add this piece of code in your config class or main class
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurerAdapter() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**").allowedMethods("GET", "POST", "PUT", "DELETE").allowedOrigins("*")
.allowedHeaders("*");
}
};
}
@crossorigin annotation not working... Cannot be resole to a type error... Please help me out
When you are getting this error ? From backend ?
Kindly check my source code and compare it
@@Javatechie actually I have already a spring boot project which runs with jsp...i m trying to make angular backend class in same project... Is it possible if yes then I m getting above error
Did you enabled cross origin in your Spring boot project
How to do that?
Hi Basant when I am trying to call register api from angular it gives this error : Access to XMLHttpRequest at 'localhost:8080/user-api/register[object%20Object]' from origin 'localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I have added @CrossOrigin(origins = "*") also in the rest controller
Mine was getting blocked because for the delete request I was using return this.http.get("localhost:9090/UserRegisterAPI/cancel/"+id);
instead of
return this.http.delete("localhost:9090/UserRegisterAPI/cancel/"+id);
How get method will work for delete?
How to get date value from input type date and send it to server in angular 8 plz explain
Use @JsonFormat in backend and from angular send it as a string
@@Javatechie i m new bro plz make a video on that
When I'm clicking the Register button it is not showing anything, I have checked the code it's the same as everything.
Please add console.log() to check register () method is invoking or not
@@Javatechie I got the error. Now it's working
@@shubhamnavghare1937 can you please tell me how is it fixed?
Hi Bhayya,i have found in GIThub only boot code ,i did not find angular code.
Brother it's there please check once again
@@Javatechie but i unable import angular project
,ur teaching is amzing
@@Javatechie i am new angular js please help me bhayya for this
what application you used to configure the request body in the beginning of the video?
postman
hello Can I get update operation for the same angular app