Learn how to create an Angular 11 project from scratch in this full course. It uses a public API to create a game database website. You will gain a great foundation for building Angular applications.
You will learn how to how to set up a project using Angular CLI, how to create components, how to make http calls, how to implement http interceptors, how to make services.
Also you will learn how to set up routes for your application and how to pass data with routes between the components. You will learn to use pipes and various Angular directives like ngFor, ngIf, and more.
โ๏ธ Course created by Slobodan Gajic. Check out his channel:
๐ป Code:
๐ API details:
โญ๏ธ Course Contents โญ๏ธ
โจ๏ธ (0:00:00) Intro
โจ๏ธ (0:01:00) Installation of project and modules
โจ๏ธ (0:04:28) Search bar component
โจ๏ธ (0:06:13) Styling search bar
โจ๏ธ (0:09:36) Creating home component
โจ๏ธ (0:10:03) Creating routes
โจ๏ธ (0:15:08) Styling home component
โจ๏ธ (0:18:58) Creating http service
โจ๏ธ (0:21:23) Creating typescript models
โจ๏ธ (0:23:43) Creating http interceptors
โจ๏ธ (0:28:13) Implementing home component
โจ๏ธ (0:35:13) Implementing sort menu
โจ๏ธ (0:40:28) Creating details component
โจ๏ธ (0:47:13) Styling details component
โจ๏ธ (0:57:43) Details tabs component
โจ๏ธ (1:02:33) Styling tabs
โจ๏ธ (1:04:43) Implementing data into tabs
โจ๏ธ (1:10:38) Final review
—
Learn to code for free and get a developer job:
Read hundreds of articles on programming:
And subscribe for new videos on technology every day:
Can you please make a video tutorial on json, wp ajex and wp rest Api?
That would be much helpful.
Beau thank you for posting my tutorial, I hope it can help all the folks who are trying to get into Angular world. I hope we have more collaboration like this! Enjoy!
Thank you for making this tutorial. It cleared up a lot of things for me and your Angular series is one of the best I have watched. Will you going over ‘Observables’ and ‘subscribers’?
Thank you again.
@Ovuoke Aghwotu Thank you so much for the feedback Iโm glad you liken it.
Yes Iโm gonna cover it as well
Hvala na ovom tutorijalu Slobodane. Lijepo je vidjeti u moru tutorijala i nekoga sa nasih prostora. Pozdrav!
@Luka Mugosa Hvala na podrsci Luka, ima jos bolji tutorial od mene na ovom kanalu pa slobodno pogledaj.
๐
@Tirthesh Pawar did u get the answer for setparams if so plz let me know
Much needed tutorial for brushing up the concepts ! Thanks a lot !
Youโre welcome โบ๏ธ I hope itโs helpful and you can learn thing or two
this is amazing๐๐ waiting for more angular projects
Iโm glad you like it ๐ You can always look for more on my channel ๐
First of all Thanks for the video! I would like to know your preferred VS extension to work with Angular? I saw you make a lot of things faster and I would like to know which are snippets or shortcuts, and which are just video edition…. Thank you!!!
Thank you I appreciate the feedback I hope you liked the video. I use angular VS extension for support and emmet.
I’m new with angular, in this video you are moving too fast, definetly not a beginers one, I will try to understand all anyway. Thank you for your effort and helping the comunity!
@Code with Sloba your channel reference?
Simply run the video at .75 speed. It’s weird but its slightly better
@Raj Gupta haha interesting idea
@Code with Sloba
H
This is amazing. Thank you โค๏ธ๐
thanks for the tutorial! this and another video really got me through the project for the course im taking
I’m super glad for that. For more tutorials feel free to check my channel
If this is meant to be a code along situation, copying and pasting at crazy speeds is pointless. I appreciate the content but making it unusable is rough. Just watching a tutorial is rare and not as useful as being able to follow along
I’m with you on this @stoneowl
Thank you for you feedback, please don’t take it wrong but I tried to be mindfull of people time. I have more tutorials in depth on my channel. I hope I helped at least a bit.
exactly
Did you know the pause button exists? BS critic.
@็ซ็ฝใฎใขใคในใฏใชใผใ You seem nice
It is a very helpful video but too fast, also not for beginners. But still thankyou it gives an idea how to use and what to use.
What would be the next steps to make this that much better and help learn more about angular?
After completing this I am trying to see how I would add to this but it seems my knowledge from this video isn’t enough to take me to that next level of adding things.
Some things I would like to add to start are:
pagination or infinite scrolling
managing state of things like using search and filters doesn’t work properly or returning back to the homepage leaves the search term in search
This is a good course for someone who already knows angular but haven’t worked on it for a while and needs a refresher.
I’m glad you liked it! You can check more detailed tutorials on my channel.
Thank you so much for the tutorial, you explained really well. It would be nice if you would have explained how to get the tokens or API keys, I’m stuck with one of them, I signed up for the Rapidapi API, I went to end points, and I got under game details the KEY and HOST key. However, in minute 26:47 you are working on the ” http-headers-interceptor” and you explained that you will pass “params” as a key, and then you added a key for “setParams{ key: ….} Where did you find that key? Where can I get it?
did you find from where they took params key?
Hi, did anyone figure out how to get the key yet for setParams??
hey man, I actually got the key for setParams but I’m struggling to get the x-rapidapi-key for setHeaders, how did u find that?
@Andy Addyx drop the link for Setparams please
I use the same keys show in the video. Works for me
Thanks for the tutorial. A couple of things.. Slow down a lot. This speed works for channels like Fireship that cram everything into like 5 minutes, but this is a follow-along tutorial, so that is not good. Also, I would’ve really like to see more RxJS. I feel like I barely understand what it is useful for in an angular app and why there is so much importance placed on it.
Thank you, btw I think we published much better tutorial right now. Much slower and in details
Thanks for this video, but it wasn’t really helpful to me as a beginner, but an excellent video for someone who needs to brush up his/her past angular skills.
Thank you for taking the time to set this up for us.
There are several things that I would like to point out though.
There are several things that you haven’t written in your code and that may leave some developers wondering what is wrong. For example, you haven’t imported the environment in the httpService or you haven’t added the id field in the Game interface.
When explaining something, saying now I am adding setParameters object to the request, will not make that clearer, a few short sentences should be more than enough.
And so on ๐
Thank you so much for your valuable feedback. This was one of my first tutorials and it can be improved a lot. Btw more details I have in full course about Angular on my channel.
(in Angular V13.)
At [22:35]: In the Models.ts class add the slug:string; property to the ParentPlatform interface.
Otherwise you will get an error when trying to render the gameplatform icons at: [34:00]
Similar at [38:00] add an id to the Game Interface in models.ts
Thanks!
@แแแแแแ แฆแแแแแซแ แแฅ แ แ แแแแแ แแแแแแ ๐ <3
แแแขแ แ แ แแแแแ ๐
Thanks man
bruh im getting server loading error after implementing home component resources are not loading can u please tellme how to resolve it!!!
I know I can pause the video and look at documentation myself, but for things like setting up the http request service and the api is still murky to me. This is a great app idea but I need something a little more of a walk through with an understanding of why things are being written in a particular way with documentation to back it up.
20:53:00 he moves so fast you might have missed him adding the base URL to the Environment.ts file
I started with the backend and now I moved to Angular and this is the first tutorial I’ll do ๐