Angular 10 Tutorial #7 - Folder Structure of Angular Apps | Angular 10 Tutorial For Beginners

hi friends welcome back to arc tutorials this is angular 10 full tutorial series for absolute beginners in today's episode we are going to learn about the folder structure that comes with the default vanilla angular application however in most practical use cases your folder structure might change little bit or may become little more exhaustive but overall the folder structure of most angular applications will follow the same suite which means that once you get an understanding of the basic folder structure you will be in a much better position to understand the existing code and also for new projects you will be able to better organize and stay in much more symmetric and structured way this is part 7 of the angular 10 full tutorial playlist i have planned around 100 tutorials for you including live project in this particular series make sure that you check out the description box because that's where i'm going to put all the links the code and the notes that we will make in this particular series that being said we are in the seventh episode and make sure that you have gone through the previous episodes because you don't want to miss out on the previous learnings also if you have any doubts during this particular series please feel free to drop your comments or queries in the comments section and i will be happy to help you that being said let's get started with today's topic which is the folder structure and then we will also talk about the little bit about boot process but i will cover that in detail in the next episode all right so let's get started and so when in the previous episodes we have seen that um we generated a project called simple crm right it's a crm tool that we are going to build and this is how it looks when you create a new project so these are some of the project folders and the default directory structure that you get right so i will walk through each one of the folder explain you the importance some of the key fundamental concepts that you should understand in the folder structure let's get started so the first thing that you see in the project is the project folder right so that in our case it's simple crm that's the name that you get when you do a ng new project name right so that's the first top level root folder that you see right inside that you would see e2e folder right so e2e is nothing but that's the end to end test cases right and to end test scripts now this is the repo which most of the automation scripts are written by your qa engineers right so when you see the word e to e it means end to end functional test scripts expand a bit little bit and you would see source and this is the main ripple or i would say the folder where you have all your tests inside right now inside source you would see the spec files that you will create right so the specs files always ends with dot e to e hyphen spec dot ts if for example if you in this case the name is app dot e to e hyphen spec dot ts which corresponds to your app component right or app module now if i'm building a users i would say user dot e to e or let's say login dot login dot e to e hyphen spec dot ts right so remember all e2e will end with e2e hyphen spec dot ts right that's that's the important thing we'll end with dot e to e hyphen spec dot ts extension all right so that being said the next file that you would see is protractor.conf.js so remember that all the end-to-end test scripts are written in protractor framework right that's the framework we use for writing end to end and this comes by default okay when you it comes by default in angular applications then you would you are seeing a file called protractor dot config.js so this has all your configuration settings configuration settings for running the end to end test scripts okay so for example you would see if you open you would see that um which specs to run which browser to run what's the base url what's the framework that you are using so the tests are written in jasmine it's run by protractor right so those are all the details that you would see as and when we progress and do a testing module the next is ts config this is the typescript configuration that you are writing out this also has where the output directory should be right like for example when you run where should the e2 is go right so that is your ts config which is your typescript yes json so this is your basic typescript settings that you would find here right that was e2e folder then the next and the most important folder is your src which is the entire source code of your application right so entire source code of your application is inside src folder right now expand a bit and you would see app folder which is a default um i would say a module right default app is a default module and it also has a component right so this is app module which has a app component so that's where you are seeing the component files which are related to this so each component will have three files right so the file would be app.component.html app.component.scss or css whichever style sheet you have selected then you would have a spec file which is your unit test script for this particular component so these are the three and then finally and the most important app.component.ts this is your class file right template is nothing but your view or you can say ui or html code component is your class file scss or css is your style sheet for that component now it's a module so that's why it has app.module.ts right what is a module what are components will cover it little later and maybe down the line two three episodes so stay tuned don't worry too much about it today all right so that being said uh the next important folder in the source would be your assets folder right so assets folder is nothing but all your assets like for example you might want to have images or mock data or apis right that's the urls that you want to have or say some kind of pngs thumbnails all those can be kept inside assets then comes the folder environments now whenever you are developing an application it's rarely that you would do in your local system right so you will have a settings for your local system you will have your settings for your dev environment you will have for local dev local environment you will have for dev you will have for uat qa right qa uat and pre-prod or prod etc right so we will have our environment files that will be created here so when you see environment dot prod dot ts it means that this is a production file these are the settings which are required for your production environment similarly when you want to create different environments you'll create new files like environment dot dev dot ts environment environment.qa.ts etc that will point to your those files will point to that respective environments then comes your fav icon which is nothing but the image that is shown in the url browser toolbar right so that's your fav icon that's your identity of your website and then comes the main file which is index.html right so remember that angular is a single page application right so what do i mean by single page application that means there is only one index.html that's all there is no other html pages right and that is because what happens is everything gets dynamically generated and inserted into the html file so there is really no other html other than index.html now just a glimpse of index.html you see it has only the metadata of html right like the header head tag the body the links and finally in the body you will see only app root so there is only one tag which is app root and nothing else in the index.html which means all the application will be dynamically generated and inserted into this particular directive right we'll learn about that as and when we progress so there would be few things if you are an absolute beginner this may look little confusing to you tricky but trust me as we progress i'll make sure that you understand it with live example right for now the important thing that you have to understand and know is there is a directive called app root and that is what which inside that we will generate the code dynamically at runtime all right the next file is main.ts now this is extremely important file because th this tells where it should bootstrap so if you see here there is the most important thing is this line number 11 right this tells your application what is the first thing it should bootstrap with that means what is the first thing it should start with that's why you will see something called bootstrap module right which is the module you want to start your application with by default it is app module but in most practical use cases this can be changed and should be the authentication module what happens is the first time you launch an application it will call your authentication and make sure that whether you're logged in or not right but in the default application the if you see the bootstrap module the bootstrap module it's by default app module and no points for guessing can you guess where this app module is that's right it's inside the source this app module dot yes that we saw right we'll learn in detail this is step by step linking now you will be able to link the entire folder structure so this is the same app module that you are booting what is here right so we'll as we progress along we will make customization we will add authentication so we will have to change this will come to that later think that this is the starting point right so what is this is the starting point of your application a lot of times in interviews they ask you like if i want to change the bootstrap module which one i should change or where should i change so your answer is it's in main.ts and you will update your bootstrap module right now another question that is asked is is it necessary can we can we bootstrap with multiple modules or can we have a different module other than app module yes we can always have any other module in our bootstrap right so there is no mandatory that it should always be app module right now that was about main.ts now polyfills is used for supporting uh the older versions of browsers right this is for supporting supporting older browsers right so this does it on its own there is nothing much we do here or in your live projects you will not be doing anything changes to polyfills at all it's a default library that we use so there is nothing really needed that you will change it unless you're working on something which is very very browser specific or in terms of a particular browser the next one is the styles.cscss i have used scss that's why it is style.scss if you are using css you will see this file as style.css right so this is nothing but these are this global style sheet right global style sheet for global styles for example if you are say you want to apply a particular link color right that should be common so you can put it in global styles so that every link in your application will be same right so this is some of the these are some of the common style sheets i would say right common or you can say global style sheet for elements all right so this is an example so the next and important thing is test dot ts now this is your test script for the main.ts file right so in some of the interviews they will uh a question was also asked by one of our viewer in angular 9 series that what is the difference between main.ts and test.ts right so the difference is main.ts is the main file through which you start your application it's a starting point and test.ts is the test script for that main dot yes right so basically you are testing the main.ts file code whatever is there in mind.sds you are testing it here in test.tso if you see here it is the same thing that you would see what is there in your main.ts all right so that being said the next file that you will see is browserlist dot rc not much that you have to do here so don't worry about it the important file another important very important file is angular.json now this is i would say the backbone right if main.ts is the heart angular.json is your backbone of your application right why because it has all the settings it has all the scripts details ports settings that your application need to run right let me show you don't don't hurry don't rush into too many things it's a big file overall what you need to understand is that this file will have the scripts to run so whenever we use ngcli right angular cli so these are the schematics right it will have your project details the project name the version uh the projects that you have inside your this particular project and what is the style sheet you're running uh what's the source root prefix and how do you build serve right so all these are here right inside angular dot json schematics now what are schematics nothing but like when you run angular cli commands those commands are defined here like build serve test all those are defined here in angular.json right so take time go through it even if you don't understand something it's fine today we will change them as we go along to customize into a real-time application we will learn each and everything as we reach there don't rush into learning just take it one thing one step at a time [Music] all right so the next thing is karma.conf dot js so we learned that there will be unit test scripts right like app dot component dot uh dot spec dot ts so all the testing files will end with spec dot ts if it's a unit uh test script it will just be spec dot ts if it's end to end it will be e to e dot hyphen spec dot ts right so that's how we know so karma is your runner test script runner right so using which we will run our all our tests right so this is for running or executing all our test scripts all right so very very important and here again you can configure things like which are the frameworks you're working with so we are telling that we'll be using jasmine so we require these plugins and then we are also telling that what's the port number it has to run which browser to run whether it is single run or multiple runs etc etc right so those are the configurations for running your test so this is your file to change any settings of it all right so the next and important files are package dot json and package hyphen lock dot json so this i will cover it in next episode in detail right this is for next episode so make sure you stay tuned for that because i am going to explain this is an important two files which are there if you want to work so stay tuned for the next episode as well and then the next files that are there are ts config right tslint so these are nothing but let me cover them here ts config and tslint are for typescript settings right how you want your code base the linting should work how what are your configurations for your application in terms of typescript right so if you go here you'll see the typescript you're running on es 2015 target module is es2020 and then you have importers help right true and then declaration source map what is the output directory and what is the base uh hre of url so all these settings are very very important from perspective that when you deploy where it should go right so these are all the settings that we have to do when you are working especially in terms of deployment right all right so you can customize the output directory when we say ng build and all that so this is your build output directory source map and much much more right so just take a look at it go through it you will understand when we reach build application we will again go through that and change them also all right and then we have something called tslint now this is linting which is nothing but what how the errors should be or warning should be and highlighting should be the spacing like for example the codalyzer and then recommended the cvrt should be warning what are the imported blacklist maximum line length so these are basically enforced right so if you look at any complex enterprise application they will enforce coding standards right and that coding standards are defined here in this file so whenever you're new to any project or any company the first thing you should check is the ts linting to make sure how usually it will highlight with yellow color right if you don't have the correct spacing if you don't have the correct nomenclature it will start showing up and all that so make sure that you check out the ts lint file so that you understand what's the coding standard set by your organization alrighty so that being said that brings us to the end of the folder structure and i hope that now you are pretty much comfortable with what these files stand for what each of this folder does what each of this file will do for your application in the next episode i will cover in detail about package.json how it works package hyphen log.json all of that will cover it in the next episode because it's a it's a topic which will be an ongoing thing that will do that's why i have separated out into next episode please drop in me drop me any comments or questions that you have i will be happy to answer them in the next episode i will also talk little bit about the bootstrap booting process of angular and then we will talk about package and package lock i hope you are enjoying the series i am putting in a lot of hard work in this particular series i appreciate i'll appreciate if you can like share comment and subscribe to my channel also if you want you can buy me a coffee at the given link here thank you in advance thank you so much see you soon in the next episode

Channel: ARC Tutorials

Views: 11,572

Keywords: Angular 10 tutorial for beginners, angular 10 crash course, angular 10 tutorial for beginners step by step, angular 10 tutorials for beginners 2020, angular tutorial 2020, angular 10 full course, angular full example, angular 10 for freshers, angular 10 for experienced, angular 10 full tutorial series, angular 10 crud tutorials, angular 10 tutorial for beginners, angular 10 beginners tutorials, angular 10 examples tutorials, angular full tutorial series, angular 2021 full course

Id: U7H4hial7WQ

Length: 22min 28sec (1348 seconds)

Published: Wed Oct 28 2020