Getting Started with Angular Using Visual Studio Code

In this article, we are going to set up an Angular app using Visual Studio Code. We will use Angular CLI to demonstrate.

Angular is a web application framework written in typescript. A web browser such as Chrome, Firefox or Internet Explorer only includes JavaScript, so we have to compile our Typescript to JavaScript, and we use a typescript compiler that requires NodeJS.

NodeJS

Node.js is an open-source and cross-platform JavaScript runtime environment which is required to run the Angular applications.

Go to Node JS official page to download Node Js Package

https://nodejs.org/en/download/

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.


Angular CLI

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
https://code.visualstudio.com/download

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.


https://code.visualstudio.com/docs/getstarted/introvideos

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
https://angular.io/cli

First Angular App

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

Conclusion

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.
https://corevoila.in/category/angular/


Leave a Reply

Your email address will not be published. Required fields are marked *