Angular CRUD with Web API Tutorial Part #7 - Angular Layout Template Tutorial

hi friends welcome to arc tutorials we are continuing with our angular crud tutorial series and today we will be covering creating the ui for our components that we have generated this is the part 7 of the series and where we are trying to build a feature module called products for our ecommerce application so far we have developed the groundwork and we have done the base work of generating the application setting up mock apis also installing the bootstrap framework today we will learn to create freestyle coding and creating the ui welcome back friends my name is sridhar i bring over 10 years of experience as a full stack developer and i'm here to share my knowledge on modern web technology stack like angular node express mongodb and much much more i'm also here to learn from you i know a lot of you are building along and coding along your own feature modules so during the course of this tutorial series if you have any doubts just drop in drop me your queries in the comments section i will try and help you as much as i can i can assure you that at the end of this series you will be able to build an entire feature module and angular crud functionality in your application if you follow this series i have created a full tutorial playlist the link is in the description box below make sure you check it out make sure you check out all the steps so that you learn how to do it end to end right from scratch and to the end right so again just to recap we are trying to build a feature module for our ecommerce shopping cart application this is the part 7 of that series in the previous episodes we have learnt about the project we have done the groundwork of setting up the mock data we have installed the angular application from scratch we learned how to install bootstrap framework in our application we learned how to create feature module we have learned how to create a simple module without lazy loading we created few components in the previous episode today i'm going to show you a freestyle coding where it will be a simple ui that we will generate from existing templates just to give you recap you can refer to these notes also which are available in the previous episodes i will share these with you and today let's focus on getting the ui part right so we will try and build a beautiful layout and this is a freestyle coding session which means i will code a lot and i will encourage you to start coding with me you can choose any layout you can design any style of your ecommerce application that you want i'm showing you just an example but feel free to add your creativity that being said let's get started with practical i have my application here and i have my output which is here so this is a simple there is nothing i deleted everything from app component uh just a simple header right so today we will refactor it also i am taking a free templates which is available at startbootstrap.com so these are freely available you can see these are freely available templates so that way we save time and we don't have to sit and scratch from scratch we do it we can just take what is existing already all right so we are going to take this layout and put it in our application okay let's see how to do that but first we need to do some more work okay so today what you are seeing is how an actual application is built in real time so first let's navigate into our folder and then what i'm going to do is generate a new module and i'm going to call it site framework right so i'm creating this site framework to have the layout of my application so this is a site framework module let's go inside it and we can now start generate a component i'll call it header so this will be the header section component and then similarly i will generate one and i'm going to call it sidebar i'm going to generate one more and i'm going to call it footer right so you see here you have the header sidebar footer components generated inside the site framework module okay so what i'm going to do let's start one by one go into header dot html and i'm going to go to this code say view source and i'm going to just copy as it is the navigation first into the header okay so this way i'm getting my navigation done here all right so navigation is done in the header next i'm going to copy the footer so you see how simple it is to create the layouts and the templates right all you need to know is what to do if you know what to do you can do anything with the application so i've copied the header i've copied the footer now i'm going to sidebar and but and in the sidebar i'm going to just add the content here all right go to sidebar.component.html and have the code copied from just the sidebar code okay so now what i also need is a container page which it will be a row and class so what i'm going to do i'm going to use the utility classes and design my row and header here so what i'm going to do first a div called container and then row then this i'll delete so this is just this two column layout so you see here i am closing the div for nine columns and here i'm closing for div for the row and here i'm closing for container okay so just so you know it's always good to make comments and you ends here and then this is for the row okay and this is for the main container okay so we see this is nothing but empty uh divs and rows right so now i'll go to site framework dot module and you see all our components are imported here right that we created header sidebar footer i'm going to take as it is the array and export all of them because i want to use them in my app component so i have exported all these components now if you don't export it won't work now i'll go to my app module and import the site framework itself okay and site framework module and import the site framework module okay so far so good so we have created the components i added the templates to each of these components i have exported the components and i have included it in my app module the module so now these are available for us to use it so let's start using it first i'm going to add app header because that's the name of our component if you go to selector you'll see app header right so header i have added in the app component in the sidebar here i'm going to add app sidebar component right and at the end i'm going to add app footer right so this is how i'm using the components to create my site layout now let's go here and see and refresh you see we got the header we got the sidebar we got the footer right i'm going to take some more styles from this here and just adding them so that there is some kind of padding from the top so that way it's much clearer okay so the other way of doing that is uh you can add this to your styles okay so what i'm going to do is i'm going to cut it here and instead add it in the style.css these are since they are global styles okay so now you see it moved down and we have this and i'm going to say wherever there is footer i want the padding from top should be 30 pixel okay and that's how it is now let's try this out with our layout so how do we do that let's create a route okay and for now i'm going to throw a dummy route and i'm going to say orders component list order components which we created in the previous episode so make sure you check it out alright so here i'm going to slay slash orders okay and list orders is here okay list orders is imported okay and this is slash orders okay so now that we have done it i'm going to restart it so that our data is correctly reflecting all right and remember friends the output will not show if you don't add router outlet okay so i'm saying the output of each of this component should load inside this div 9 right so now you should see order works inside this particular layout so you see list order works right so this is how the site framework looks like now okay but we can make it much better let's tweak it little bit so i'm coding along friends so make sure that you follow along if you have any doubts drop me notes i'll be happy to take a look and help you alrighty so here we have got our site framework basic frameworks so we have created few products like create delete update read so i will show you one for view product how to add all right so let's go to view product and again we'll take a template which is already existing let's not waste too much time in creating that layout which is already available so this is a simple product layout that we want to use so let's use that i'm going to copy it here and again like i said just copy entire thing till the card okay and go to our view product paste it there and now so i'm going to create a new route for this view product inside since this is a lazy loading module it will have its own route and here i'm going to add a path and here i'm saying view iphone product and i'm going to say component view view product right view product component okay so now i'm going to go to view product uh view okay so it will since it's a lazy loading module so we'll have product slash view hyphen product right so you see now we have got our layout its product slash view product and we have our product details here we have the sidebar and we have our header navigation and footer right so similarly we can use some more for listing that i will cover along with part of the routing that we will add for each of it in the lazy loading in the next episode but you you kind of get an idea that how easy it is to create the layout using the ui right so you can have the sidebar you can have any kind of template we want now let's say i'll show you one last before i leave you which is to list all the products right so i'll say list products right here i'll say view all products okay that's the component i want to use and for this i am going to use view all products in the html i'm going to take again i'm going to take this layout so which is this layout here so let's copy that under this okay and just copy it inside the view products and let's go and say now list products so this is how we will list the products in our code right i don't want to use the carousel so let's get rid of that for now again this is up to you how you want to use your creativity there is no restrictions feel free to add any kind of layout that you want to use in your application okay this looks a little odd we need some more padding so i'm going to what i'm going to do is uh this entire container i'm going to style a bit and i'm going to say padding top four okay oh sorry we can say margin top and i'm going to refresh so that it reflects okay uh and then we have let's try padding uh for some reason this is not getting oh it's aligned yeah okay so here we are we have it now so it's now beautifully displayed so similarly let's try one more view product so here we are beautifully displace the page with footer header and then we have the list products where we will list down the products similarly since this is a kind of a template which will be reused in most of our screens like for example view all products this layout will be used in view all products by category i'm going to copy paste the same i'm going to use the same for view all products by date right and since we are going to talk about create update and delete right so delete will basically will be a model window dialog uh create and update will be a forms right so let's pick up some form here from the templates which are available freely so you can use anything that you want again you are you can use any kind of thing here if you have an existing template you can use that if you want tables charts right or you can use some kind of a table to display if you want to use a data table right you can even use this layout so there are different combinations that we can do around with it um so what i'll do for now one more activity for you today is in the create product uh let's throw in a form okay so let's check for any form and just add a simple form to it maybe some block home with a blog post which has a or you can take any any form from any website template that you have so i can quickly take this one or you can go to get bootstrap.com go to documentation forms right so take up any form if you scroll down you will see some examples of an order here website that they are building let's say this form right so we'll modify some of the details and make it look like a real form or they have one for order checkout form i think check out let's see it's towards the end i'll get it so you see the idea i'm not wasting too much time in putting things but you should also be able to quickly put forms together right you don't want too much of it so i'm going to just grab this form for now right where we can add a form of a product right so go here go to create component just paste that right and one last i will add it here is the routing all right so here i'm going to say create product and i'm going to add the component i'm going to say create product component all right so now you go here create product and you see the form right this is how it looks and we can modify it and we can add some more customized and make it a beautiful form so you can grab that from anything so you get the idea that you have a common site framework now which works for most of your application the layout you have the header you have the sidebar you have the form and you have the footer similarly when you go to list products you see list of products that are displayed here and similarly when you go to home page you see product works again you can configure that as well and say list of all the products that you want to show here in the component right so go ahead create the site framework for the application in the next part i will show you some specifics of routing configurations with respect to ids and all that and then we start the actual groundwork of creating service and the current functionality remember this is just still work in progress which means that you still have a lot of work to do in terms of uh creating the the pages and listing down things connecting the data so there is still work will cover it over period of next three tutorials but get used to it get your hands on create some layouts you'll get used to it all right so that was for today and in the next episode i'll show you how to do routing okay not ui for components but uh routing that's what we are going to cover in the next episode so make sure you check it out and that's the go through the previous tutorials just to make sure that you are following up correctly in the next episode we'll create routes and then we start service then model then implementing crud calling and testing the functionality all right see you in the next episode thank you so much for joining

Channel: ARC Tutorials

Views: 10,197

Keywords: angular crud with web api, angular crud tutorial, angular crud operations, angular crud project, angular crud example, angular crud with json server, angular crud application tutorial, angular crud table, angular crud mysql, crud angular 9, crud angular 8, angular bootstrap crud example, angular bootstrap crud, angular layout template, angular layout tutorial, angular layout design, angular layout header footer, angular layout example, angular layout component, angular 9

Id: c0jGVNnW734

Length: 18min 48sec (1128 seconds)

Published: Sat Aug 01 2020