Building "Hello World" in Angular

The first thing you need to do in order to initialize an Angular application is to "bootstrap" it. For those of you coming from the AngularJS, this used to be done with ng-app. However, in Angular there are a couple of differences.

The Angular Quickstart guide has a simple "hello world" example that you should check out before proceeding. In our version of "hello world", we're going to follow the Angular styleguide strictly and dive a bit deeper than they did.

Per the Angular style guide, your application's entry point where bootstrapping happens should be a file called main.ts at the root of your project:

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/index';

platformBrowserDynamic().bootstrapModule(AppModule);

You'll see that we're bootstrapping this thing called AppModule. What the heck is that? And what is a module? Well, similar to the modules you attached controllers to in AngularJS, Angular has a module system that allows you to easily import and export functionality called NgModule (we'll cover this in more detail later in the tutorial series).

Lets take a peek at what the AppModule consists of:

app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

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

Notice the @ sign in front of NgModule? That indicates it's a decorator in TypeScript — essentially it allows us to easily extend a class and configure it however we wish.

In this case, our configuration is to import Angular's BrowserModule (what allows us to interact with browser APIs, etc), declare that AppComponent can be used anywhere in this module, and to bootstrap the AppComponent to the page.

To recap the basics of creating & using NgModule:

• You need to define imports whenever we want to use other modules inside this module. In this case, Angular has a module called BrowserModule we want to use.
• Any components (which we'll cover in detail in the next chapter) we want to use in a given module need to be declared.
• Finally, bootstrap is what gets initially bootstrapped to the page!

It's worth noting that you'll be building your apps with components in Angular — no ng-controller anymore.

To bootstrap your application, you'll need one main component to render to the page. Per the Angular Styleguide, that component should be called "AppComponent".

Lets look at app component:

app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: 'src/app/app.component.html'
})
export class AppComponent {
  constructor() {}

  name: string = 'Angular';
}

You'll notice we're pointing to a template to use for this component, similar to how we did in AngularJS. We've also declared a variable called name and told TypeScript it should be a string, and then set the initial value to "Angular".

Lets look at the template for this component:

app/app.component.html

<div>
  <h2>Hello {{name}}</h2>
</div>

Pretty simple — it's just displaying the name variable inside of an H2. You can view the working source code on StackBlitz.io

When you put it all together, your page should now display "Hello Angular". In the next tutorial we'll dig a bit deeper into exactly how components work.