Hello World Application - Angular 2 - Part Four

Article

Hi Friends. In our previous article, we understand the application files in angular 2 applications.

For reference, please read my previous article for clear understanding.

Now we are going to understand, how our hello world application works and its execution process.

Two files are going to be concepts for us in this articles, they are,

App.component.ts
Main.ts

Now let’s start with app.component.ts: If we recollect fromm our previous article, we mentioned that component is nothing but a class and some meta data as shown below

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

Meta data here is selector and template, which is indicated by a component decorator.

Now, a decorator is a feature of type script and this is going to attach this meta data to class underneath it.

Selector: It is an html tag that we are going to use in order to have component in html tag.

Template: it is 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,

<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 replacing hello world.

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

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

Now, Open main.ts, this is going to bootstrap app.component, bootstrap means it is going to start our app.component. How is it going to do that ?

This going to import bootstrap function from angulars/platform and then it’s going to import app.component class.

Overall, what we have done means,

We Import bootstrap component
We import app.component

We just bootstrap app.component as shown below,

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

Now we are ready for use what we required, Let’s see how the flow of execution works inorder to display hello world.

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

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

Open systemjs.config.js, in 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, just for reference open index page , the flow of execution sits in the body tag, now it encounters the my-app html tag, this my-app recognizes that its nothing but a selector and component, then its going to replace with Hello world as shown below.

In our next article, let us create a component and understand more about component in details, Thanks for reading my article -- stay tuned.