Getting Started with Angular 2.05 min read

Recently Angularjs team has launched a 5 mins quick start tutorial on getting started with Angular 2.0. I have taken the same tutorial (with minor changes) and explained it below. There are a lot of blanks to be filled, but this is my first attempt at Angular 2.0.

You can find the source code for the Hello World app built in this post here.

So, let us get started with NG2.0.

What is Angular 2.0?

AngularJS 2 is a framework for mobile apps.  It is for desktop as well, but mobile is the hard bit that we will get right first.  The AngularJS you know and, hopefully, love will still be there with data-binding, extensible HTML, and a focus on testability.

You can read more about Angular 2.0 and its proposed features from here.

5min Tutorial by Angular Team

Angular team has released a tutorial on how to get started, where they explain how to setup the project and run a simple Hello World example.

We will follow the same here. The tutorial they have provided is quite self explanatory with some “Googling”.

To get started, create a new folder named ng2 and open a new terminal/prompt here.

Make sure you have Git installed, and run

git clone hello2ng2

This will clone the quick start project to hello2ng2 folder.

The project consists of the following libs (as of today)

  • Pre-built ES5 version of Angular 2 alpha-11
  • Pre-built ES5 version of rtts-assert alpha-6
  • The es6-shim, which includes Traceur, ES6 Module Loader, System, Zone, and Traceur options for meta-data annotations.

Do notice the directory structure

At the root of the directory you have a Gulpfile that consist of simple build tasks to download Angular 2.0 and its dependencies using the

To try this out, you need to have Nodejs installed. And Gulp should be installed globally. To install Gulp globally, run

npm install -g gulp

And then, We will install the dependencies for this project. Run

npm install

Now to regenerate Angular and its dependencies, run


And you can see the dependencies being removed and added again. This is incase you have messed up anything while going through the source code of Angular2.

EcmaScript 6

Before we go further, I would recommend having a knowledge of EcmaScript 6. One of the resource that helped me get started was es6features repo. Simple and lucid explanations of ES6 features.

This knowledge is quite essential as Angular 2.0 is written for ES6 and to support ES5. When we build the Hello World Example, I will point you to the required resources.

Build the App

The Angular tutorial suggests to create the project related files at the root of the directory. With so much going on at the root of the directory, I found it easy to maintain the files inside a folder named app. This situation is temporary till Angular 2.0 moves to a stable release.

So, create a new folder named app at the root of the project. Create a file named index.html inside the app folder. And update it as below

Things to notice

Line 5 : We load up the es6-shim.js from the dist folder to work with ES6 in current browsers.

Line 10 : We created a new component named my-app. We will talk about components soon.

Line 13 : ES6 comes with Modules and Module Loaders. This makes on demand importing very easy. If you have used Requirejs or the Commonjs module system while working with Nodejs, this will look very familiar.

Line 14 : We refer Angular 2.0

Line 15 : We refer Runtime assertions library

Line 16 : We load a file named app.es6 that we will be creating next. This file will consist the definition for  <my-app></my-app>.

Line 20 : We kick off the app.

Next, create a new file named app.es6. The es6 extension indicates that you are loading a file with EcmaScript 6 syntax. (This is more for your text editor to show syntax highlighting. You can js extension as well if you feel that too much is changing).

Update app.es6 file as below

I was overwhelmed as well as confused when I first saw the code. Learning Angular 2.0 is a challenge in itself and adding ES6 touch to that makes this a bit tricky.

Let’s see what we have in this file

Line 1 : If you have already gone through the modules feature, you should understand this syntax. All we are doing here is importing the required components from angular2 to be used in the current file.

Line 4 : The “@” is an annotation. Angular 2.0 uses a library called AtScript (@ script). 


JavaScript, the de facto language of the browser, has a large, thriving community. However, it is missing some features which would make it much more manageable for large-scale application development. The goal of AtScript is to enhance the language with these missing features without infringing upon its current capabilities.

You can read more about it : AtScript Primer. As far as I have understood (I could be totally wrong here), AtScript simplifies the syntax of ES6 in its own way. Taking an example from the primer



You can read more about ES6 classes for better clarity.

Though Angular team does not force the users to use AtScript, but it definitely looks like an advantage working with it.

Getting back, As per the docs, Angular 2 works with a concept of components. And a component consist of 2 parts

  1. The Annotation Section – This consist of the meta data (component selector, template) for that component
  2. The Component Controller Section – This is a ES6 Class, from which the template would be reading the properties that are interpolated ({{…}}) inside it .

So, (referring to app.es6)

Line 5 : Identify the selector on page that would be the base for our component

Line 8 : The template to be injected. Notice  {{ name }}

Line 14 : Declare the values to be used in the template. In our case it is World!

And finally on line 19, we bootstrap the component. As per my understanding, this is similar to exporting the main object from this file (analogous to module.exports) but instantiating it before exporting.

That is all we need to build a Hello World app using Angular 2.0.

Launch and test the App

You can use any static server to launch the app. If you have python already installed, you can run

Windows *nix
python -m http.server    python -m SimpleHTTPServer

from inside the hello2ng2 folder or you can use a node module named http-server to do the same. You can install the same using the below command

npm install http-server -g

And then you can launch the static server by running


from inside the hello2ng2 folder. And then navigate to  http://localhost:8080/app/ you should see

Screen Shot 2015-03-23 at 11.37.56

Next Steps

There are quite a lot of things going on with Angular 2.0 and I think it would take another 3 – 4 months to get a fair idea on where Angular 2.0 is headed to.

You can track the progress here and Angular 2.0 milestones here.

You can also checkout the resources page, which has a few but helpful links on Angular 2.0.

Thanks for reading! Do comment.