Since Angular 2 is still not final, it needs a lot of boilerplate to be setup, and this skeleton do it for you.

On one hand, we have the gulpfile where apart from the classic tasks to process javascript and css, we have tasks to build both angular and its router from the sources.
On the other hand, we have the index.html file where we load all the needed libraries for Angular 2. As I said before, since Angular 2 is still not final, we have to load a lot of libraries to make it work, but worry not, on the final version we won’t need to do that.

Another interesting thing here is System. System is the module loader of ES6 and it is the one which will start our application. Yay, no more hundreds of script tags!

Also, there is no more ng-app :)

Alright! System is going to load index which is supposed to bootstrap our app, right? How do we do that? To bootstrap an Angular 2 application we need to use the bootstrap method passing our main component. Component? Yeah, we will see in a bit :)

1

bootstrap(OurMainComponent);

For our app, we will have an App component so to bootstrap our application, we can do:

We just need to import our App component and the bootstrap method to then use it to bootstrap the app. Another thing we need to do for our app, is to load the router. The router is external to angular 2, so we need to load it as a dependency. As today (2015-05-04) the router is not exporting the needed injectable to make this easy, so we need to construct a new instance of the router and inject it:

We loaded all the needed dependencies to construct the router and also the bind service to create a Binding for the router. Hopefully this will be fixed really soon.

Okay, let’s code the App component. But what’s a component? A component is a just a class which can be used to represent a page like home, login, users… or even used to create a directive like datepicker, tabs, etc.

app/app.js

123

exportclassApp{}

As I said, the component is just a class (we export it to be able to import it from other files like we did in index). So far it is not doing anything, so let fix that.

In Angular 2 we can use annotations. Think about annotations as a way to add metadata to our classes. Let’s go step by step. First import the two annotations we need:

app/app.js

1

import{View,Component}from'angular2/angular2';

Then we just need to use them. Component is an annotation to add metadata about the component itself, that includes its selector, or what services we need to inject. On the other hand, the View annotation is used for the HTML templates. Here we can specify the template we want to use with the component, if we need to use directives in it, etc. We can have more than one View annotation (mobile view, desktop view, etc).

For Component we specified that the selector for this component will be words-app (look mum, no more camelCase vs snake-case like Angular 1), that means that to use this component, we just need to drop a <words-app></words-app> somewhere!

For this View we created a simple template (notice the quotes).

NOTE: Don’t put semicolons after each annotation, that will make Angular 2 cry :)

So you said we can drop that selector somewhere? Yeah, let’s modify the index.html:

There is something important here: If our template uses a directive/component, we need to import it explicitly and that is the case of RouterOutlet. Notice that on the directives array we put the component object we are importing. Talking about imports… we need to add a few. Our imports are now like:

This time instead of embedding our template directly on the annotation, we will create an external file for it where we put:

home/home.html

1

<h1>This is home</h1>

Before running our app, let’s add bootstrap to our index.css:

index.css

1

@import'bootstrap';

Now we have something like:

Let’s do something real, shall we? On this home component, we want to grab a new word every time we click a button. To abstract Home from requests and stuff, let’s create a service for that, called Words:

A service in Angular 2 is just a class and for this one, we just need a method to grab a word. As today, Angular 2 doesn’t have anything like $http so we are going to use a library called fetch.

With fetch we make a request to our backend, passing the JWT token if there is any, we extract the text from the response and we parse it so the next time we create a new .then we will receive the final object.

Let’s import this service in Home:

home/home.js

1

import{Words}from'../services/words';

Now we need to tell our component that we want to inject the service:

home/home.js

1234

@Component({selector:'home',injectables:[Words]})

Finally, we receive a new instance of the service in the constructor:

home/home.js

12345

exportclassHome{constructor(words:Words){this.words=words;}}

Like with the router, we receive a words instance of the type Words.

With our service in place, let’s code the template:

home/home.html

12345678

<divclass="jumbotron centered"><h1>German words demo!</h1><p>Click the button below to get a random German word with its translation:</p><p><aclass="btn btn-primary"role="button"(click)="getRandomWord()">Give me a word!</a></p><div*if="word"><pre>Word: {{word.german}}</pre></div></div>

There is a couple of new stuff in Angular 2. Instead of ng-click we use (click), the parenthesis means that it is an event (click event). On the other hand, we have that *if which is our classic ng-if. The star means that it is a template, basically a shorter version of doing:

1

<template[if]="word">

Is that if a directive? Yes, and what we said about using directives inside our templates? That we need to import them:

We store two items, the token and the decoded token, then we have a method to login and a method to logout. Nothing really special. Both localStorage and jwt_decode are globals so we don’t need to import that. Again, we are using fetch to do the request to the backend.

On the other hand, when we talk about login and stuff, we need a way to actually login, right? Let’s create a component for login:

Notice how we have stuff like #username instead of ng-model="username". That is how Angular 2 binds our stuff.

As a last step, let’s modify the css a bit because the form is a bit wide:

login/login.css

123

.login{width:40%;}

We also need to import this .css file:

index.css

12

@import 'bootstrap';
@import './src/login/login.css';

Having the login in place, we need a link for it in our Home component:

home/home.html

123456789101112131415

<divclass="jumbotron centered"><h1>German words demo!</h1><p>Click the button below to get a random German word with its translation:</p><p><aclass="btn btn-primary"role="button"(click)="getRandomWord()">Give me a word!</a></p><div*if="word"><pre>Word: {{word.german}}</pre></div></div><div*if="isAuth"><p>Welcome back {{user.username}}</p><ahref="#"(click)="logout($event)">Logout</a></div><div*if="!isAuth"><ahref="#"(click)="login($event)">Login</a></div>

The last step is showing the translation if we are logged in and that is easy to do! We are already grabbing the words from the server and now that the server sees that we are authenticated, it will send the translation as well. That means that we just need to update our template:

home/home.html

1234567891011121314151617

<divclass="jumbotron centered"><h1>German words demo!</h1><p>Click the button below to get a random German word with its translation:</p><p><aclass="btn btn-primary"role="button"(click)="getRandomWord()">Give me a word!</a></p><div*if="word"><pre>Word: {{word.german}}</pre><pre*if="isAuth">Translation: {{word.english}}</pre><p*if="!isAuth">Please login below to see the translation</p></div></div><div*if="isAuth"><p>Welcome back {{user.username}}</p><ahref="#"(click)="logout($event)">Logout</a></div><div*if="!isAuth"><ahref="#"(click)="login($event)">Login</a></div>

Now we have our app completed:

Oh wait, I forgot to log in:

I bet you can learn Angular 2 faster than the word on the image :)

Before closing this article and as a curiosity, you can import the Login component in Home, add it as a used directive in the View component and then add <login></login> at the bottom of the template. Doing that, you will attach the entire login form and its functionality to the Home component, yay!