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
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.
