we're gonna talk about the angular again and in this video we're gonna we're gonna discuss this uh the project structure. This is the main file, the main folder actually which has everything we need to have in the in the angular application. So let's start with the very basic file which is the package dot jayson. So this is actually the file which indicates what files we need or what libraries were using and everything. A detailed what packages were using to create the including the the angular the angular itself is a package so the detail of the project and what are the packages being used in this project And what framework we're using another details. So if I just click on there you can see that the angular rep is the name of the file. The version is 0.0 point zero. If you update it, you can update the value of this version and the scripts we used the N. G. The start the build the watch and the test. So if you want to use something like you know the the N. G. Start you wanna you wanna you know you want to run the server so you need to write the N. G. Serve and be served. Will start these it'll run the start script. If you write energy, build it will, you know, run the build script. So this is how you just play with it. Anyway, this is a private project which is true and dependencies. We use the angular animation, the angular come and the compiler the core the forms and you you also can see that 13.3. 13.3 maybe when you watch this video you would see 14 or 15 maybe because you know the angular updates itself after every three months. But for now it is 13.3 anyway. The Rx J s if you if you want to use this on dot Js and then the dependency is like you know angular dev kit, the dev dependencies like the cli we just added the karma. The typescript typescript is really important because the the angular Js is based on typescript anyway then there is a file like T s conflict dot app dot Jason and in the in this Jason file you can see that it exchanged the T s conflict dot Jason file. So if I go there to the um t s conflict dot Js on file you can see that here you can conflict dot your your typescript you use an angular but by default they already you know configuration a lot. If you want to know more about the the configuration of a typescript file you need to visit the code cast and you need to search for the typescript configuration file or you can see the whole series where we talked about the basics of the typescript, you will get this and you will understand better about what this file can do anyway and then there is the ones you know about the T. S conflict this is the read me file, the simple leaving file which just you know, which comes with the package for whenever you download anything from good you have actually, this is a markdown file anyway, this is the node modules, you know that all the modules are here. This is the file specifically for the visual studio code and this is the uh, the angular file which is that you can see that the cash is filed. All the caches of the web packs and things are will be there, we do not need to do anything with these two folders anyway, this one is the SRC, the source code, this is the most important thing whatever you do with the application or actually you do inside this the source. So in the app this is a component. The main component. The app component, this is the assets folder. So whatever you put in the the assets like image or anything, you can put it inside this assets folder, the environment here, you can set up the environment if you want to, the environment variables and things like that, you know. Okay. The fabric con you know that the, the icon Okay. And this is the index dot html this file. Okay. It is nothing serious. It's not the html file but it's actually very serious by the way. So the, the app root file is the file which is which actually gets everything we have in the app component and this component can have many other the application can have many other components to but and if if we are just loading the uproot the app component and this will have other components. So ultimately this is the basic template of the web page and inside the web page we are loading the angular application right here and the title of the application, you can absolutely update it. For example, if I, you know, if I go to the browser is I'm gonna go there by the way. Okay you can see that this is the angular rep if I write angular space application and then I save it and I go back to the browser we can why? It's not updated yet. Okay, now you can see that the angular application so you can see that but this data, all this data which is inside the body is not actually the part of this uh this in extra html file. It is coming from the uproot. So absolutely to access this uproot, you need to double check whatever we have here. So um okay there is one more main file which is the main dot t s and the styles dot CSS whatever you do in this child's dot CSS will be applied to the to every component of the application for now we have only one component but we are gonna have a lot of components for sure. When you're going to use it in real life so you can see that you can add global styles to this file and also import other style files. So this is an important file for sure. And if I go to the uh the main dot T. S. This is the you can see the bootstrapping file or you can say the entry point. So when you load an angular application, actually this file gets loaded and uh you can see that the it actually loads the app module, the environment module, the environment file and some other important things like, you know, the core angular court. The enable production mode. This is not very important for now, but it just enables the production mode anyway, so it loads the app module, which is an important thing. A module. Absolutely. The angular the modular based framework. I'm going to the app, the app folder. And inside the app folder there is the app dot module dot T. S file. When you're working with the angular, you do not need to write dot T. S. Because it is understood by default that uh every module file is the T. S. File or you can see that the environment file is also T. S. So whatever you're you're gonna import you're gonna import from a T. S. File, ultimately. So this is why this is the way anyway in the apple cart module files, you can see that uh the app routing module which we enabled while we were installing and setting up the application. So the routing is coming from the routing, um that module, it's coming from there from this file actually, anyway, this is the routing module then the app dot component file. This is the the app dot component file is right here. It's loading this file and the module, the app dot module file has a few more things like, you know, all the imports, you're importing the browser module and the app routing module, the declaration, you declare the app component, uh whatever component you want to be declared in your application, you need to mention that here. Okay. And the bootstrapping from where you want to bootstrap your application. Absolutely. Uh the main dot es is an entry point but it's it's kind of bootstrapping but it actually, you know, it runs the app dot module because it has the app app dot module file inside it. And the app dot module file has the bootstrapping and it bootstraps the app dot component. This is the main component, which is this one. This is the app dot component anyway. Okay. So this is the this is the module and this is the actual component. Every component will be having four important file. The app dot component dot t s file. This is the base of everything because it's you can say the the actual file, whatever you do whatever you program in a component, you do it here inside this class. This component class anyway, but absolutely. The component needs a few more elements to um to run in the browser, a template file, a style file and the selector name is, you know, we'll talk about this later. So the template file is this one the app dot component dot html. So this is the STL file of this component. You can whatever you do, you can reflect this in this file in this html file. Okay. The second important thing, if we talk about this is the let's get back to to hear this tile file. So this is the style file which has nothing for now because whatever this style we needed we already have it inside the html file because html supports the the styling to. Okay. Another important thing, if you go there, another important thing is the uproot. This is the selector of this component. So when you want to include this component anywhere or you want to call this component, you will be calling by the uproot. This is the name of this component which can be updated, you can change the name or the selector of this component for now. We are using this this selector where we're using this selector here uproot. So or if you want to add any other component or you want to change the name of this app component. You absolutely need to update the name right here and then in this file so I think it's understandable. This is the basic structure of the file of the of the whole application. In the next video, we are actually gonna do some cleanup thing and then we're gonna move on to the next step till then stay tuned.