Angular 10 Tutorial #11 - App Architecture | 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 how to design your angular application or you can also think of this as your application app blueprint right and what i'm going to share with you is the knowledge i have accumulated over a period of years working as a architect in various large complex enterprises on angular i am sure this will help you to design your applications better and architect them in a way which are scalable and performance wise absolutely amazing let's get started this is part 11 of the complete playlist make sure you check out i have planned around 100 tutorials for you which includes live project and code explanations the code and the notes will be updated in the github link so make sure you check out the description box below so that you have access to all the notes and code all right so so far we have seen the 10 episodes on your screen right now that you're seeing these are all the topics we have covered in detail and i'm sure you have gone through them if not make sure that you have gone through them because i have covered each and every topic in detail for you to understand and master it today we are focusing on angular app architecture this is episode number 11. all right so today we are going to talk about an angular application blueprint so all uh or i would say majority of the enterprise applications are built on a modular based architecture right angular itself encourages modular based architecture so what do we mean by modular based architecture which means that we just don't randomly create components right we'll cover what is component what is module in the coming sections but for now today understand that angular is made up of components right everything that you see is a component over a period of time as your complexity increases of the application so will be your components right and it would become really difficult to manage maintain or extend that kind of code base right it's not worthy of it because you'll spend lot of time debugging fixing and it's just not worth it maintaining so many components randomly also you you will certainly like to build more than one app right in any complex enterprise setup you would have more than one applications which will want to share common shared components right so you also need a repo or a facility through which you can share the components right and like i said your app your repo will not have only one app right rarely you will see any enterprise application running on a simple thing which has only one app so you have provision where you can have multiple apps inside the same repo which is what we call it as mono repo right so now let me give you a detailed blueprint of how your application should look like okay so let's get started i am going to draw a rough copy here so you see this is for your reference this is how the angular default application folder structure looks like we have explored this in the previous episode so make sure you have seen that to understand each and everything in detail right so now when you open uh usually what happens is you have a source app right inside source folder you would have the modules right now these are modules now you don't have to necessarily name the modules now for example let us say in our case we are building a crm application right so if you are building a crm application in the source i will have something like this contacts then users then orders then leads reports settings profile so these are all modules right these are all modules now what is a module module is nothing but a base where you group your components together right for now that is what should be your understanding i am covering modules components in the next episode in detail so don't worry about that so here you will say add contact which is a component edit contact and then delete contact view contact right so see these are all components which are grouped together inside a module right so this will be your module right these will be your components inside module right so so what we do is we always try and create modular based application so that means whenever you get a new functionality or a feature you can create it as a module right now the advantage of this is that it's easy right now you can easily maintain it here now you can say add user etc so on and so forth right so see anything to do with contacts is under this module now tomorrow in your settings if you do not want to display any particular uh or say let's say you have one more shared folder right shade now here you will have something called auth right which are all shared modules or shared components right so that way all of these components and modules when they want some code which has to be reused right that will be placed under shared right so these will be your main modules inside that you will have your components and then you will have some shared repo and then you will have something called services now this folder will have all the services like you'll have contact service dot ts then you will have user service right so these are all services which what is service again will come back to it but for now understand services are nothing but these are the http related code or you can say reusable code or features or functionality all right that being said now once you have this modular structure you have your shared components you have your services then you will have also have something called so once you have this then you can also have something called apis or mock data or assets where you will have images mock data etc right now this is how your application architecture should look like right this is an ideal case where your applications is modularly organized and your components are inside modules and you have everything shared whichever is common you have your services in one place right so let's try and refactor our app accordingly right so we will we will do all of this in the next episode where we learn modules uh but for now this is a high level understanding of blueprint of an angular application that you should have right the there can be more extension to it right it based on the complexity like if you want if to have some common directives or pipes you'll create a pipes folder right like for example let's say highlight pipe right so you will have pipes in one place directives in one place so this way your code becomes easily manageable right anybody who joins your team or wants to extend the project or application can easily do it without any any headache now also remember in a large team you will not work only on one particular thing right let us say orders now this is a complex module there can be multiple people working on it so when you work in this setup and this architecture of folder structure your application becomes easily maintainable and customizable right so there will be less defects basically it would be very very easy for you to manage your application and code all right so that was all i want to cover today in the that's about a blueprint that we will do so we will use this blueprint to build our crm system going forward right so that's why i thought i'll cover this topic because starting next episode i will start modules which is a very very integral part to what we are discussed today make sure that you follow along and we will be doing modules in the next episode and start building our application also parallelly thank you so much for joining uh i'll see you in the next episode uh again uh please do like share comment and subscribe to my channel uh if you like my work and tutorials please consider buying me a coffee at buy me a coffee.com arc tutorials thank you so much for joining see you in the next episode

Channel: ARC Tutorials

Views: 8,892

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 experienced, angular 10 full tutorial series, angular 10 crud tutorials, angular 10 tutorial for beginners, angular complete tutorial series, angular 10 beginners tutorials, angular 10 tutorials, angular full tutorial series, angular 2021 full course

Id: m8_gZgvzPhE

Length: 8min 58sec (538 seconds)

Published: Sat Oct 31 2020