Synopsis
- Introduction
- Install Node.js
- Install Visual Studio Code
- Angular CLI
- First Angular Application
- Conclusion
Introduction
This article explains how to start Angular with Visual Studio Code. Using Visual Studio code we can create an Angular project. Please follow the following steps to achieve this.
Install Node.js
Using the below article link we will learn how to install Node.js in a step by step way. We need to follow these steps to get Node.js installed.
Install Visual Studio Code
Visual Studio Code is a lightweight but powerful source code editor which runs on our desktop and is available for Windows, macOS, and Linux. It comes with built-in support for JavaScript, TypeScript, and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity). We need to download Visual Studio code. Go to https://code.visualstudio.com/.
Now click the “Download for Window” and Save File. It will be downloaded after clicking Save File and it will take afew minutes to download.
Open the corresponding location to which we have downloaded the exe file. Now double click the download visual studio exe.
After double clicking exe the “Open File – Security Warning” window will open and click Run. User Account Control will be opened after clicking run. Now we need to give permission to install visual studio code so click yes. Now the Setup – Visual Studio Code window will be opened and click next.
Now select the “I accept the agreement” option and click next. Select the location to install Visual Studio code and continuously click next, finally click the install button. The installation process will start after clicking the install button, it will take a few minutes to finish the installation. Finally, click finish button, and the Visual Studio installation process is finished.
Angular CLI
Angular CLI is a command line interface or command line tool. Create angular applications faster and with great consistency. We can create components, directives, pipes, and services using CLI. Create TypeScript features like classes, interface, enums etc. CLI is used to create run unit test and End-to-End tests. Create an optimized build for deployment to production. It helps us to improve our productivity. Go to https://cli.angular.io/ link to know more about Angular CLI.
Step 1
Install Angular CLI on our machine. The below command is used to install Angular CLI to the global level. Open the command prompt and enter the below command. It will take more than a few minutes to complete this command.
npm install –g @angular/cli
Step 2
We are going to create a new application in Angular. We need to use the below command to create a new application. Open a command prompt and go to the corresponding location (D or E), type the below command, and enter.
ng new MyFirstAngular
Go to the specified location in our machine, we can see the project folder looks like the below screenshot.
Step 3
The project was created successfully. Now we need to compile the application. Go to our application location using the below command and compile the application. Here our project location is “F:\MyFirstAngular”
ng serve
After running the “ng serve” command we can see the “Compiled successfully” message.
First Angular Application
We have created “MyFirstAngular “ application using Angular CLI. Now open the Visual Studio code. Go to “Open Folder” under “File” menu. Now go to our application location and select our project Folder “MyFirstAngular”.
Now our project is loaded in Visual Studio code. We can see what our First Angular Application folder structures look like in the below screenshot.
We can open the “Integrated Terminal” run the commands in our Visual Studio Editor. Press “Ctrl” (Control) and “~” (tilde). After opening Integrated Terminal runs the command “ng serve”.
After running the “ng serve” command we get the “Compiled successfully” message. Now our application compiles successfully. Now press “F5” to run our application.
Before running the Angular application go to “lanch.json” and change the port number as “4200” because Angular default port is 4200.
Now compile our application using “ng server” and after completing the compilation, run the application using “F5” key and our first application looks like below.
Conclusion
This article explained about how to start our first Angular application using Visual Studio code in a simple way. I hope this article helps those who are newly learning Angular.