Angular 2 Hello World example in TypeScript

In this tutorial, we will create a basic Hello World example using Angular 2 (2.0.0-beta.0) in TypeScript. Looking for javascript version of this example?.

Please note that I normally will not list out all libraries in a separate section as they are all listed in the index.html, unless it is necessary to do so.

So, let’s get started.

Folder structure

Download source code and check the code structure.

Angular 2 Hello World example typescript folder structure

boot.ts

This is how we bootstrap our Angular 2 app in this example.

hello_world.ts

The is where we define our component “hello-world”. As you can see, this is a very simple component that basically does nothing, but renders the template whenever Angular sees the custom element <hello-world/> .

  • The selector  attribute tells Angular what it needs to look for.
  • The templateUrl tells Angular where the template is.

hello_world.html

This is the template for the <hello-world>  component. In this case, the syntax is slightly different from what’s used in Angular 1.

index.html

Last but not least, we need to wire up all the above things together, along with the libraries that are required.

Demo

Follow the above steps to create those files or simply download the code and run it with a server (I assume you know what server I am talking about).

I used Brackets in this tutorial.

Angular 2 Hello World example typescript demo screenshot

References

  1. Angular 2 Template Syntax
  2. Angular 2 Hello World example in Javascript

facebooktwittergoogle_plusredditlinkedin

Wayne Hong

Passionate Java full stack developer.