Angular 4 Hello World Example [Getting Started With Angular 4]

13

This tutorial is belonging to the Angular 4 beginners and it will drive them through a simple Angular 4 Hello World example.

It’s one of the first and crucial step of our Angular 4 Tutorials and Examples.

Also, this Angular 4 hello world tutorial written to guide people through basic structure of Angular 4 app.

So, let’s get started to create simple hello world app in Angular 4.

Getting Started with Angular 4

Angular 4 is the latest version of AngularJs released in March 2017.

AngularJs is one of the popular front-end frameworks by Google.

Furthermore, the Angular team has decided to release Angular 4 directly and skip the version 3 due to some version confliction. To know more, you can visit the difference between Angular 4 vs Angular 2.

Now, let’s go through the basic steps to accomplish our first Angular 4 hello world example.

Here, we’ll simply create a component that passes the title from component to the view.

1. Install Angular CLI [Angular 4 Environment Setup]

The Angular CLI is a command line interface that helps to scaffold and build angular apps in Node.js style.

Also, it set up the angular 4 environments and will be helpful for us to work with angular apps like creating, running, etc.

First, we’re going to install Angular-CLI.

npm install -g angular-cli

Note: Now, we’ve the Angular 5 launched and it came up with some new featuers. Therefore, by default Angular CLI will install the latest version. To use Angular 4, you should install 1.4 version of Angular CLI by using npm install -g angular-cli@1.4 command.

Here, have some patience, it will take some time.

BTW, you don’t need to repeat this step every-time you write an Angular 4 app. This is a one-time step only.

Once installation is done, just make sure that it’s installed by checking it’s version.

ng -v

2. Install an Angular 4 Hello World App

Here, we will create an app named hello-world

ng new hello-world

Now, go to the directory of a newly created project.

cd hello-world

Before running your app, let’s dive a bit deeper in coding behind the picture.

2.1 Firstly, let’s see what’s AppModule is?

App Module Filepath: app/app.module.ts

//Import angular core
import { NgModule } from '@angular/core';
//Import Browser module
import { BrowserModule } from '@angular/platform-browser';
//Import App Component
import { AppComponent } from './app.component';
//Declarations
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
//Bootstrap
export class AppModule {}

After the import statements, you can see the class with the @NgModule decorator.

The @NgModule decorator will identify the main module (i.e AppModule) as an Angular module class or a NgModule class. @NgModule tells Angular about the compilation and launch of an application.

Basically, three things you should know at this point.

  • imports — the BrowserModule that this and every application needs to run in a browser.
  • declarations — the application’s lone component, which is also …
  • bootstrap — is the root component that Angular creates and inserts into the index.html.

The Angular Modules (NgModule) will take you deep into the details of Angular modules. All you need to know at the moment is a few basics about these three properties.

2.2 Secondly, let’s see what App Component has

The app component has defined the title and this title will be rendered by template.

App Component Filepath: app/app.component.ts

//Imports
import { Component } from '@angular/core';
//Decorator
@Component({
selector: 'hello-world',
templateUrl: 'src/app/app.component.html'
})
//Class
export class AppComponent {
constructor() {}
title: string = 'A Hello World App In Angular 4';
}

2.3 Finally, let’s see HTML of an App Component

Here, the title will be rendered with the value which is set for title variable in-app component.

Template Filepath: app/app.component.html

<div>
<h2>{{title}}</h2>
</div>

3. All set to run the App

Finally, let’s run.

ng serve

That’s it, open your browser on http://localhost:4200 which will say A Hello World App In Angular 4

Moreover, I hope you loved this Angular 4 Hello World tutorial which instructs to follow simple 3 steps and rock with first Angular 4 app.

Suggested visits,

Furthermore, If you’ve any suggestions/questions, feel free to share your comments below.

13
Leave a Reply

avatar
6 Comment threads
7 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
5 Comment authors
ullmannMohit TanwaniNimeshSampan VermaMilan Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Milan
Guest
Milan

I started Angular 4 recently and this tutorials made my life easier, nice post.

Sampan Verma
Guest
Sampan Verma

Really nice post.

Also please can you arrange the posts. I couldn’t seem to find which post to read from here. (i kind know angular so I know but it was just a suggestion)

Nimesh
Guest
Nimesh

Hi Mohit,
Can you explain how navigating to index.html, which has no direct reference scripts at all, still launches main.ts to bootstrap the application? Does node or angular on a node server always know to look for main.ts?

Nimesh

Nimesh
Guest
Nimesh

Will do Mohit (after this one!). What I was trying to ask:

if not using angular cli on node, which knows to call main.ts from the angular-cli.json , how does an angular app bootstrap the main module? I’m having difficulty finding out the fundamental flow from the time an address is typed into a browser to when it is bootstrapped. If you have some links that would be great.

Nimesh

Nimesh
Guest
Nimesh

Thanks, Mohit!

There’s nothing in my inbox yet, but I will keep an eye out. I have seen lots of people with the same kind of question, so I will try to share.

ullmann
Guest
ullmann

hi, great works !.
In my context, its ok with this :selector: ‘app-root’,