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,
- <!-- 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 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
-
- 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.