Angular 2 - Hello World (es5)

[00:00] 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.

[00:16] 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.

[00:30] 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.

[00:47] 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."

[01:09] 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.

[01:53] 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.

[02:17] 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.

[02:53] 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.