Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 1046 of the free egghead.io lessons, plus get Angular 2 content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Angular 2 - Hello World (es5)

3:11 Angular 2 lesson by

Angular 2 fully supports using es5 so you don't have to use TypeScript or any other transpiler to get started. John walks you through writing your first component in es5, bootstrapping it, then adding another Angular 2 component to the template.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Angular 2 fully supports using es5 so you don't have to use TypeScript or any other transpiler to get started. John walks you through writing your first component in es5, bootstrapping it, then adding another Angular 2 component to the template.

Avatar
Didier

Hi John,

Out of curiosity, what's the online IDE you're using for this screencast?

By the way, great lesson as always!

Thanks.

In reply to egghead.io
Avatar
John

Sublime Text 3. There's a weird bug in OSX Yosemite + WebStorm on my machine that I hope is sorted out soon so I can go back to it. But that being said, I think Sublime is great too.

In reply to Didier
Avatar
Ólafur Gíslason

All your es5 examples are broken in the current alpha30 and the previos couple of builds. The message is "angular not defined"

In reply to egghead.io

To use plain, old ES5 JavaScript so you don't have to worry about TypeScript or anything, just grab the SFX bundle. Then I'll just write all the code in this app.js file. In my index HTML, I'm just going to add an egghead tag, and that's where I'll leave it at, and I'll never touch this again.

In my app.js file I'm going to create a constructor function called "Egghead." Then instead of writing anything inside of the constructor function, I'm going to add an annotations property here, which is just an array.

Now inside of this array we're going to pass in two things, a component annotation and a view annotation. This looks like new angular.component annotation, which is where we define the selector.

If you remember, we called our element "Egghead," so we'll just use the "Selector of egghead." Then the second guy in here is going to be "Angular.view annotation." This is where we define our template. Our template can simply be a div with an h1 of "Hello everyone."

Now that we have our egghead component set up, all we've to do is bootstrap it, but we do need to wait for the dom to be ready, so we'll start with document add "Event listener." Then "Dom content loaded." Once the dom content has loaded, then we'll say, "Angular bootstrap," and pass in the constructor and hit "Save." You can see that our template is loaded into the selector so this "Hello everyone," which is in the template, is loaded into this element.

Now from there on out it's just components all the way down, so you can copy and paste pretty much a lot of this stuff, or set up a live snippet or template for this. I'll change this from egghead to note. Then I'll change the selector to note. Then I'll just change the template to something like a simple message.

Then to use this note component inside of our egghead component, we need to make sure to list it inside of our directives, which is just another array and the name of the constructor. Then I can simply say, "Note," and we've our note component. A simple message, which is here, loaded inside of our egghead component because the note selector is found here, and our egghead component knows to look for the note as a component if it finds this note selector.

So, you never have to bootstrap another component. You just have to bootstrap this root component, which will basically be an application component. Then from there, from the rest of the way down it's just these custom components which will be loaded in as directives, which will match certain selectors whenever you place them inside of your templates.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?