Unlike to angular js 1.x which is module based, Angular2.0 was component based framework. So, in this article let’s dig over the concept “Component”.
What is component ?
In simple terms, I can say that a component is nothing but the place we provide our business rules(inside a class), user interface(likely Presentation layer) information and related styles information as a group together.In the comparison words with angular js 1.x version the components are like directives.
In angular 2, after having our application structure by using “ng new appname” our angular cli will
create us a structured architecture where we can work easily. After creating our application, we’ll see our architecture as like below. (If you are newbie to angular 2 have a look of creation of project in followed link : Pre-requisites and Angular application setup)
In simple terms, I can say that a component is nothing but the place we provide our business rules(inside a class), user interface(likely Presentation layer) information and related styles information as a group together.In the comparison words with angular js 1.x version the components are like directives.
In angular 2, after having our application structure by using “ng new appname” our angular cli will
create us a structured architecture where we can work easily. After creating our application, we’ll see our architecture as like below. (If you are newbie to angular 2 have a look of creation of project in followed link : Pre-requisites and Angular application setup)
Component in angular js 2 comes with an extension of “.ts” where “ts” meant to type script. So, if we have a look over the file which is highlighted named by “app.component.ts” the code will be as like below :
app.component.ts :
1)Class Creation :
a)
We can observe the class name named as
“AppComponent”.
b)
If we want to
use this component in other components then we have make sure the
presence of export keyword in front of class keyword.
c)
Within the class we can find a property named
“title”. This property can be used in our view which is nothing but our HTML
page(here they used in
“app.component.html” file)
d)
We can also create functions,constructors..e.t.c
inside the class Which I’ll describe in
upcoming article.
e)
The class members can be accessed in it’s concern
grouped file “app.component.html” which I’ll discuss in below content.
2)Importing :
To get the component decorator(attribute) we need to import the angular core. It is similar to import in java and using in C# if you knew.
3)Component Decorator :
The component decorator will be prefixed with the “@” to the Component name(@Component).
The component decorator contains a set of properties/ metadata that which provides an external information related to the use of application. The information can be of which template needs to use or which styles passed or selectors..e.t.c. The component decorator is nothing but an attribute in the case if you knew C#.
If you observe the above component decorator in the image, we it comes with three properties named like below :
a)selector b)templateUrl c)styleUrls
a)Selector : selector is like a directive which is used like an HTML tag. By using the selector, we can fetch the entire content of page at required place in our HTML page.
From the image, we can use our selector as like <app-root> </app-root> as HTML markups where we can render our template or templateurls.
b) templateUrl : template url is nothing but the view that which we needs to display within the selector. This URL extension file should be with HTML which can be render. The below highlighted html page in the image was given as it’s path for templateUrl in above app.component.ts file(fin in above image).
To get the component decorator(attribute) we need to import the angular core. It is similar to import in java and using in C# if you knew.
3)Component Decorator :
The component decorator will be prefixed with the “@” to the Component name(@Component).
The component decorator contains a set of properties/ metadata that which provides an external information related to the use of application. The information can be of which template needs to use or which styles passed or selectors..e.t.c. The component decorator is nothing but an attribute in the case if you knew C#.
If you observe the above component decorator in the image, we it comes with three properties named like below :
a)selector b)templateUrl c)styleUrls
a)Selector : selector is like a directive which is used like an HTML tag. By using the selector, we can fetch the entire content of page at required place in our HTML page.
From the image, we can use our selector as like <app-root> </app-root> as HTML markups where we can render our template or templateurls.
b) templateUrl : template url is nothing but the view that which we needs to display within the selector. This URL extension file should be with HTML which can be render. The below highlighted html page in the image was given as it’s path for templateUrl in above app.component.ts file(fin in above image).
So, whatever the content or mark up code present in the app.component.html will render in between the selector
c) styleUrls : styleUrls is used to point out a css file path, where it applies all the styles to the elements that which are present in selector as like boundary tag. The below highlighted css page in the image was given as it’s path for styleUrls in above app.component.css file image.
c) styleUrls : styleUrls is used to point out a css file path, where it applies all the styles to the elements that which are present in selector as like boundary tag. The below highlighted css page in the image was given as it’s path for styleUrls in above app.component.css file image.
As of now, within the file exists only three properties only and we discussed those. But Angular provided us a bunch of properties which will helps us a lot based on requirement. In my upcoming articles, I’ll to cover max of properties from them. You can find all those remaining stuff related to properties in the following link :
By here, we may think that the rendering page is app.component.html, but not. The main root page for our will be named by “index.html”. This index.html page contains our selector tag <app-root> </app-root>. The following image shows you a clear path of our execution mappings.
Thank you.
Good information.
ReplyDeleteThank you.
Delete