Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Hello World Application - Angular 2

DZone's Guide to

Hello World Application - Angular 2

We continue our exploration of Angular 2 applications by creating our own simple hello world application. Read on to get started coding!

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Hi, friends! In our previous article, we went over application files in Angular 2 applications.

For reference, please read my previous article.

Now we are going to look at how our hello world application works and go over its execution processes.

For this article, we will be using two main files:

  • App.component.ts

  • Main.ts

Now, let’s start with app.component.ts. If we think back to our previous article, we mentioned that a component is nothing but a class and some metadata, as shown below:

import {
    Component
} from '@angular/core';
@Component({
    selector: 'my-app',
    template: `<h1>Hello World</h1>`,
})
export class AppComponent {}

The metadata here is selector and template, which is indicated by a component decorator.

Now, a decorator is a feature of TypeScript which allows us to attach metadata to the class underneath it.

Selector: An HTML tag that we are going to use in order to have a component in our HTML tag.

Template: An HTML tag that has to go in-between selector tags.

Let's open index.html. We have the my-app tag as shown below:

<!-- 3. Display the application -->
<body>
	<h4>header4 from index.html</h4>
	<my-app>Loading...</my-app>
</body>

This is a custom tag, nothing but a selector for our component and, between these two tags, we are going to be putting our 'hello world' message.

Now, go back to app.component.ts. Here, we also need to specify that we are importing the component class from the angular/core module, as shown below.

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

Now, open main.ts. This is going to bootstrap app.component, which means it is going to start our app.component class. How is it going to do that?

This will import a bootstrap function from angular/platform and then it’s going to import the app.component class.

Overall, what we have done means:

  • We import a bootstrap component.
  • We import app.component.

We can bootstrap app.component as shown below:

import {
    bootstrap
} from '@angular/platform-browser-dynamic';
import {
    AppComponent
} from './app.component';
bootstrap(AppComponent);

Now we have everything we need in place. Let’s see how the flow of execution works in order to display hello world.

In Index.html, you can see the System.import line as shown below,

<script>
	System.import('app').catch(function(err){ console.error(err); });
</script>

Open systemjs.config.js. In the package, our main file is main.js, as shown below:

// packages tells the System loader how to load when no filename and/or no extension
var packages = {
    'app': {
        main: 'main.js',
        defaultExtension: 'js'
    },
    'rxjs': {
        defaultExtension: 'js'
    },
    'angular2-in-memory-web-api': {
        defaultExtension: 'js'
    },
};

Now open main.ts. It is going to bootstrap app.component as shown below:

import {
    bootstrap
} from '@angular/platform-browser-dynamic';
import {
    AppComponent
} from './app.component';
bootstrap(AppComponent);

So open app.component.ts, and, just for reference, open the index page. The flow of the execution sits in the body tag, and now it encounters the my-app HTML tag. This my-app tag recognizes that it's nothing but a selector and component, then it's going to replace it with our hello world message as shown below.

Image title

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:
web dev ,angular 2 ,angular applications ,web application development

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}