This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Angular 2 - Hello World (es6)

2:57 Angular 2 lesson by

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.


egghead.io comment guidelines

Avatar
egghead.io

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.

Avatar
Jian

Nice lesson. But I hope to see how you setup your environment.

Avatar
Kent C.

Right now, setting up the environment is.... tricky... Definitely something the angular team will be working on improving for sure.

But if you want to start playing around with it, I highly recommend you take a look at this repo: https://github.com/ShMcK/ng2Challenges

In reply to Jian
Avatar
Italo

Guys is recommendable use 2.0 for prod or is best wait for the 2.1??

In reply to Kent C.
Avatar
Eric

Angular2 is nowhere near to be production ready - it's not even a final 2.0.

Keep the production code with 1.x still.

In reply to Italo
Avatar
Aviad

Why did we leave out the wait for the DOM to be ready before calling bootstrap like we did in the ES5 syntax?

In reply to egghead.io
Avatar
Tommy

Nice lesson. But I hope to see how you setup your environment.

Seconded. Very informative lesson though, otherwise.

In reply to Jian
Avatar
Daryl

I'm slightly confused; you've imported component and views, but are the @ symbols part of es6, or typescript?

Avatar
Joel

I'm slightly confused; you've imported component and views, but are the @ symbols part of es6, or typescript?

@ is a decorator, and in this case is TypeScript syntax. Decorators with the @ are also an ES7 (2016) proposed feature, but are only available through the use of Babel when coding JavaScript.

In reply to Daryl
Avatar
Harshesh

Good tutorial! Woupld really appreciate if there are more content/videos of angular2 in ES6 than TypeScript.

Although, I have one question: since you had two @Components and @View, how does angular determine which @View goes with which given @Component?

Like, for 'widget' @Component, @View was just '...' so I am confused on HOW angular2 determines the given @View, @Component and class.

Thanks in advance! :)

Avatar
Joel

Good tutorial! Woupld really appreciate if there are more content/videos of angular2 in ES6 than TypeScript.

We are generally going to recommend that you stick with TypeScript for Angular 2. You don't have to learn much on top of ES6, and TypeScript is wonderful for decorators and dependency injection.

The use cases for developing Angular 2 outside of TypeScript exist, but they would need to be very specific.

Embrace the TS! 😉

In reply to Harshesh
Avatar
Harshesh

Thanks for the feedback! But, personally I would prefer to stick with ES6, not a fan of TypeScript.

However, I am more anxious to know about the question/confusion I asked in my comment above.

In reply to Joel
Avatar
John

@View is deprecated since the beta, just use @Component now.

In reply to Harshesh
Avatar
Harshesh

Thanks! So now to define a component in ng2 you only need @Component and 'class' ?

In reply to John

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.

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.

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.

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.

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.

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.

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."

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.

From here on out, from where we bootstrapped, it's just components all the way down, as a tree....

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