Friday 18 September 2020

Angular TicTacToe

Previously we created dotnet core tic tac toe api, now let's make a companion Single Page Application SPA, using Angular, why you may ask? To be honest i have to brush up on it, so firstly update npm, update node and install angular. with that done lets get stared

create an angular project named tictactoe-spa

ng new tictactoe-spa

you'll be prompted some questions, say yes to routing, and choose SCSS for styling.

creating the project may take a while, at least it did for me.

and the above is what you should more or less end up with.

now if you execute the command 

ng serve --open 

you should see something like the following 

and then automatically your browser should open and navigate to http://localhost:4200/

if your application isn't automatically opened then just manually navigate to localhost:4200 and that is it you now have your angular app up and running.

now lets open up our solution in ms code, if we look at our file structure we see something like the following in our src/app folder, this is where our actual app resides.

lets start by moving some of these files to their own folder, you dont have to do this, I Prefer to do it just because it really irks me to have more than one type of file in a folder, i always end up clicking on the wrong file.

lets start with the easy one, the app-routing.module.ts; create a folder called routing and place it in there, once that is done make sure to open the app.module.ts file and update the import path.

next lets move the app.component assets into a folder called root, and again you are going to have to open up your app.module.ts file and update the path

with those two done we can now remove the out of the box sample code, lets start with the app.component.html file. this is where the UI of our component is defined, just replace everything in there with 

  hello world!!!

next lets open the app.component.ts file

It's pretty straight forward, the class has a decorator that specifies the:

  • selector: what the html tag used represent this component
  • templateUrl: either a path to a file represnting the UI, or it can even be hard-coded as a string
  • styleUrls: an array of strings that are paths to various style sheets.
and the meat of our component the class this is where all of our programming would go. 

now lets take a look at our application so run ng serve again and navigate to http://localhost:4200

what a masterpiece.