DEV Community

Cover image for Getting started with Angular
Ashishkumar Vishwakarma
Ashishkumar Vishwakarma

Posted on

1

Getting started with Angular

Pre-requisites πŸ˜‡

πŸ‘‰ node & npm i.e. node package manager
πŸ‘‰ angular/cli i.e. command line interface for Angular
πŸ‘‰ Code editor/IDE i.e. VS Code, Sublime or any you prefer

πŸ€” If you don't have these installed in your machine, let's quickly get it installed.

- installing node & npm πŸ‘

  1. for Windows:
    download link to node binaries

  2. for Ubuntu/Linux or MacOS:
    select your OS to get command

  3. command for installation using package manager through terminal

Node.js v14.x:

# Using Ubuntu
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs

Verify with the below commands that node and npm fire below commands

# Using Ubuntu
node -v
npm -v

- Let's get your hand dirty πŸ–οΈ

Now, we have our npm (node package manager) installed, we can use it to install Angular in our system.
Use below command to install Angular CLI

npm install -g @angular/cli

verify if Angular CLI is installed successfully, fire below command

ng v

it must look something like below:
angular version in terminal

- Now, we will create our first Angular project

We need to fire below command in our terminal/command prompt to create our project

ng new angular-app

Here, ng new is used to create new project and angular-app is your Angular project name.

It will create Angular project with default template provided by Angular itself. To have a quick look on it, we can goto our browser and visit default url served by Angular i.e. http://localhost:4200

Now, we need to point our terminal to Angular project, to achieve this use this command

cd angular-app

As of now, we are in our Angular project folder. We can use below command to serve our application to the browser

# to just serve and visit http://localhost:4200
ng serve

# to serve it on it's default browser
ng serve -o

 

Wow 🀩, we just created an Angular application. It was super easy, isn't it.

 

- Find the helping visuals 🎬 below here:


We are open for contribution 🀝 CodeCasm

❀️ Happy coding ❀️

Sentry image

See why 4M developers consider Sentry, β€œnot bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free β†’