Setup
The Complete Angular Course: Introduction
What is Angular
Setting up for Angular Web Development
Angular: Components
Event Handling
Interpolation
Understanding Inputs and Ouputs
Template Reference
Understanding Routing in Angular
Navigation - Navigate between routes
Attribute Directives in Angular
Angular ngClass Directive
ngIf Directive in Angular
ngSwitch Directive in Angular
ngFor Directive in Angular: Repeating HTML
Route Parameter - In Angular
Pipes in Angular
Loading and Using JavaScript in Angular
Hosting Your Angular Website
Dependency Injection
Project 1: Building a Social Media Site Part 1: Setup
Project 1: Building a Social Media Site Part 2: Home Page
Project 1: Building a Social Media Site Part 3: Authenticator
Project 1: Building a Social Media Site Part 4: Login System Part 1
Angular Project 1: Building a Social Media Site Part 5: Login System Part 2
Angular Project 1: Building a Social Media Site Part 6: User Profiles with Cloud Firestore Database
Angular Project 1: Building a Social Media Site Part 7: Create Post Component
Angular Project 1: Building a Social Media Site Part 8: Uploading Posts
Angular Project 1: Building a Social Media Site Part 9: Displaying Posts
Angular Project 1: Building a Social Media Site Part 10: Reply Component
Angular Project 1: Building a Social Media Site Part 11: Leaving Comments
BehaviorSubject
Setting up for Angular Web Development
Learn how to setup an Angular web developer environment on Windows.
In this tutorial, I will walk you through on how to setup your Angular development environment.
First, I will show you how to install visual studio code. The code editor that I be using it throughout the course.
Then I will show you how to install NodeJS and the Angular Command Line Interface tool. This will give us the ability to run commands to operate the Angular Architecture.
Lastly, we will create and start our first Angular project.
Installing Visual Studio Code
To install Visual Studio Code, go to
Then select the download option for the operating system you are using.
You will be directed to another page and your download should start shortly. Wait for the download to finish and start the installer.
Then you will be prompted with series of instructions. Accept agreement, then choose the location you want to install the application. You may stick with the default location that it provides. Click next until you reach the install page and then click install to being the installation.
Once the process is finished, you are done, you have visual studio code installed. Next we will install NodeJS and the Angular command Line interface tool.
Installing NodeJS
To install NodeJS, go to
Select the download option for the operating system you are using and wait for the download process to finish and then run the installer.
You will be prompted with a series of instructions. Begin the process by clicking next and accepting the agreement. Then select the location you want to install NodeJS, leave it at the default location and click next until you reach the install page. Then click install and wait for the process to finish.
And that’s it, NodeJS is installed.
Installing the Angular Command Line Interface Tool
To install the Angular CLI, run the command
npm install -g @angular/cli
and wait for the process to finish.
With that, we are all set. We have VS code, Node JS, and the Angular CLI installed. Next I will show you how we can start our first project.
Starting your first project
Creating a project is easy. We will use some of the Angular CLI commands to help us generate our project files. But first we need a location that is easily accessible to store our project files.
Create a folder at a location that is easily accessible. Then open the terminal or command prompt that points to the folder location.
On windows, you can open a command prompt that points to the folder location by going into the folder. Then type cmd in the file explorer address bar and press the enter key when you are done. This will automatically open a command prompt for that location.
Next run the Angular CLI command ng new follow by the project name. This will generate our project files.
ng new MyFirstAngularProject
You will then be asked questions on preferences for your project. Enter yes for the Angular Routing question. This will give us the ability to navigate between our web pages.
Would you like to add Angular routing? (y/N)
Then select the type of stylesheet you want to use. I will be using CSS.
Which stylesheet format would you like to use? (Use arrow keys)
Once the process finish, close the command prompt and you will see a folder in the folder you have just created.
The first part is completed. We have created our first project.
For the next part, we want to be able to see our project on the browser.
Starting the project
Open the terminal or command prompt in the project folder. Then run the Angular CLI command
ng serve
This command will temporarily create a server to host our Angular web application.
When the process finishes, go to the browser and type
localhost:4200
in the address bar and press enter. You should see what I have on the screen or something similar. It depends on the Angular CLI version you have.
Lastly, I will show you how you can open your project on VS code.
Opening your project on VS Code
To open your project on VS code. Open the command prompt for your project and then run the command
code .
this will automatically open your project on VS code.
Recap
To recap,
We went through how to install Visual studio code, NodeJS, and the Angular Command Line Interface tool.
We learned how use the node -v and ng v commands to check to version of Node and Angular CLI we have installed.
We learned how to open the command prompted by typing cmd in the file explorer address bar.
We learned how to start a local server to host our Angular web application so that we can see our project on the browser.
And we also learned how to open VS code by running the code . command.
