Understanding certain things in Angular

00:00 hello guys welcome back to angle Isaac

00:03 splash tutorial this is Felix I hope you

00:06 enjoyed the last video that is how to

00:09 setup angular environment and I hope by

00:12 now you are able to create your first

00:14 angular application which is this now

00:18 before we move to the coding aspect of

00:22 this tutorial I want you guys to

00:24 understand certain things now let's open

00:27 our visual studio code okay so now make

00:34 sure you open the project you created in

00:36 a last video

00:38 now you can see we have solar of things

00:40 here please don't be scared if you move

00:44 to the coding aspect of it you would get

00:46 everything cleared now we have one file

00:50 here called mainly tears this particular

00:53 file is the entry point into your

00:56 application and this line of code says

00:59 hey we are about lunch angular

01:02 application in a browser environment

01:04 quench is taking up model as its

01:07 argument now what is this up model every

01:13 angler project has at least one root

01:17 model which is defined here which is

01:20 this what is this now it can be any

01:24 model but conventionally this up that

01:28 Model Ts is normally used okay

01:33 now let's actually see what is inside

01:36 what is actually inside this particular

01:39 file now let's open it now after

01:42 important orders we have this that we

01:46 have this year this is a decorator or we

01:49 call it annotations if you are familiar

01:52 with Android you probably know what

01:55 annotations are okay and this doc Rita

02:00 identified this class as an NG model

02:04 class now when we open this file you see

02:08 this card aquata is component so how

02:12 angular treat

02:13 this is different from how angular

02:17 treats this because the because they

02:21 have different annotations or they have

02:23 different the critters

02:25 okay now the colorations declarations

02:30 contains that is component that are

02:34 available to this model we also have

02:37 input it also indicates which other

02:42 models for which other functionalities

02:45 are available to this model now it

02:49 imports what I called browser model

02:51 which makes other browser services like

02:55 dumb rendering and look locations and

02:58 others available to this to this model

03:03 now we also have providers I will talk

03:07 about providers in more details in my

03:10 upcoming videos so please keep watching

03:13 my videos we also have bootstrap that is

03:16 the root component that angular creates

03:20 in this particular file that is up root

03:24 okay because this is your that's the

03:28 root model okay now what is here what is

03:35 actually here is what we are seeing here

03:39 now let me delete everything here we

03:44 save it you see now there's nothing here

03:50 okay you also have up dot component or

03:54 CSS well you spy your user interface we

04:01 also have this after component dot TS

04:04 that is where you write your business

04:06 logics you also have a folder here

04:09 called asset that is where you put your

04:12 images and other external libraries like

04:15 jQuery bootstrap and other files here

04:20 okay

04:21 now you also have what cost ID or CSS

04:25 now any

04:26 define here it's available to every

04:30 component in your application okay

04:34 now in my next video I will talk about

04:39 how you can create a component and then

04:42 reuse it see you in the next video

04:46 thanks for watching