Introduction

This article is for developers who are new to Angular and want to get started from zero and this article should work has a base for all my article in future on angular. People can also refer at setup guide available at angular.io

Assumption

This article assumes you have a basic understanding of computer programming preferably JavaScript, You have access to internet and you have permissions to install software on local system. I am setting up this environment on a Windows 10 Pro PC but setting this up on other OS wont be much different.

Let's get started

To start with you will have to download & install node setup from nodejs.org. This installation should give you node and node package manager (npm) by default. To verify your installation you can run following command in command prompt.

node --version
npm --version

Here is output from my system, Please note I am using my old installation. So you might see different version. In case if you see error in executing above command make sure node.js installation path is added in path variable and you have restarted your command prompt.

Node and NPM version
Node and NPM version

To get boiler plate code for angular, we will be using Angular CLI. To install this on your local system execute following command in your command prompt

npm install -g @angular/cli

Since we are using -g this should install angular cli globally on your system. By globally I mean this would be available at any directory on your system. To verify you have successfully installed angular cli, execute following command in command prompt

ng --version 

You should see following output,

Angular CLI confirmation

Now we are good to create our first project in angular 10. Open a command prompt and navigate to folder in which you wish to create your first project. I will creating my project in D:\Ashwin\sample\. In command prompt execute following command.

ng new firstangular10app

This will prompt few question like Route and Stylesheet requirement. For now you can select Yes for Routing and SCSS for style sheet. Installation of dependency package may take some time, but once the installation is done, Navigate inside the folder by using

cd firstangular10app

To run our first angular code type following in your command prompt.

ng server -o

-o should open new browser window once the compilation is complete. In the new browser you should be able to see. By default angular application will start at port 4200.

Your first angular app

Reference

Next Article on Integrating api with Angular 10 is available here.