Setup Angular Project Like Pro | Angular Project Setup | angular tutorial for beginners

welcome back guys so in this episode we are going to discuss how we should set up our project when whenever we start any new project how do we set up and how do we do the folder structure and everything where should we keep our components Services models and everything right so that we are going to discuss this is the second video related to that the first video was very basic but in this video we will be diving more deep into that okay now so just uh first we will discuss the overall structure so if we say when uh this is with uh the project which is not with the lazy loading right again with the lazy loading just the module will be extra part but basic thingses will be same so let's say on the top one we will have core folder shared folder and the pages folder so first core folder right so in core folder we can have so core F folder will be responsible to hold Services just the code which is just going to have the TS file means just the right just the coding part so just to see services will be the first folder right in that Services you can create a master service file all right so Master service means this will be specific to API call let's say in API call what just the four API call we normally do right so you can create a generic service over there where you will have four get post putut and delete APA call right then your respective service means from all the service you will call the function from this master service so only one place that is Master service you have to implement uh HTTP client right so again we will see the difference like why it is necessary because if you have let's say if you have 10 to 15 service in all the 10 to 15 service you need to import that HTTP client right but if you have a common service for API call so there only one input will be there so you are just reducing your code right so this is about service folder then models right when we talk about models we have classes and interface so two options we have either we can create classes or we can create interface so for that we have two folder constant this is also very important right so whenever we say constant a data which is not going to change and which is going to be used use full or multiple scenarios right so that kind of data we are going to store in the constant so again in the constant you can differentiate like you can create one API constant file image URL if your application is going to fet data from uh particular image uh URL then Cloud specific URL right if we say Amazon we get S3 bucket and AER we have block right so like that you can store you can store Cloud specific URL into constant then we have guard so when we talk about guard we normally create two guards connect acate which will check like route do we have to allow the route to load or not and then can deactivate that will be used when let's say if we have a form and if we are trying to navigate we get the popup like do we want to save unsaved changes or not like that we can Implement then resolver resolver is also kind of a guard but it has a separate value or separate importance so whenever any component is getting loaded let's say you have a scenario before loading component you need to make an API call and get the data so that kind of scenario you can handle in a resolver okay Interceptor Interceptor you already know like whenever we make the AP call before uh API call going from our angular system finally if we have Interceptor loaded uh Interceptor implemented it will go to the Interceptor from there it will make the API call and same like that whenever we get the response back first it will come to the Interceptor then it will pass on to the service and then component so Interceptor will sit between your app application and the server then util file U file are just a specific file where you will keep your reusable functions let's say date formatting form validation array operations right so many scenarios can be there so normally we call this as a u then we have a shared folder so in shared folder we will have just three folders first will be reusable component we normally call it as a wigets so component which won't have any routes and these components are going to be use our multiple components right then direct if we are creating our custom directive we will be keeping it over here pipes right whatever the pipes we are going to create our custom pipe that we will store here Pages folder that is where our actual HTML components will be there where we will be writing our let's say user component admin component employee component create employee show list employee whatever the component and this component will have routes right just like reusable component reable component we normally don't create routes of this but for in the components which we will be creating in Pages we will have routes then coming back to asset folder right so in asset folder also we can create some folder structure so images folder will be responsible to hold all the images i18 this is if your application is going to support multiple uh language right Hindi English German French like that your application is going to change so that I folder particular language. Json file will be in the I folder static let's say uh some particular drop down is there and drop that drop down data is going to be let's say 10 to 15 records data is going to be in the drop down but rather than creating that uh 10 to 15 record uh array into that particular component you can store that kind of data into Statics right so that data is not going to change but you need to keep it somewhere either you can do that thing in the constant or you can use the static folder then icons if you are going to use certain icons that are not in the font Su any material library or anywhere you are using some specific icons that you can put it in the icon folder so this is the overall folder structure what we have discussed let's try to implement the same so coming I will start from the core folder so in SRC app folder first folder we have to create is core so core first I will create all the fold spe parent folder after that shared then we will have pages right now starting with core folder first folder we are going to need is Services again I will create the parent level folder first services or let's uh make it as a service only then model then constant what else we have discussed guard resolver and Interceptor so guard s interceptors because we normally have two Interceptor first like for ongoing request and second Interceptor to process the incoming response Interceptor is done then utils so utils folder right so parent folder created in inside the core folder first we will implement the constant let's say inside that we are first API call the like API constant right so API constant TS right now we have to create a constant file so xort C API constant right so here you are going to store all your API endpoints what not you can do right so just for an example let's say we have user so you can say user colon and inside that create right let's say user slash create new user this is kind of a API inpoint you have so like that you are going to store all your API endpoints over here API actual API will will will be storing into the environment folder but the method name right from that method name you are going to store here so just like create get all users col then user SLG all users like that whatever your API endpoint is so this is for user let's say we have employee so employee object get all employee colon then API inpo will be obviously employee then get all empy employee like that you can create so many API in points right so this is the first example of constant we have done then guard right so in guard just I have discussed like we can create two types of guard that first one is the can activate and second is the can deactivate so right click open an integrated terminal so to create the guard we have a command angular CLI so NG generate guard okay let's enter so whenever we uh write the command to create a guard right so as you may have know like what type of guard what name you will to give okay so I forgot the name so it has asked let me just again write NG generate guard let's say oard right so oard will be like can activate we will Implement so enter so now it will ask like which type of guard you need to implement so let's see so these are the various guard we are going to have can activate can deactivate can can activate child so first just can activate we are going to use so just press enter so this will have this will create a can activate guard right so first it was a normal service like base but now it is an arrow function right so here you can write the logic like uh if after loging if you are storing data into logo storage or C Storage or cookie you can check that code over here like if data is present or not if yes return return true otherwise you can redirect to your login page or you can show some message also whatever things you need to do so this is K can activate just like that right click okay terminal is already open we need to create another guard that is NG generate deactivate okay so this is the second guard I'm creating which will be called when route is getting changed before that I need to check anything right so that is can deactivate so this deactivate guard will we normally use let's say you have a user registration form okay on the page load if user has typed let's say you have 7 to eight field but user has added uh information into three or pH and if he's trying to navigate right either he did that intentionally or he done did that M by mistake right on the back button or something so before navigating we can check we can ask user are you sure want to do uh go away or do you want to fill that kind of functionality we can do it over here that again logic will be like we can whenever user types into any field we make that form dirty and if form is dirty we show the deactivate guard right so that kind of functionality we normally Implement in the deactivate guard so these two guards are done AP constant is done then we have Interceptor so now let's create Interceptor so as I told you like two Interceptor we will create first is for the outgoing request then uh second Interceptor to process the incoming data right so NG generate I let's say first Interceptor let's say uh after login if we are getting any token right and our API are token based if you don't send the token you are you are not going to get the data so we store that token into session or local store or the cookie so whenever you pass the whenever you make an API call that token need to be inserted into your header API header right API call header so for that you can Implement a token Interceptor so let's say token enter right no okay I means it has understood Interceptor so let me write full so you can see if I say just I it will it will create uh interface so let me just delete this right now I have written complete thing that is Interceptor and then my Interceptor name so let it's try now now it should create an Interceptor let's check it yeah so now you can see it has created Interceptor so this is a normal Interceptor you get whenever you create an Interceptor using command now let's say you have the login token in your session storage or local storage so you need to whatever uh whatever the request is uh performed after that you need to insert headers into it so I have that code ready so that will be you just need to create an headers like this right whatever the content and thing token and anything whatever the types you need to send so just like this content then bror token whatever you need to send and here instead of this value you can read local storage data and put over here local storage. getet item and if you have stored data into token variable so you can get like that what is saying okay right so just like this you can create the data and you can pass on to it okay so this is also token so you have created headers after that you need to modify the existing request whatever you have got so we create a new request by cloning it so request whatever the request we have got it is over here and with along the request we have created the new request but insert the headers also then this newly request we will pass it over here to handle from here next. handle actual our API call will be made right so this is token Interceptor one more Interceptor we are going to need that will be once the API response comes back right so NG generate error so that is nothing but error Interceptor or resp response Handler or something name can be anything but it is going to be it is going to handle once we get the data from the data back from the API enter now here you can see in the token Interceptor we have modified the request before sending it to the API now in error Interceptor we are going to modify the response whatever we have gone right so for that this is the call let me just format it HTTP response why do we saying do it is saying request or handle do what is do map also it is not suggesting let's see what else we have okay pipe also we can use but again things will get changed okay but just to understand you you you can just Google what thing you need to do over here currently I don't have it ready with me right so whatever the response you get that response you can modify like if we have error let's say 401 41 200 some error you need to show so that you can handle it over here rather than doing all that code in all the services and all the APA call subscribe you can do that in a single place like this so this is nothing but error Interceptor let me just comment otherwise it will throw the error that's it okay let it be right so this is error Interceptor so two Interceptor we have created token Interceptor to process the income outgoing request and error Interceptor to process the incoming data after Interceptor we have model inside model we can create either classes or interfaces right so classes or interfaces class we can create like let's say you have a user class class user. TS and inside that export class user and inside that user is your object let's say you have username as a field Po and data type [Music] string then password again data type [Music] string name [Music] string whatever things you have right so that properties you can create then this is a class so it can have a Constructor we just needs to initialize all these fields so this dot name is equal to Mt just like that you can do right username is equal to empty but let's say some things are optional over here so you can add question mark over here so this this password becomes now optional bu so you don't need to initialize it right so so this is also you can do so this is class just like that we can create interface so consider user as an uh user only so I user so whenever you create an interface now try to create the file name with I let's say it will denote interface okay so I use a TS now export instead of class now you need to write interface I user right so now here you can create the property just like the class so I will just copy paste this paste it over here right so it's your uh it's your requirement or your project structure whenever you work for any company someone will force you to create classes someone will force you to create interface so just like that you need to manage so model folder is done then we have services so in Services we can create again we can create folders or key we can create all the services in the parent service folder so first I'm creating Master right then let's say you you always you should create folders just to create a separate hierarchy right so let's say I have an employee module is going to be there so I will create employee all the services related to employee I will create it over here inside this folder so let's say let's create a service NG generate service let's say employee bash let's say we have so many API calls are going to be there for employ dashboard so we can create a service for that employ dashboard service I have created just like that let's say you have basic CR Al basic C AP also going to be there right right so for that also you can create just name it with employee right so just like that employee folder is there user folder so all uh whatever the major model you think you have in your application just like that you can create Services right but one master service you can create that uh in that you will just keep your API call for for AP call get postp delete so NG generate master M sorry NG generate service and it will be master so in the master service you will only store the you will only create four API call functions that will be get post put delete and from these Services you will call the function from here so let's say in Employee Service I will create a private HTTP colon HTTP class C right and here I will create gate right I will have parameter like uh URL string I'm going to return return the data of type observable so observable right and here I will simply return this do http.get whatever the URL I get that I need to pass it over here so just like get I will create post put delete APA call right but now this service I will integrate in the employee whatever the services I have I need to integrate over there master master now the benefit of this you are creating object of HTTP client only once in your whole application because you have created one service for that otherwise you will be creating HTTP client HTTP client in all the services so that will minimize your code right so that's how we do it normally so services are done after that UIL folder I have just told you like you can create a simple TS and you can keep all your code over there right so core folder is done then we have pages so let's say in the pages folder again if we divide our project into separate modeles so let's say employees is a module all the component related to employee we will put it over here then let's say we have after employe what we have let's say user we can create all our component related to user over here right just like that just to separate you can create folders over here right after that shared okay one more thing I needed to inform you so constant we have created right so now this constant we have to use it in the service so employee just an example I'm taking get get all employ let's say uh API call function we are going to create right so we are going to make the API call so this.m dog but we need to pass the API endpoint now to pass the API endpoint also one more thing constant is done but in constant what we have stored from from user and the actual method name but we need the API endpoint like from https so that we can store in the environment folder to we have to create the environment folder also right so you need to create the environment folder so that you can create over the we have a command to that new terminal NG generate let me just yeah NG generate environment this is the command to create the environment folder enter so from angular 15 we don't get the environment folder already created before that we used to get it but now if you have to create the environment folder you have to do like this okay so you can see environment folder is there let's say in environment folder I will create API in point so here API let's say https colon let's see the Json placeholder API so this is going to be my actual API after that we get so many things right so this is my actual API input right so now this environment folder I will Implement I will uh what we can say Import in the uh particular service so this Dot environments do API right so in environment we have API up till now actual but after that we need actual URL Also let's see if we have just on place order we have users you can see user is my actual URL so that we will get it from our constant user or G all user we just have this right so up till that we will get we have got the API endpoint then we have to get the actual URL that is get from here so API constant we will need the input for that in API constant we have object dot user dot get all user so whatever the value we have stored over here that we will get it over here so this is the URL we have formed plus means we are just concatenating mod right so this is how your API call should look like then you can call this AP call this particular method from any component right so again so Pages folder was done now in shared folder just three things will be there so reusable component that I'm calling as widgets then we will have directives like your custom directives what for validation tool tip whatever you can create then you have five folder right so these three folders will be there in directive you will create all your direct in pipes you will create all your custom pip and widgets you will be creating reusable components that are going to be used in all the pages right so this is how you should create your project structure again we can go in many deep if we have lazy loading then we will have to export some functions or not okay one more thing Interceptor we have created but in app module we need to add that over here also so the code for it is like this so in provider section we have to add that our broken Interceptor was there and this we have to get from the angular common HTTP so we had two interceptors so two Interceptor we need to add like that okay so this is how you should plan your project architecture right if you work on any Enterprise LEL but the basic things will be like this only whatever project you can see basic things will be like this some extra things will be there like for mocking and everything but basic things will be this only right so that's it with the current video again I will be coming up with some more ideas if you have some suggestions please follow me on the LinkedIn and you can suggest me that right that's it thank you

Channel: LEARNING PARTNER

Views: 3,976

Keywords: api call integration, crud angular, Angular 15 tutorials, angular tutorials, Data Binding in angular, angular 12 tutorial, login functionality in angular, angular tutorial, angular tutorial for beginners, angular 14, angular interview questions and answers, angular project, angular 14 crud localstorage, angular project setup, project setup angular, project architecture angular, angular project architecture, how to setup angular project, angular 15 tutorials, angular 17

Id: PsmODOaE_2o

Length: 30min 2sec (1802 seconds)

Published: Fri Oct 13 2023