How To Run AngularJS In Visual Studio Code

Angular is a JavaScript framework for building client-side applications. These are applications that run entirely in the user’s browser. We use HTML and CSS to build the user interface, and we write our code in TypeScript, an enhanced version of JavaScript. TypeScript is the programming language we use when building Angular applications.

Download NodeJS

The first step is to have a Node running on your system; specifically, we need the NPM package manager, which comes bundled with it. You can visit nodejs.org and download it there.

Download Node
Download VS Code from the official website according to the version of your operating system.

How To Run AngularJS In Visual Studio Code?

Step 1: Installing Angular CLI

The Agular CLI is a command-line interface that we can use to create a new project. It is complete with web-pack configurations and tools for packaging your app for production. To install Angular CLI, follow the below steps:

  1. Open Command Prompt
  2. Type and run the following code:
    npm install -g @angular/cli

    NPM Install
    Enter the following command to install the Angular CLI: npm install -g @angular/cli

Step 2: Creating New Project

Now, we can create our new project. Inside Command Prompt, type and run the following code:

ng new angular-example
New Project
Enter the following command to create a new project: ng new angular-example

The above command will create a folder or project named “angular-example” on the Desktop.

Step 3: Opening The Project

Now that we’ve created the project let us open it in the VS Code. Follow the steps below:

  1. From the sidebar, select the Explorer tab or press Ctrl + Shift + E. Click on Open Folder.

    Open Folder
    Click on the Open Folder button.
  2. Select the folder which we just created in Step 2. In my case, it will be “angular example.” Then, click on the Select Folder button.

    Directory
    Select the folder from your preferred directory.
  3. Here’s the project the CLI created for us. You’ll notice that it has created a number of things, including the app folder. This is where you’ll do most of your coding in an Angular project.

    New Project Structure
    The project folder will open in the explorer panel of VS Code.

Step 3: Running The Project

Do the following to run the code:

  1. Inside the terminal, type and run the following code:
    npm start

    NPM Start
    Enter the following command to run the angular project: npm start
  2. The CLI then builds the application, starts a web server, and opens the URL in the default browser, as shown in the image below:

    Angular Project
    This is the output of the default Angular project.

Was this article helpful?

Leave a Comment