Creating and Initiating Your First Angular Project on GitHub

Hello Everyone…

In this article, I am going to discuss how to create a new Angular App and how to put that project into your GitHub account.

Let’s get started.

Prior to creating your first Angular App, you need to check whether the correct version of Node.js is installed in your system. To check that simply give the below command in your command prompt.

npm --version

If you have already installed NodeJS in your system will give the version number of Node.js installed. In my case, it is 10.2.5. It will show like in the below image.

Figure 01 — Checking the Node.js version

If you see version number 8.5.0 or later, you are ready to go with creating an Angular App.

In case you haven’t installed Node.js in your system don’t worry you can download Node.js from their official website. I will put the link below. Just download it according to your operating system and install it on your system.

Node.js - Download

After downloading and installing Node.js you need to check the version.

Then you need to install Angular CLI for that run the below command on your command prompt.

npm install -g @angular/cli

After installing Angular CLI you can verify installation by running the below command.

ng version

Then you will see the version information of Angular CLI like below in the image.

Figure 2 — Angular CLI

Now we are ready to create our new Angular App.

Create a new folder in any location you like. In my case, I created a folder named angular-project on my desktop.

If you haven't downloaded and installed Visual Studio IDE yet, don’t worry I have put the link below to download it. You can download and install it easily.

Download Visual Studio Code - Mac, Linux, Windows

To easily open the project in Visual Studio code you need to open the command prompt inside your newly created folder. In my case, I open the command prompt on the desktop. Then type code . in the command prompt and press enter. The folder opens in Visual Studio code.

To create a new angular project you need to open the terminal in VS code. For that simply click on Terminal->New Terminal.

Then terminal will open, in the terminal run the below command to create a new angular project. In my case, I give the project name as angular-project. You can give any name you like.

ng new angular-project

This will take some time to execute, and make sure you have a good internet connection as well.

Figure 5 — Create Angular Project

After completing the execution of the ng create command, the terminal will appear like the above in the image. You can see that the necessary files and folders are created.

Also, you can see the files and folders on the left side of the VS code.

Now you have successfully created your Angular App.

You can open the project in the browser by running the below command.

ng serve --open

Then we’ll see how to put this project into your GitHub account. Then you can work on the project and commit the changes.

If you do not have a GitHub account you can create one for yourself. Simply you need to follow some steps. I will paste the link to GitHub for you.

GitHub: Let's build from here

Working with git commands is easy when we are coding with VS code. So you need to log in to your GitHub account through VS code in the source control section in the left side upper part of the IDE. After that, you can simply create a new repository and commit and push the changes by going through the source control section of VS code.

Now we are done with creating our Angular Project and putting that project to GitHub.

I think you enjoyed my article. Thank you for reading.

Happy Coding……..

References

Angular