You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.
Become a sharper developer and jumpstart your career.
$0
$
. 00
monthly
For Basic members:
$10
For Premium members:
Hi Friends. In our previous article, we understand the application files in angular 2 application.
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,
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
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,
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.
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,
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
Open systemjs.config.js, in package, our main file is main.js as shown below
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.
Azure in 24 Days