#04 Angular files and folder structure| Getting Started with Angular | A Complete Angular Course

in this lecture we are going to have a quick overview of angular files and the folders which gets generated when we first create the angular project and we are going to understand the use of each of them one by one in brief so whenever we create a new angular project using angular CLI it generates a bunch of files and folders inside the project directory as you can see this angular ecart is our project directory and in this project directory there are a bunch of folders and files that have been generated automatically when we used angular CLI to create a new angular project and we created this new angular project using NG new command so when we use NG new command using angular CLI it creates a new project it generates a bunch of files and folders which is required for that project and each file and folder has its own purpose so let's see the use of some of the important files and folders of angular project which you should know about and let's start with this node modules folder so this folder is where all the third party libraries get stored on which our application might depend on so when we work on our angular project we might need to use some third-party libraries and we might need to download those third-party libraries from npm so whenever we will download those third-party libraries from npm those libraries will get stored inside this node modules folder now this folder it is purely full development purpose and we don't deploy this folder in production server also we don't check in this node modules folder in our repo so let's say you're using git as your code repo and you want to share this project code with your team members so what you will do is you will push these files and folders in the git repo and when you are going to push these files and folders to the git repo at that time you will not push this node modules folder as I said it is purely for the development purpose now you might say Manoj you said that in this node modules folder all the dependent libraries and packages will be stored so if we don't push this node modules folder in the code repo or while deploying it in the production then how the angular application will work because the angular application is dependent on those third-party libraries so how will this angular application work well what happens is so for example let me go ahead and let me delete this node modules folder so now that node modules folder has been deleted now let's just assume that we have just checked out this project code from the git repo or any other repo so let's say my teammate has checked in this project code in the git repo or any other repo and I have just checked out this code from that repo and in there I don't have the node modules folder in that case this angular application is not going to work because it is dependent on some packages and since the node modules folder is not there that means those dependent packages are not available this project is not going to work so what do we do now well all we have to do now is we can open Terminal here okay or you can also use command prompt let me clear the terminal here and currently I am in the project folder you see this is my project folder path and in the project folder path I just need to type an npm command npm install and then it is going to install all the dependent packages on which this angular project is dependent on and it is again going to create that node modules folder and in that node modules folder we will have all our dependent packages so if I go ahead and if I press enter it is going to create the node modules folder again and in that node modules folder we will have all our dependent packages so you see this node modules folder has been created and all the dependent packages and libraries are being downloaded and installed all right so all the packages have been installed again we have this node modules folder and in there we will have all our dependent packages okay now you might ask all right so we run this NTM install command and it installed all the dependent packages for this angular project but how does it know on which packages this angular project is dependent on that sphere this package.json file comes into picture so let's talk about this package.json file now this package.json file it is one important file and this is a standard configuration file which every node project has now this is an angular project but here we are going to install packages from npm right so every project which depends on npm will have this package.json file and in this package.json file you will have some project related configurations for example you can see the name of the project the version of the project currently it is set to 0.0.0 we can change this version then you can see the scripts which can be used in our angular project for example in order to start this angular project we use this NG serve command in order to build this angular project we can use this NG build command okay and we have all other Scripts then here we have two sections dependencies and Dev dependencies and these two sections stores all the third party dependencies which this angular project has so for example this angular project is dependent on these packages this at angular slash animation at angular slash common at angular slash Co let me actually show you that we are using this at angle slash Co in our project so again if I go to tack component if I open this app component.ts file you see here we are importing component from this angular slash Co package okay so this angular project is dependent on this package so this package.json file it has all those informations okay and we also have some Dev dependencies basically the difference between dependencies and Dev dependencies is that in the dependencies you will have the list of all those packages on which your project is directly dependent on but in the dev dependencies you will have the list of all those packages on which this angular project is dependent on while we are developing this angular project so these are all development dependencies these are the tools which we might need when we are developing our angular application okay so here you can see the list of all the third party packages all the third party libraries on which our project is dependent on so when we type let me clear the terminal again when we type this npm install command it is going to look inside this package.json file it will check for all the dependencies and all the dev dependencies and it is going to download and install all those third-party packages okay so this is how npm install knows which packages to install and store inside this node modules folder all right then we have this Source folder we will talk about it later let's go to this editor config file here so this file here it is basically used to set up the team environment so in a real project many developers may work on a single project and each developer may follow different coding standards to declare variables classes style size of each character length Etc but in the end we need to merge the code of each developer to produce the final product right and at that time it may produce some error or messy code AS each developer is having different coding standards now in order to solve this problem this edit config file is used where the standard rules are defined which needs to be followed by the developers in the teamwork and moreover the developers do not have access to this file and only the manager or the team lead who defines the rules can only have access to this file and in this file you can see all those rules you can Define your own rules for the coding standard as well now while developing the angular application we as a developer do not have to worry about this edit a config file it is the responsibility of the manager or the team lead who will Define these coding rules okay let's close this file as well and then we have this git igno file so let's say your team is using git as the code repo now when you are checking in your code to the git repo you might not want to check in all the files and folders in the git repo right so in this file you can specify the files and folders which you want to exclude from your git Repository if you have these folders in your angular project while checking in in the git repo so these folders will be ignored then you can see we are also ignoring this node modules folder as I mentioned we are not going to check in the node modules folder in the repo then if you have these files in your project these will also get ignored and you can specify all the folders and files which you want to ignore which you don't want to check into git repo so let's say in my angular project I have created a new folder I will call it maybe temp and in this step folder I am going to keep all the files which is not required for checking in for example in this temp file I am going to keep some notes or maybe the design document or something like that so I don't need to check in those files in the git repo so I want to ignore this file to be checked in into the git repo for that I can simply go ahead and I can include that folder here so I can say slash temp so this folder will be ignored and all the files which we have inside this folder that will also get ignored it will not get checked in in the git repo okay I hope it's clear let me go ahead and let me delete this folder then we have this angular.json file now this angular.json file it is one of the most important files and it contains all the configuration of your angular project so here you can see the project related configuration the project name is angular cart project type it is an application then we have all other configurations for example what are the style sheets we are going to use and where to find it so we are going to find the style.css in the source folder then what are the scripts we want to use we can specify it here inside this array here you can also see which file should be loaded when the angular runs for the first time in this case it is index.html file which is present in the source folder what is the main entry point for the angular application in this case it is main.ts so all these angular related configuration you will find inside this angular.json file now we are going to talk more about this angular.json file in our next lecture for now this should be it just keep in mind that this angular.json file is the most important file here and it contains all the configuration related to our angular project now we already talked about this package.json file we also have something called as packagelog.json now this package log.json file it records the exact version of every install dependency including its sub dependencies and their versions the purpose of package.log Json is that it ensures that the same dependencies are installed consistently across every different environment for example we might be deploying our angular application in development environment production environment integration environment so in all these environments the same version of all the dependencies gets installed this job is taken care by this package log.json file then we have this readme file we don't need to worry about this file let's close this one then another important file which we have is this tsconfig.json file this file it basically contains a bunch of settings for your typescript compiler and typescript compiler look at these settings and based on these settings it is going to compile your typescript code into JavaScript that the browsers can understand but for most of the part we don't have to worry about this ts.config file okay let's close this one let's also close this kit ignore and now let's talk about this Source folder so this Source folder is the most important folder and you as a developer will be spending a lot of time inside the source folder it is this Source folder in which we put all our application source code so every component service class modules everything we need in order to create an angular application that goes inside this Source folder now whenever we create an angular project by default angular framework creates a lot of files and folders within this Source folder and you can see those folders and files here so first of all we have this app folder this is the application folder whenever you want to create any component service or module you need to create it within this app folder okay so just remember that in an angular project we can have multiple applications and by default we get one application and that application is available inside this app folder and inside this app folder by default we have one app component so these four files together they create a component and we are calling it as app component and then we also have this app module.ts file so again remember that every application which we create in an angular project every application will have at least one module file okay so every angular application must have at least one component and one module in this case for this application we have one component so these four files together will create one component and we have one module now we're going to talk about modules and components in great detail in our coming lectures so we will not worry about that right now I will close this app folder then we have this assets folder now in this assets folder we store all our static assets for example images icons text files Etc and whatever we store inside this assets folder that will be public and that can be accessed for example let me go ahead and let me add an image inside this assets folder for that let me go to this folder here I have this sample files folder and in there I have an image I'll just drag this image and open vs code and I will put this image inside this assets folder okay so here we have this planet.jpg file now let's try to access this file from the browser let me go to the browser and there let's type root URL which is this localhost colon 4200 then we have the assets folder and in there we have Planet dot jpg if I press enter you see that image has been rendered here so whatever file and folder you will place inside this assets folder that will be publicly accessible you can even put it inside a folder so inside this assets folder let me go ahead and let me create a new folder I will call it images and in that images let me go ahead and let me put this planet.jpg okay so now if I go to the browser I will have to specify that path so in the assets folder we have images folder and in that images folder we have planet.jpg and it is still accessible but if I go ahead and if I cut this planet.jpg from here so let me just cut it from here and let me put it in some other folder maybe let me put it inside this app folder itself and now if I go to the browser and if I try to access this planet.jpg from that app folder so if I say app slash planet.jpg if I press enter you see nothing is rendered here so only those files and folders which you put inside this assets folder only that will be accessible publicly so let me go ahead and let me move it again inside this images folder all right so in this assets folder we keep all our public assets like icons images text files Etc then we have this web icon dot Ico this is just a simple icon file which will get displayed in the browser so if I go to the browser here you will see that Fab icon has been rendered okay so based on your project icon you can just replace this five icon Ico with your application Fab icon then we have this index.html file this index.html file is the main HTML file which gets rendered in the browser when angular app runs and here in this index.html file you will see that we don't have any references to any style sheets or JavaScript files this is because all the dependencies will be injected to this index.html file during the build process by angular CLI and we will talk about it more in our coming lectures then we have this main.ts file so this main.ts is the typescript file and this file is basically the starting point of angular application so in a lot of programming languages we have this concept of main method which is the starting point of the application we have the same concept in angular also in this main.ts file all we are doing is we are bootstrapping this app module so when we will run this angular application it is going to execute this main.ts file first and there it will load this app module and everything else will start from there and again we are going to talk more about it in our next lecture then we have this style.css file this is where we add all the global CSS styles for our angular application so whatever CSS style we will specify here that will be applied to each component and each directive but for each component also we have a CSS file we call it component.css and in that component CSS file whatever style we will specify that will only get applied to that particular component for example in this case if I write some CSS style inside this appcomponent.css those CSS Styles will only get applied on the HTML elements of app component.html but whatever style we specify inside the style.css that will be applied globally all right so these were some important files and folders which we need to know about when we are working with angular project in the older versions of angular you will find more files and folders but they have been removed from angular 16. so we need not to worry about them and here we have briefly talked about each of these files and folders but as we move along in this course you will learn more about these files and folders and the need of each of them all right so this is all from this lecture if you have any questions then feel free to ask it thank you for listening and have a great day

Channel: procademy

Views: 39,495

Keywords: angular, angular tutorial, complete angular course, step by step angular

Id: p4FKy9Kj9dY

Length: 19min 38sec (1178 seconds)

Published: Thu May 25 2023