Angular for Beginners – Let’s build a Tic-Tac-Toe PWA
Learn the basics of Angular 8 ? by building a tic-tac-toe game ?️ from scratch…Then deploy it as an installable progressive web app (PWA). Go beyond the basics ?
Full Source Code:
Angular Docs:
#angular #pwa #tutorial
Take Angular quizzes ?
iOS
Android
Upgrade to Fireship PRO at
Use code lORhwXd2 for 25% off your first payment.
For anyone confused at the Angular Console plugin part, Nx Console is the new name of the extension
Also if you run into an issue with using ng new after npm installing the angular cli on windows, you may need to run your terminal as an admin; that’s what I had to do
Very helpful, Thanks.
thank you so much
thank you
thanks for the comment!
I know your channel is not for complete beginners, but I really hope you do more explanation videos for people starting out like me, I really love your style but many things and concepts went over my head … I have so much to learn.
Thanks for everything man, you’re an inspiration.
@Abdou Benbada Jquery is… meh
same
I do like the fact that he mentions a lot of something but some of them very shortly. At least you know “what you don’t know” (and can always google it). In some courses that I have taken on Angular, they don’t mention those concepts and then I found myself in a situation in which I didn’t event know what to google…
Hope you are having fun and that you kept learning webdev! 😉
It would be great to have a tutorial with Angular and NestJS (even better if there is websocket in it!). Two very powerful frameworks, same global architecture, two powerful CLIs and same language. Thanks for your work!
@Fireship Where videos? ?
Angular/Nest make a great combo. Most Nest content is high on my todo list.
This is pure gold. Thank you! I am starting out Angular and I would love to see a bit more content that is aimed for beginners but anyway you got yourself another pro member, absolutely love this tempo, explanations and I am even excited about the intermediate content that you have for pro members. Great job!
Thank you Milos! Awesome to hear that 🙂
This is great, this video was my first experience developing something with Angular and really liked it! A few steps are overlooked but everything makes sense in the end.
Thanks for your hard work.
Been a Front end Dev in Angular and this is the first time I see a different third party library for UI stuff besides Bootstrap, Material and Foundation. Love your courses 🙂
Cool video! Just a question: at 12:00, wouldn’t it be more simple to do just this:
this.squares[idx] = this.player;
Instead of splicing?
Amazing, but one additional improvement: You should prevent additional moves when the winner is known. Adding something in the makeMove method will solve this (i.e. if the winner is not null, then return)
Great video!! I have all my developers working me following you!!! Keep it up!! I hope you get into the details of lazy loading, not much out there on this and I think it would be beneficial to everyone!!
For people struggling towards the end because of Nx Console, you can type in the commands normally in your terminal window.
These are the commands I needed to use towards the end of the project to deploy it:
ng add @angular/fire
ng add @angular/pwa
ng build (can be done in nx console)
ng deploy
thank you!
not working for me :c
lifesaver
Nicely done! Would be great to see this implemented in Sapper/Svelte. It’s great seeing solid, working principles all through.
@Fireship Thanks! Looking forward to your next post.
You will see more Svelte content on the channel soon. I have a big project planned 🙂
Don’t panic if the Nx console doesn’t have the add command. You can still use ‘ng add @angular/pwa’ through the console (as with other add commands).
As other comments, I would say that this is far from being a beginner tutorial, but thank you for sharing your knowledge man!
Hey there Fireship, love the tutorials, they’ve really accelerated my learning. I ran into a problem with this that I am scratching my head over. The tic tac toe board functions, but the buttons don’t fill type divs. Not sure if there was something omitted or it’s because the vids already outdated, couldn’t find where I missed it.
This was a great introduction to angular for me and I’m excited to learn this framework! Hard to debug though, since all the generated code makes the process sort of invisible on the front end. I can see why its so worth learning now!
I run in the same problem. Your can create or add following styles to the square.components.scss
“button {
width: 100%;
height: 100%;
font-size: 5em !important;
}”
or you need to copy it into styles: [ ] in the square.component.ts if you used inline functionality
Can I just say that you are a great teacher. Never though my brain could understand programming / but you make it approachable
2:25 BTW if you’re using VSCode terminal you can do “code . -r” and it will refresh that VSCode window with the current folder as root, no need to open a new window 🙂
Wow man, I really enjoyed this tutorial, thank u very much and congrats!
I do believe this is not for total beginners but is what people with a lil’ bit more experience with the framework and want to speed up need.straight to the point, and short.
Looking forward to keep checking ur vids 🙂
Hey! thank you so much for the cool content, very helpful.
when I click on one of the squares the next available one gets highlited instead, I thought it was just a problem I cause after customizing some stuff.
I noticed it happens in your version too, I know the board technically works fine but do you (or anyone) know why it happens? how do I fix it ?
Thank you.
I’m seeing the same thing. It also happens in this video. I haven’t yet solved it either ?
Awesome, I’ve learned so much, thanks a lot!
great explanation but for me personally using the ui for generating the components instead of the terminal, i didn’t understand a bit but now i understood angular much better thanks