Angular 17 Tutorial #7 - Folder Structure and Files | Angular 17 Tutorial For Beginners

welcome back to AR tutorials this is angular 17 full tutorial series for absolute beginners this tutorial is equally important and especially if you are an existing developer who has worked on some angular version previously because there are some groundbreaking changes uh you will see some files missing especially the end to end files Etc which I'll cover so it's important to understand the fundamentals and the basics of angular 17 in this episode we will go over the folder structure and all the files that are included as part of the framework in the initial go let's get started if you're new here make sure that you go through the first six episodes in order to learn some of the basic stuffs and the foundational topics of angular 17 in this episode we will do a freestyle kind of an tutorial where I'll actually walk you through the code the files the folder structure and make some notes for you that being said let's jump right into the code all right so we are building a crew management system as part of angular 17 so when you build a new angular application you would only have the application that you created we created crew management as part of the initial installation so if you missed that episode make sure that you go through it so once you have created the project you would have the project folder which is the root folder for you all right so let me make some running notes for you folder structure and files all right so first point you should understand is the parent folder will be the main project folder this is where everything will be contained now once you expand that folder this one you would see do angular folder right now you this you can ignore okay you will not use this on it on a basis development basis Etc ignore this folder for now okay now once you ignore this one vs code is again something that you would see if you are using VSS code you anything that you see with DOT right do folder name you can ignore them because these are something that internally it will use to do caching memory management application management Etc next you would see node modules now again you can safely ignore this one because this is where all the packages that you have installed will be located okay will be installed here in this folder all right now let me save this file for you I already have a notes file for you so let me add it here okay so let's delete this one here all right so like I said node modules is where you will see all the packages that your project uses you don't have to go through each file okay remember that you don't have to go through these folders or files unless you are actually making a change to a library or a package or something okay unless which is a very very rare case to core libraries SL modules okay so node modules is nothing but whenever you run npm install command npm install or NG add command you would see the packages here okay so if you are following this series we did installation of bootstrap angular material you can find those here okay I'll give you a quick example and then we'll move on to the next so if you see here we installed bootstrap and bootstrap icons those two folders we can see here okay that is nothing but those packages all right so that was nodecore modules the next um that you would see is editor config now this is specific to my configuration okay if you see this again it's a DOT config so you can ignore this file for now because unless you want to make changes to a editor settings okay make your custom editor change is in this file but again don't do it if you are not an expert if you don't know what you're doing don't even touch them same way do dogit ignore now what this file does is I have initialized the git repository so this will help me this in I can make um we can add folders and can add folders and files that we need to ignore while committing okay okay while committing your changes now this is specially helpful that you will add nodecore modules Etc in this right so that you don't commit them in your repository while working even in working in real time always have a do ignore file add the files and folders that you want to ignore while committing okay so those changes will not be tracked okay so like if you see here only the files in the git changes will be displayed not the node modules because it's already added as a ignore file okay you can see here node modules all right so that is dog ignore now comes the important very very important file which is angular.js now what angular do Json does is it would have all the configuration details okay of your angular application now it it will tell you that where are the node modules located where is the schema located what's the version number what's the prefix that you want to add now when you generate a component or something you can add a prefix like app or if you say your um let's say you want to do Arc whatever changes you want to make it would come accordingly all right that is the prefix Source root is the source root leave it empty that means it's the parent element schematics You're Building what kind of style you want to build your angular component there are different options you can use CSS you can use scss you can use less Etc crew management is the project name if you notice here that's the name of the project and that's the configuration if you have more than one project you can add them inside this and that's where the configurations will be displayed similarly under architect you would see build serve test extract and other options okay these are the configurations that when you run NG serve this is what will be the configuration that will be picked up okay so default configuration is development okay similarly if you see the test you would see that zone.js testing polyfills icons the source files the TS speec all of this will be picked up from here now again when you go to build you would see the build specifications that you want to see what should be the index file where is it located which is the main starting file Etc all right so this file you would use and you would change only when you are trying to deploy it in pipeline okay while deploying configurations configuring your Styles JS or for pipeline deployments okay that's where you would use this files and you will find all the settings specific to your project in some project like I said you want to have a different prefix Etc all of those changes different style that's what you want to use Etc will be in this particular file okay that's angular.js on now on a daily basis you will never change it but every time you are deploying you're making some configuration changes you might want to look at this particular file the next one on the list is package.json this is where all the packages that are required for your project are listed under dependencies you also have scripts that is nothing but the ones that we run in the command line okay we can add our custom ones also and we can say AR build and what it should do it should run NG serve and it should do Json server hyeny watch dp. Json you can configure your commands like this okay so these are the scripts that we write and we tell them what to run okay what when we run this command what should happen it should internally run this that's what it means okay you can add custom ones I will show you as we move along for now I'll just leave it at this because at some point I'm going to bring in Json server so I've added it here so to in short package.json is the file where you will check the installed dependencies of the project when we run npm install which we did in the last two episodes we installed the bootstrap framework and angular material you can see the entries here all right so you see angular material we installed we installed bootstrap and bootstrap icons so it's added in the package package.json so every time you add any packages any modules to your project that gets registered into package.json all right that's how it knows that when you do in npm install it will pick from this and install it so when we run npm install inside project the modules listed will be installed okay whatever modules you have in package.json will be installed that is your package.json Now package lock is again a replica of your package.json but at a granular level which means you would see a lot of Dev dependencies you can see here each one whatever dependencies they have they will be resolved but again you don't make any changes to this okay package lock. Json this has same details of package.json plus uh lot of Dev dependencies Dev dependencies broken down in detail okay so again you will not do you will not touch this don't touch this this manually okay every time you upgrade uh update with package.json this will be automatically resolved if you are using npm install and so on and so forth all right so that is all about the high level root level now you will also see TS app config these are the files that which tells you the typescript configuration okay TS config do app. Json tells you you the typescript configuration for your project okay now a quick look at it it says extends compile where should the output go what are what is the files main files uh what's the extension it is TS and those things okay again you don't change it don't touch it on like for Dev purpose okay unless you're doing some changes or specific versions of typescript that you're are doing or unless you know what you're doing don't touch this file same way tspec would be the testing file okay this is spec that's why it says types Jasmine right and here spec. Ts that means it will understand that this is for testing purpose so TS config dope. Json this has your typescript test specific configuration okay test specific configuration of course you have a read me which is nothing but a starting file starting file where you can add details of documentation of your project all right like if you want to build something you can add the inside the readme you can add the documentation those are all the high level files that you would see when you open the project now you would see a main F folder called Source this is your source code source code of project okay the main source code of your project now expand this and you would see something called an app folder okay now this is your application your actual code of your project or application okay this is the actual code we'll come to it in just a bit but before that let me show you the other folders assets are nothing but what you if you have static assets that you want to keep uh let's say images videos or say JS static files Etc all of that you can keep it inside the assets folder okay by default there is nothing okay but you can add them so the way you will look at is um you use this folder to sell the assets which are public okay public as in anybody can access them the next you have is the fave icon now this is the one that is often displayed in the browser bar browser icon uh bar okay so if you see here um if you open any uh say google.com U you would see a fave icon which is this one you see at the top that's the fave icon the one that you see for each specific application okay that's called a fave icon you can update it if you want we know that angular is a single page application angular is a single page application which means there is only one there is only one h HTML file okay which is index.html this one okay now if you open that particular file if you open the file you will not see anything except which says app Root okay this was added when we installed angular material which we did it in last two episodes otherwise you would only see app rot nothing else but when you open an in console and explore the source code you would see all the component restructure we'll cover this later for today all you have to understand is that angular is a single page application there is only one HTML file when we develop when we build the app the index.html will contain app Root which is the starting point starting point of the project okay of the component or you can say first component to be initialized okay that is index.html now after that immediately you would see main.ts okay now if you see here there is it says bootstrap application okay and it says app component right and app config and this is where it is going so this is what start starts your application main.ts is like entry point to your project okay this is what you're telling that bootstrap this application the first component to load is app component okay so this file tells you which is the which is the first which is the first component to be rendered in your project okay so remember first it comes to main do TS then it goes and it will pick up app component and that gets mapped into app rout that's how it will the injection works okay so remember the flow again main.ts will compile and say the first component to bootstrap is app component inside app component the code will be compiled and that will be brought to index.html all right that is the main file so somebody if you in your interviews they ask you what's the first file that gets initialized in angular that's main.ts that's how it knows which component has to be rendered and goes into index.html the next file is the styles. sccss now this can vary from Project to project somewhere you would see CSS somewhere you can see L somewhere you can see scss these are all extensions of CSS okay it can be different from Project to project in my case it is scss these are like Global styling for your project all right now whenever you want to write a generic piece of code which will be applied to throughout your framework throughout your application you will write it inside this particular file these are you can add Global styles to this file okay that is style. scss now let's go back to app folder again if you have any questions so far friend feel free to reach out to me in the comment section I'll be more than happy to help you now I'm expanding the app folder once you expand the app folder by default you would see app. component app. component app. component so think of it this way every every component in angular has four files okay has four files one is a HTM ml file which is this one app. component do the names could be different but I'm just telling you the types of files that will be there one will be scss or css orless that is your style style that is the CSS this is your component template this is the style then you have dopc dots this is your unit test file the last would be TS file which is actually the component class or The Logical piece of your component okay so remember every component will have these four files HTML which is the template template is nothing but the HTML okay so let me write it down or template or HTML you open style scss this is where you will write all the styles that are required in your CSS okay something like this you will write The Styling inside the CSS or scss or less whichever extension you have used while initializing your project the next is the spec file now if you look at it these are the testing uh unit tasks that are return returned for this particular component the last is the app component.ts which is again the the first component that we'll talk okay this is the actual component class which is uh which has a directive component and it was a class basically we'll cover about components as we move along for today important things you have to know each component has four files HTML CSS spec and TS file now let's talk about the app component I'll go to the app component.ts file first app. component component.ts file now if you see here in app component.ts you are writing you giving a selector app Root okay now it should ring the bell because we saw this somewhere else also do you remember where that's right so if you see here we mentioned selector as app Root and the same app app Root is mentioned in the index.html you can see here that's how all of this code goes inside the HTML dynamically as a single page application okay so app component is the main component that is starting your application now this if you open you can see title the same thing is mapped this is the HTML which goes inside your index x. HTML okay here you would not see head body tag anything because it just gets injected inside the index.html which has the head uh meta title body all of that so you don't need to write uh those things again here like Doc type or um header body Etc you will just write the code for that particular component all right so that is HT app. component. HTML CSS I already showed you that it is used for writing the Styles the last is the app component dosp speec dots now let's spend some time there to understand app component dopc dots now this is the unit testing okay angular used to have N2 end testing okay used to have I said because now it is no more supported it is no more red with the angular 17 or actually angular 15 onwards so there is no end to endend framework now there is only Jasmine Jasmine framework which is used for writing the unit tests and there is karma which is a test Runner okay so when we type NG test this is exactly what happens that it will the tests that are written in Jasmine will be executed and it will use Karma test Runner to run those test cases okay that is what this file will contain so this I'll quickly show you an example all right and I'm going to type NG test and it says not found so I go back to bash and here I type NG test and now you can see it will create the bundle it will create the application and it will compile the code which is nothing but and you see Karma Runner opened and it is saying that bootstrap class enabled to contain hello crew management okay so it shows the test cases that failed that passed you can see here in the green it says two passed and one failed but remember karma is a test Runner and Jasmine is the one where you will write the where you will write the unit tests okay so remember that these are the important things that you should know all about the angular folder angular 17 folder structure end to end okay now anything that you will change will have some impact somewhere okay remember in the app so it's extremely crucial to test to build and to make sure that the application is green and is good at all times okay this is the first starting point for your learning for your building angular application make sure that you when you install it you go through this notes and understand each file that I have written here and make sure that you are comfortable with each of these pieces because in the next episode onwards we will deep dive into angular CLI components modules and much more I have done um I hope I have done a good work in explaining to you if you think so please let me know in the comment section also please do show some love please do like this tutorials please do subscribe to my channel maybe leave a good comment to encourage me thank you so much let's keep the learning going in the next episode we will learn about angular CLI thank you so much for joining see you in the next episode

Channel: ARCTutorials

Views: 4,804

Keywords: angular 17 tutorial, angular 17 tutorial for beginners, angular 17 crud, angular 17 features, angular 17 full tutorial, angular 17 complete tutorial, angular 17 live project, angular 17 project, angular 17 crud tutorial, angular 17 best tutorial, angular 17, angular 17 signals, angular 17 defer, angular 17 components, angular 17 templates, angular 17 course, angular 17 full project, angular 17 routing, angular 17 crash course, angular 17 ssr

Id: uJIbc2YE58E

Length: 26min 31sec (1591 seconds)

Published: Thu Jan 25 2024