In this article, we are going to set up an Angular app using Visual Studio Code. We will use Angular CLI to demonstrate.
Go to Node JS official page to download Node Js Package
According to your system configuration download and install the latest version of LTS.
Following installation tries below commands in command prompt to ensure that the installation is successful.
- node -v
This command will show installed version of node
- npm -v
This command will show installed version of npm
Upon successful node installation both commands will show the installed version number in command prompt
NPM (Node Package Manager)
It is an online repository for the publishing open-source Node.Js projects also NPM provides command line interface tools for interacting with the repository, downloading the packages etc.
by initializing scaffold Angular applications directly from a command shell. Technically, we do not need angular CLIs for the development of angular applications. But CLI, make development life much easier by saving time.
To install angular CLI use following command on command line
npm install -g @angular/cli
After installing NodeJS and Angular CLI we are ready for development. But we need code editor to start the work so let’s install Visual Studio Code
**Note – you can choose any code edition like Atom, Sublime Text, Webstorm etc.
Visual Studio Code
Visual Studio Code is a free source-code editor made by Microsoft for Windows, Linux and macOS. To download follow the link
Install the latest version of VS Code
Before going further, I highly recommend having walk through the visual studio code interface, thanks to the Microsoft for the great documentation and tool.
Basic Angular CLI commands
Now we are ready to work on angular using visual studio code. So, let’s take a look at some of the Angular CLI commands to work in Angular.
These are some of the command for please follow the link
First Angular App
- Open the Visual Studio Code and navigate to View → Terminal
2. This will open the terminal window, as shown in the below image.This will open the terminal window, as shown in the below image.
3. Create a new directory for demo project and go to that directory using below command in terminal
a. mkdir Demo
b. cd Demo
4. Create a new project using angular CLI command a. ng new Demo after using above command in terminal, it will ask some question like Would you like to add Angular routing? Which stylesheet format would you like to use? Just use the arrow keys or press the ‘y’ key in the terminal to create a project, it will take some time to create a new project.
5. After project creation completed click on File → open folder and choose newly created folder ‘Demo’ to load the files into editor
6. Click on explorer tab to view the scaffold files created by the angular CLI command
7. Go to terminal window again (View → Terminal) and run below command to run the project
a. cd demo
b. ng serve
8. upon successful execution of command you can go to browser and type path to see the project http://localhost:4200/
Hurray, we have successful created our first angular application in visual studio code.
These are the steps and procedures to start with angular using the visual studio code editor. Project structure and scaffold files will see in the next post, for more tutorials on Angular follow the link.