Angular Adventures: Creating a Tic Tac Toe Game and Sharing My Journey
2023-04-14
Have you ever felt the thrill of discovering a new technology and seeing what you can create with it? That's exactly how I felt when I started learning Angular on April 12th 2023. As I delved into the world of Angular, I was blown away by its power and flexibility, and I couldn't wait to start building my own web applications with it. In fact, I was so excited that I decided to create a Tic Tac Toe game: MyGitRepo, View Here using Angular, and I'm thrilled to share my experience with you today.
Enjoy playing the game here: https://tictactoeangular-7247c.web.app/
In my git repo Tic Tac Toe, this where I use both ngIf and ngFor in board.component.html:
<h1>Current Player: {{ player }}</h1> <button (click)='newGame()'>Start New Game</button> <h2 *ngIf='winner'> Player {{ winner }} won the game! </h2> <main> <app-square *ngFor='let val of squares; let i = index' [value]='val' (click)='makeMove(i)'> </app-square> </main>
As a beginner to Angular, I was particularly struck by the power and flexibility of the ngIf and ngFor directives.
Referring back to my code above:
What is ngIf?
The ngIf directive is used to conditionally render elements in my Angular templates. In the code above, I use ngIf to show a message declaring the winner of the game if there is one. If there is no winner, this element is not shown.
What is ngFor?
On the other hand, the ngFor directive is used to loop through a collection of data and render a template for each item in that collection. In my board.component.html, I use ngFor to iterate over the squares array and create an app-square component for each element. I also use the let i = index syntax to keep track of the index of each item in the array.
Together, ngIf and ngFor provide powerful tools for creating dynamic and flexible templates in Angular.
Conclusion
Overall, learning Angular has been an incredibly rewarding experience for me. From creating my Tic Tac Toe game to exploring more advanced features of the framework, I've been continually amazed by Angular's power and flexibility. I'm thrilled to report that I'm already working on another project using Angular, and I can't wait to see what else I can create with this amazing technology. If you're looking to expand your web development skills, I highly recommend giving Angular a try - you won't be disappointed!
Enjoy playing the game here: https://tictactoeangular-7247c.web.app/
Also on codewithkatyrosli.com
Netlify vs. Vercel vs. AWS vs. Firebase: Which Deployment Platform is Best?, 2023-04-19
Deploying a web application can be a daunting task, with numerous options available to developers. Each deployment platform has its own unique advantages and drawbacks, which can make it difficult to choose the best one for your needs.
In this article, I will compare four of the most popular web application deployment platforms: Netlify, Vercel, AWS, and Firebase. I will examine the advantages of each platform.