Angular 2 - Hello World (es6)
Getting started with Angular 2 involves a new focus on building out components. John walks through the process of bootstrapping your first component as well as how to include one component inside another.
[00:03] An Angular 2 Hello World that involves bootstrapping a component and that component will have a selector to find the element you want to bootstrap, and a template to show what you want to put in that element.
[00:12] We'll start by calling our element "Egghead," just to customize it a bit. This is all we're going to do through our HTML. I'll switch over to our JavaScript file. Now I need to create a class for the component that will be bootstrapped.
[00:27] This class will need two decorators, one being the component, which we need to define the selector, which is basically going to look up that element, which we called, "Egghead." Because we're using ES6 and this guy isn't on the window, we actually have to import him. Say "Component," so we'll import the component from Angular 2 /Angular 2.
[00:55] And then we need a view, which is where we can define our template. So we say "Template," and we'll just define this as an h1 saying "Welcome." We have to remember to import our view as well, so we'll say "View" here.
[01:10] The final piece is to bootstrap this class here, which has been decorated. We say, "Bootstrap," and just pass in the class name. Don't forget we also need to "Import bootstrap" as well. I'll save this and you can see we have a lovely Hello World application.
[01:29] From here on out if we're just building this egghead application, we'd just bootstrap this and we wouldn't bootstrap anywhere else. It's almost like saying, "ng-app on a div here," if you want to force your Angular 1 concepts in Angular 2. But I find it's best to disconnect that, because you'll never see ng-controller attributes or things like that from Angular 1, as the syntax has shifted to make this much more flexible.
[01:54] From here on out, everything you define inside of this template, any child components you create, define in there will work just fine without bootstrapping those components. So if I quickly say "Component," "Selector," "Widget," "View," "Template," with an h2 of Hello World, and then just a class of "Widget."
[02:27] As long as we tell this view that it has directives, and that one of them is the widget, and that's the name of the class, I can go ahead and drop the widget element, because the selector here's going to match up with this. Hit "Save," and now use our widget inside of our application that was bootstrapped.
[02:52] From here on out, from where we bootstrapped, it's just components all the way down, as a tree....