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

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Create an Angular 2 Hello World Component

2:32 Angular 2 lesson by

A Hello World application in Angular 2 requires you to understand concepts around bootstrapping, modules, and components. The bootstrapping system allows you to decide which module and platform you’ll use when your app starts up as well as which components should be shown first. The Angular 2 modules define which features you’ll want to include so you can have fine control over your final project size. The Angular 2 Components then become a simple definition of a template with variables.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

A Hello World application in Angular 2 requires you to understand concepts around bootstrapping, modules, and components. The bootstrapping system allows you to decide which module and platform you’ll use when your app starts up as well as which components should be shown first. The Angular 2 modules define which features you’ll want to include so you can have fine control over your final project size. The Angular 2 Components then become a simple definition of a template with variables.

Avatar
Rubem

Hello, When running the code example on my machine, I get the message:

"TypeScript transpiling to CommonJS, consider setting module: "system" in typescriptOptions to transpile directly to System.register format"

Where should I go to set the module system?

Thanks

In reply to egghead.io
Avatar
Matthew Payne

How does the first video start the project. I believe that is missing. Where does the systemjs.config.ts come from. That is not in my project if a start with "ng new project-name"

In reply to egghead.io
Avatar
suse0

Hi Matthew,
did you get an answer or did you solve it? I've got the same problem, too.

In reply to Matthew Payne
Avatar
Zac

Hey Susanne and Matthew,
The systemjs.config file is for the initial configuration of an angular app. Here is a link to the documentation if you want read up on it more.

"systemjs.config.js provides information to a module loader about where to find application modules, and registers all the necessary packages. It also contains other packages that will be needed by later documentation examples."

In reply to suse0
Avatar
Smilja

I believe he started this project using the "QuickStart seed", referenced in the official Angular 2 guide.
You can see how to set it up here: https://angular.io/docs/ts/latest/guide/setup.html

In reply to Matthew Payne
Avatar
Bill

A quick video to say this is where the student should start is to be expected. I would ask the authors to please remedy this. Also just checked, the code in this video starts with a different set of starter source than what the angular seed provides. The angular seed already has the main my-app component in place with main.js, etc.

Our systems JS configuration says we need an App folder with a main file inside of it, which it will load and compile as the default file, so let's go ahead and create that.

app/main.ts, From here we want to create our component, so let's say AppComponent, and each class that's a Component will need the Component decorator.

app/main.ts

import {Component} from "@angular/core";
@Components({
  selector: 'app'
})
export class AppComponent{}

The Component decorator starts with a selector. We'll call this app. What this means is that this app needs to match in our index.html, a tag on this page.

index.html

<!DOCTYPE html>
<html>
  <head...>
  <body>
    <app>Loading...</app>
  </body>
</html>

We'll say <app>, and that matches with this selector of app. So inside of here, this content will be replaced. We'll just say Loading..., and then once this is loaded, then that Loading... message will go away.

Back in our main.ts, let's make a template of <div> saying I'm the App Component. We're not doing anything with this component yet.

app/main.ts

import {Component} from "@angular/core";
@Components({
  selector: 'app',
  template: `
<div>I'm the App Component</div>
`
})
export class AppComponent{}

We actually need to bootstrap it inside of a module, so go ahead and export a class called AppModule, and decorate that with NgModule.

app/main.ts

@NgModule({

})
export class AppModule{}

Inside of my NgModule, I need to say what I'm going to declare. The components I'm going to use. These are called declarations, and I want to use my AppComponent, and I also want to treat that as the bootstrap component.

app/main.ts

@NgModule({
  imports: [BrowserModule],
  declarations:[AppComponent],
  bootstrap:[AppComponent]
})

So we'll bootstrap:[AppComponent]. Then there's also a module we'll want to use because we're working inside of the browser, and that's declared inside the imports, and that's the BrowserModule.

Because you can target multiple platforms other than the browser, you need to explicitly state that you want to target the browser. Then finally to bootstrap, we'll use the platformBrowserDynamic method.

We'll invoke it and say .bootstrapModule(), and we'll bootstrap the AppModule.

app/main.ts

platformBrowserDynamic().bootstrapModule(AppModule);

When I hit save here, you'll see loading, and then I'm the App component, because our platform is bootstrapping this module. This module is configured to use the browser.

Browser Output

I'm the App Component

It's declaring the AppComponent, so it'll look up that selector and use it, and because this is the application module, we're saying to bootstrap this right away.

Then, inside of this component, we're saying find the selector called app, and drop in this <div> inside of there to match the index.html loading.

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