Build or Set Up Your First Angular App with Visual Studio Code

Lets See how to Develop IOS App Using Phonegap/Cordova
February 28, 2018

Build or Set Up Your First Angular App with Visual Studio Code

first-angular-app-with-vs-code

Build or Set Up Your First Angular App with Visual Studio Code

In this article we will be seeing how to setup an environment to build our first angular app with VS code editor. To start using the environment we need to install few software’s, to begin with we will be needing to install node js. To install node js, follow the below steps.

Steps to install Node Js:

Step one:

Visit https://nodejs.org/en/download/, and select the preferred operating system and download the installable file.

Step Two:

Install the downloaded file, you will be prompted with the installation dialogue box. Select the destination folder, and agree the terms and conditions, and select the default value unless you need any specific feature. And the finish the install.

Step Three:

To verify whether the install is successful, open command prompt, and run the following commands.

Node –v

Npm –v

This completes the installation of node.js.

Step Four:

Installing angular cli, to install angular cli, enter the following command in you command prompt.

npm install –g @angular/cli

in this the –g represents that its globally defined.

This will take a few minutes to get installed. Once its completed, close the current command prompt and reopen it and type the following command to verify the install.

ng v

This completes the installation of angular.

The next is to install an editor there are many editors that can be used as per the user’s preferences. In this we will be using VS code editor. To check out which is the best editor to use please check this link for better understanding. To install VS code, visit the following link and download the installable file according to your operating system. https://code.visualstudio.com/download/

Once installed, open the VS code editor, and in the menu select Terminal and open a new terminal. Now navigate to the specific folder, where you want to create your new project and run the following command in the VS code terminal.

ng new my-app

This will create a new folder with all the necessary modules to build your new application. Now run the following command to run your created project.
ng serve

Once you run this, your application will be compiled for errors and on completion it will give you a URL which you can open it in the browser to check your output.

For angular material examples visit : https://material.angular.io/

Leave a Reply