hello friends and welcome to Bitfumes angular five series and in the last
episode we have downloaded the angular project and in this episode we are going
to see the structure of the angular project we have installed so with that
I am your host Sarthak and this is the channel then you will get to learn various
thing related to web development and if you have not subscribed please
subscribe and like BitFumes on Facebook Twitter and Instagram so let's
see what is this and before that let's just start the server for our angular
project so I will open terminal and in the terminal I will say ng serve - open
and hit enter it will open firstly it will compile everything and then it will
open in our Chrome browser so we have this localhost:4200 and
wait for some time yeah here it is so let's see how all these things are
situated in our angular app we just have to concentrate about this source folder
because source folder is everything so I think you know that every project start
with index dot HTML and so with angular so you have doctype HTML heading yeah
angular title that's good and other things but the weird part of this page
HTML page is this app - root what is this this is actually an angular
component and what is a component I will just show you in just a few second but
obviously this is not any proper HTML tag you can say that this is a custom
HTML attribute created by the angular so when this is situated in our project for
that let's go to this app directory inside our source folder
in you will see lots of file only five file not lost so okay so now if I go to
app dot component dot TS let's open this file and here it's just importing
component from the angular core and then we are setting the component details so
firstly the selector is app - root and this is exactly we have seen in our
index dot HTML file exactly same so this is coming from here so let's do one
thing let's select this and I will say my my
that's good if I go now if I open console we will get this error
I have root doesn't match any element that's good because we are using my root
and we have defined I have root so let's just change this to my root so now let's
just save this and go to Chrome and within no time
it's refreshed and again back to original state so this means we are on
the correct path we said that this is actually the component selector name we
have given so this is good but where all these things are situated this means
this logo this going tail is links for that you can see in the component the
name is good by root 2 but the template URL template URL think about template
URL gel as the HTML part of this component where all these things are
situated so it says that it's inside same folder this dot and this forward
slash means we are looking in the same directory so this app dot component got
ts in the app folder so we are going to look for template URL in the same
folder and then the file name app.component.HTML which is this app.
component.HTML let's open this and
here we will see all these things are given here
so firstly styling something on the center that's good h1 tag welcome to
title I will come back to this one and here is actually the logo angular logo
this one this logo base64 if I open a new tab you can see this is data of
base64 converted that's nice and now all these things links are here
so if I say here bit films blog ok so within no time it's changed to bit
fields block very nice so I think you get the point that this component having
the name that means the selector and the template URL which is like this but what
about this this curly braces entitled welcome to title no it says welcome to
app so where this title came from it's like using a variable here it sounds
like that so let's again open app.component.ts and you can see it says
export class app component to component and here the title variable is assigned
a string called app so if I say welcome to bitfumes angular tutorials that's
very nice and if I go and it's refreshed - welcome to bit rims angular 2 - it's
great awesome so these are things you can play with angular but the third
thing is CSS style URL just like the HTML part we have separated or actually
angular has separated the thesis part so again this is the CSS part but it's
empty so let's just do one thing craziest thing at you one tag I'm going
to color this h1 tag of green that's nice so save this go here and you can
see this h1 is now having a green color so this means for this HTML or simply
for this component the styles are inside here and you can do one thing more if
you have another component and you want a global style that means style applied
to each in every component in your application then you have to go to this
style of CSS which is inside the source folder SRC folder if I open this it's
empty but if I paste this save it and again you can see it's having a green
color this means you can either define a global CSS or you can define a private
CSS or simply the component based CSS that's nice
so all these things in this episode but we will go very far for this angular
series and if you have learned something from Bitfumes and you want to support just
become the patron on patreon.com you can donate $1 or more as your Wish
otherwise you can subscribe to this channel and don't forward to like bit
fumes on Facebook Twitter and Instagram we will meet in the next episode till
then goodbye