DISCLAIMER: Angular 2 is still on a developer preview, so it has a lot of missing features, broken stuff and it is also subject to change.
Ready for Angular 2? You bet!
For this demo, we are going to code an application which requests german words. The word will also come with its translation if the user is authenticated.
First, grab the KOA backend from here, then:
NOTE: You need node 0.11+ or io.js to work with koa. And if it is node, you need to use the —harmony flag like:
Leave it running and clone this repo. Here we are going to work on the
before folder. To use it:
Let me explain it a bit:
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
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 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
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 :)
For our app, we will have an
App component so to bootstrap our application, we can do:
1 2 3 4
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:
1 2 3 4 5 6 7 8 9 10 11
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
users… or even used to create a
1 2 3
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.
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:
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).
Let’s use them:
1 2 3 4 5 6 7 8 9
Component we specified that the selector for this component will be
words-app (look mum, no more
Angular 1), that means that to use this component, we just need to drop a
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
1 2 3 4 5 6 7
Ok, here we used our new component. Let’s go to
So far so good, isn’t it? Inside
App we are going to configure the router that we got injected from the
1 2 3 4 5
The class constructor will receive a
router parameter of the type
Router. Let’s use it:
1 2 3 4 5 6 7
router has a
config method where we pass the
path and what
component to use for that path. We chain the promise it returns to immediately navigate to that
Soon we will be able to configure the routes of each component as an annotation, but for the time being, we will use this way of configuring the router.
When we load a new route, where do we put the component? We need an
ng-view which is called
router-outlet in this new router.
Let’s change our
View annotation like:
1 2 3 4
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:
1 2 3
We loaded the
RouterOutlet component and also the
Now our app will navigate directly to that
Home component. Let’s create it:
1 2 3 4 5 6 7 8 9 10 11
This time instead of embedding our template directly on the annotation, we will create an external file for it where we put:
Before running our app, let’s add bootstrap to our
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
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 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
Now we need to tell our component that we want to inject the service:
1 2 3 4
Finally, we receive a new instance of the service in the constructor:
1 2 3 4 5
Like with the router, we receive a
words instance of the type
With our service in place, let’s code the template:
1 2 3 4 5 6 7 8
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:
if a directive? Yes, and what we said about using directives inside our templates? That we need to import them:
1 2 3 4
Next, we need that button working so we can show the words:
1 2 3 4 5
If we now try the app, we can see something like:
Alright, it is getting shape!
Let’s move to the authentication. A service you said? Right on!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
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
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
Like the other components, we have our
View annotations and we also specified that the new
Auth service is going to be injected into the component.
This component only have one method were we use the
Auth service to login and set the
jwt token in the
localStorage. If we succeed, we just navigate to the
For the template, we have:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
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:
1 2 3
We also need to import this
Having the login in place, we need a link for it in our
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
So having a flag called
isAuth, we will switch between two divs.
We will need the
Auth service here as well, so let’s import it:
1 2 3 4 5 6
Then we need a
logout methods, the
isAuth flag and also a reference to the user. Our component is now like:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
In the near future, we can avoid that
login method thanks to the
RouteLink component which is basically like
Alright, now we have the link to the
And if we click it, we… Oh wait, it is not working. Ah, we forgot to add the route for it back at
1 2 3 4 5 6 7 8 9 10
Now it works:
And if we login with the demo credentials (demo / 12345) we see:
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
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!