Hello World App in Angular 4

The following two tabs change content below.
Prasad Kharkar is a java enthusiast and always keen to explore and learn java technologies. He is SCJP,OCPWCD, OCEJPAD and aspires to be java architect.

Latest posts by Prasad Kharkar (see all)

We are going to learn something other that java now. It’s great to have Angular to your skill set. In this article we are going to create a simple hello world app in angular 4.

 

Hello World App in Angular 4:

Prerequisites:

  • Node JS : Please install node js according to instructions provided on official site.
  • Visual Studio Code: Extremely good IDE. I am going to use this for tutorial series.

Once you have installed both, open your command prompt and type node -v, you should be able to see something like below

Node JS Version Check

It means you have successfully installed node js.

Create app from Angular CLI:

Angular CLI is an awesome tool to get started with a angular 4 project. It creates a fully functional well structured project for us which we can take forward.

  1. Install Angular CLI using command npm install -g @angular/cli . -g option means it is installed globally for our system. Check angular version using ng -v.
  2.  Create our first app using command ng new hello-world It will take a while and create a fully fledged app for you.
  3. Now you will have your folder created called hello-world. navigate to it using cd hello-world and then do ng serve. You can see server is started.

Open your browser and visit localhost:4200 You will see “App works” printed on screen.

 

I hope this article helped you get started with Hello World App in Angular 4. In next article we will look at the structure of app and understand it thoroughly.

Share Button

Prasad Kharkar

Prasad Kharkar is a java enthusiast and always keen to explore and learn java technologies. He is SCJP,OCPWCD, OCEJPAD and aspires to be java architect.

2 thoughts on “Hello World App in Angular 4

Leave a Reply

Your email address will not be published. Required fields are marked *