Hey kids! I am learning Angular and have come away with some small takeaways for folks that have limited coding knowledge so far. I am learning Angular 11, so any other version may not be accurately portrayed.
I decided to start with the tutorials on the Angular site here and set up some test projects in StackBlitz. My first one is here if you want to check out the gloriousness https://angular-hqcgzp.stackblitz.io
I ran into some things that weren't explained when I moved into setting up a solution in Visual Studio Code that I thought I'd share. Not every student is aware of some of what these things mean.
I am taking the course in Pluralsight from Deborah Kurata and noticed in her ReadMe explanation in GitHub, not everything is explained to someone unfamiliar with Node, or an IDE in general. Here are a few tips in case you're on the struggle bus.
Link to the course in Pluralsight I'm referring to:
Link to the code for the course:
Below you'll find more detail to fill in some blanks in the ReadMe file from the GitHub repo above. If you are familiar with these things, skim through for any helpful hints. If not, you're a pro! Look at you go!!
First, you need to check to see if you have Node.js installed. Open a command prompt by typing 'command' into the Windows search bar.
Open the command prompt and check your node version, as shown below. If you do not have Node installed, go to https://nodejs.org/en/download/ and install the latest version that is needed for the system you're on.
You will also want to install Visual Studio Code here if you haven't already. This is free to download and there is only 1 current version, unlike Visual Studio IDE.
Once you have all your tools, you can then clone the repo. If you are unsure how to do this, you can install Git here. There are lots of options, but this is relatively universal. I also use SourceTree, GitHub, and Visual Studio itself.
Assuming you use Git, open Git GUI and clone the existing repo. You get the repo link from GitHub, as shown below.
Open Git GUI
Choose 'clone existing repo'
Copy clone URL from GitHub and enter into Git GUI where asked
Once you have successfully clones, verify in your fole folders you see something similar to this:
Now right click on the Solution folder - GettingStarted - and choose 'open with VS Code'
The solution should open in VS Code and look like this:
Now you need to open the terminal to use for your command line prompts. If you don't see the terminal in the bottom right of the screen, click 'view' in the main menu, then scroll and click on 'terminal'
You should now see the terminal at the bottom of the page
We want to navigate to the 'APM-Start' project. In order to do this, right click on the project you want the terminal to command, and choose 'open in integrated terminal'. You should then see your terminal directed on that project.
Now, you can install node on that project. Type 'npm install' in the terminal window. A lot of things will be happening, so give it time to complete.
FINALLY!! We are ready to run this ish!! Type 'npm start' into the command terminal
And Voila! You should see a new browser tab/page open to localhost:4200 that says: Welcome to Angular: Getting Started!!
I hope these tips helped, please let me know in the comments if you have additional troubles or feedback on the steps provided.
Now, on to learn some Angular .... and hopefully like it ... đ