Angular Routing | What is Routing in Angular | Angular Routing Tutorial | Angular Routes

Hello everybody welcome back to the angular training series first let's have a look up till now what we have covered in our angular tutorials first was the first angular application building second we learn about component creating your components styling the components what is data binding and property binding we worked with directives we learned about forms two kind of forms that is template driven forms and reactive forms today what we are going to learn is about routing now what routing is the applications which we made up till now were single page applications that is an Spa now what we want to do is supposingly a user wants that when he clicks on about it should load another component known as about us or products it should load products so that is multiple Pages or multiple components to load from a link to achieve this angular has something known as routing now what routing is and what are the components of routing let's have a look at it routing as you say what are the components of a router what is a router a angular router is an a service that is angular router API that enables navigation from one component to another component what is a root root tells the angular router that which view has to be loaded when a user clicks on a specific link or he directly puts it into the URL Roots is an array of root multiple roots that is it will hold the roots that is about us products contact us and such kind of thing router Outlet the router Outlet is a directive which has to be put in the app component file which allows to load that particular roots in that particular location so this is working as a placeholder it will be a placeholder for loading the components which are clicked and loaded router link a link is a directive that binds the HTML to the rout so in HTML what we use to do is ahref so over here we have router link instead of AHF AHF does not work it is not like that that is Anor tag will work but I'll show you the difference what the anchor tag works like and what router link works like router link active it is a directive for adding class and removing classes activated route this will be used with parameters it is an object that represents currently activated route and router link parameters that is parameters which we pass this such as query strings that will be in router link parameters in this lecture or in this session we'll be covering up to router link the next part will be covering the router link active activated route and how to pass the parameters so let's start with creating an application and learning how to use routing inside your angular application so first and foremost let's open the command prom and we create our new application NG new I name it as routing it is asking you would you like to add angular routing if you say no wor here then the routing files won't be added automatically you have to add it manually for that we want to use it so I say yes and I press enter it is asking you the CSS and you press enter so this will create a new application that is a angular application which we will be creating from scratch for understanding the routing process so the application is created successfully it is in C so we start Visual Studio code again and we open our application routing so this is an blank application now first of all we start the terminal and try to run it so we run the command as NG so okay it's giving A Minor error CLR version is not compatible with angular versions okay so for this kind of error if this occurs it says that your CLI is only compatible with 16 version and your version is 15 so for this we need to update angular core so for updating your angular core NG update at theate angular SL core at the rate version they need is 16 so this will update the core inside your project so it says installing packages so it will be updated and now we can run that application let it install package is successfully installed remember this is updating the angular version inside this project itself not Global for Global you have to give the switch as minus- G so that will be Global but if you want to be an application specific then you can run this command inside the terminal from that application and it will be updated so the application is starting so let's try it I control and click so this is your first page which is already loaded now for routing as I said have a look what exactly it does when you enable routing you will get a file as app routing module file inside that you are having that array roots array the array which we talked over here that is roots Roots is an array of root objects so that will be used to create that part now this Roots array will be having a mapping to the actual links mapping to the actual components so for that first and foremost we create three new components so we open new terminal window keep the running window over here and for creating component we say NG G C component about NG GC products NG g g c and I create a component as home so these are all three components created now up till now what we learned is is inside your app component HTML which is filled right now I clear it out so it will be blank so your component is blank right now and to call any component we used to call that particular component one by one that is app about so this will call a component about this was for a single component now what we want to achieve is we want to have links over here and when the user clicks on about link it should open about when the user clicks on product it should open products and when home clicked it should be home so for achieving this what we have to do is we have to put links inside your app routing module so open that app routing module file inside that you have have an array over here now this is how your array mapping Works inside your app routing module in your app routing module what you have to do is you have to specify the array array of the components so for that it is giving you such as path redirect to home prg match food so this will be an array so over here what we'll be doing is we'll be giving curly braces in curly braces what we will be giving is path to about root first and foremost we give a path to about root so first the things which you want to write is path it is asking you question mark path you give colon sign there and what should be written after our Local Host over here what we want to do is we want to do it like this if I do about it should open about component so for that we have given over here that it should be about now it should load which component so for that you type the component array and component you get the name over here that is is your about component so it will be pop up over here so this is specified Now understand how it has been running and how it is been called The Roots array the name is constant roots and over here you will find as Imports router module for root and Roots now this has to be called somewhere so in your app module file you will be hang with app routing module so this calls this particular module and inside that module we have specified The Roots a array and in that array first we have written as about it should call about component now when your running is on that is your application is still running and you type about it should load about component I just press enter over here so as we type about over here it should work but it is not loading so as I said you should have something known as router Outlet it is a directive which makes the angular understand that where the particular about component should be loaded so we want to load it over here so that is the part of that app component right now app component is blank so over here we have to type the directory as router outlet and we save it save it you see about component is loaded so this is how your routing basic routing works now supposingly we try to give another root which is not written it loads nothing it it redirects again back to the root because there is no root defined for products so for defining the root for products again what we have to do is we have to Define an array over here one array is defined already the second array has to be defined and that array is the array for your products so give it path and we want to type as products so we Define it over here products again say comma and we give component and the component to be loaded is products component so if we try over here SL products this loads products we try AS Slash about it loads about so this is how your roots are defined now what we want to do is we want to give a GUI mode to the user where he clicks and the root should be loaded instead of just typing over there so for that in your app component we have to give the hyperlinks so first and foremost we do it with hyperlinks that is the basic thing a hre f and we write as absolute Roots over here what we try to do is we give absolute root about this should also work but this will be working differently and the other one that is a outline link will work differently this is a simple ahref tag that is hyperlink anchor element this is your home that is root of your application app component I click over here now you should observe over here what actually is happening just observe this thing so when you click the ahr if there is Anchor element link HTML link your single page application refreshes it reloads just check this refresh button over here I am on the root when I click it reloads right now what we want to do is we don't want reloading we don't want the component to be reloaded so for that we'll be using the base of your angular that is we'll be using router link so when we use router link it will work as a single page application loading that component without refreshing your application so for that you have to give as router link over here so instead of direct link that is absolute link which we have given over here slash about what we will be giving is a and then we use the directive as router link now inside that router Link in double quotes you have to again give it as an array itself so for that what we will be doing is slash about so there is an array defined inside it and now I write again about over here I give a br so now top one is normal anchor link and this is router link so observe that when you click on router link first and foremost let's come back to the base page I click on router link it loads but it does not refreshes the entire page or the entire application same thing when we do it from here it refreshes the application so it is advised that you use router link it doesn't mean that this does not work but remember when you will be clicking this links it will refresh or reload that particular application but this will load inside the application itself without refreshing so this is how your links are to be put inside your app component HTML now to make it look prettier what we'll be doing is we just off this code so we commented it now we'll be using now that is bootstrap so first and foremost let's go to the bootstrap CDN you need the CSS copied it and inside your index HTML we specify it on the top portion we also need the GS copy that link and it pasted so we can use bootstrap easily there are two ways to use bootstrap you can either use it by npm or you can directly write it inside your index HTML that also works so now we can use bootst strip classes so we Define now that is a now tag for this now the class will be now bar nabar Das light and we use uh should expanded now bar expanded or expand and we use as expand as large that will make the large nabar and we use as background BG Das primary so this will create a basic navigation bar inside navigation bar you can use a container so we give as a div do container typo mistake so this creates a container over here and I make it as container fluid this will create a fluid coner now over here we have to use nabar brand so that is the first class which is there it is giving a suggestion a class naar brand so when you press tab it will be already loaded there is naar brand and I can write the application name as navigation demo and already the router link is set to home this is not defined we'll Define that Home Path over here so this will when clicked over here it will be taking you the homepage of the application now we Define a button over here in button we give a classes na Bar D to now Bar D to type equals to button inside that we have to give it what has to be done so that is data- bs- toggle equals to ppse and the target data Das BS Dash Target equals to the nabar D hash link so I give us my nav so that is defined over here so this button is defined now inside that Buton Buton you can type something or whatever you can have an icon over here so for that you can just give a span tag inside it so I give is Span in Span we give us class as class equals to na bar Dash Toler D icon so this will give that three lines of Icon over here so that is done so we gave Nar brand we gave the button now inside that what we'll be doing is we will be creating a d which is having the name as hash myow so again it is defined as D ID collapse naar collapse justify content and so this is your na bar now inside that DV we have to give the nailar so we give it ul and inside UL we will be giving the class as naar now that is now bar- n a and here will be your link that is Li inside Li you'll be giving your ankle links so that ankle link is a h f equals to Now link is class equals to Now link or we use the same direct link so we can use it just copy it we already defined it and the class you can do as now dash link so you specified one link over here that is about like inside your bootstrap navigation bar so you can observe you get a link over here navigation demo home is not defined so for that we go inside app routing over here we can Define for home so for that home we have to Define another roote so for defining that root we give it at the top that is Home Route and for that root what we will be giving is path colon and that will be the root part so we don't specify any slash or something and then we give it component as home component so again the root for your home is also now defined so now home should work so this is home is working right so this is how your link is been set so over here you are having home demo that is your first link home as I click on about it should load about okay that works over here path home is not defined let me check okay over here you should not have home instead it would be slash so this is home and this is about so this is two links already set now the same way we have to set another links so we copy this entirely paste it over here you give link for products and for that you'll be having over here as products same way give a link for home also or we can't give home link because we have already set it on now demo so that it should work so these are all your three routes basic routing working when you click on products it loads products when you click on about it loads about when you click on home it loads your home so this is your basic routing in angular now what we want to do is we want to do the same thing but programmatically we can do this programmatically also supposingly I want something as I want a button inside inside your homepage that is your home component so I go on home component and I give a button over here button and inside your home component what we do is to use the router link or routing programmatically what we'll be doing is we'll be creating an object of router inside the component which you want to use routing dynamically that is programmatically so we Define a Constructor over here in that Constructor you have to create an object for that router so you define as Pro private and I Define as router you can give anything name and the object should be of type router You observe that you get an import router from angular / router so this is defined over here that router is defined and I did it inside the Constructor so now you can use this router which can be used to navigate using that button click event the button which have been already placed on your home page so over here what we'll be doing is we'll be creating an function so I Define a function as public and I give the name as about page now to load the about component on click of this particular function or calling this function we have to give us this dot router the method is navigate now inside that navigate we can Define the same array which have been defined inside your router links but this will be working programmatically it is one in the same but you are doing it programm so we defined as about and we terminate it now you can call this particular function from your home component so from your home component you have to Define it over here so I give a click event it is on click it should call that particular function so that function is about page so it presents over here when it is done I give a longer name over here that is called about programmatically we can give a class over here also that is class BTN and BTN primary now this is on the homepage itself so about products and I go on home now if I Define or click over here what should happen is it should call the about component so it is calling the about component so this is how you can do it programmatically also so this was all about the basic routing a quick look what we did and what has to be done first and foremost while creating the project when it asks you want routing you have to say yes so you will get a file name as app routing module TS over here it contains array of roots having the base class as roots this Roots belongs to angular router now this Roots will be defining what should be loaded on clicking which link or which particular URL so we have to give the path over here that is the path is what should be called after the Local Host that is after slash that has to be defined first so this is the thing which is defined that is about and then a component tag which says component and which component will be loaded so each and every component which has to be loaded over here has to be defined one by one as an array over here that is already defined which we have in then how it is being called it has a import over here router module do for root and inside that for root you are having your array which is defined over here and this particular app rout module is called inside your app module along with your basic browser modules and all your computer declaration you are having as app routing module which is already defined over here so this is calling that particular file but remember after defining this it won't be called directly inside your app component file first and foremost thing what you have to do is you have to go over here and you have to Define as router Outlet so this is the tag which tells that when the user clicks on over this link it should be displayed over here so this works actually as a placeholder over here router Outlet is a directive which is working as a placeholder that tells that when a user clicks on about about should be loaded here when the user clicks on products product should be loaded here then another thing which we learned was how to call it dynamically using your button click or some event inside your TS file so for using it inside your TS file first and format is you are having an object of your router class so for that you define it inside your Constructor so when this component is loaded Constructor is called and this will be initialized after that we created a function the function name has to be defined by you yourself whatever you want then to call that particular page or particular component we say this. router. method is navigate and inside navigate also we have to give the same as we have given in the router link directive that is slab and you have to call that particular inside your button click that function and it will be loading the component on your button click so this is all what we learned about routing inside this particular module and this particular lecture uh next lecture we'll be doing more about routing but we'll be doing as activated rout and the parameters the parameters which are being passed inside your supposingly you are having a curred operation and inside that operation you say slash ID or user and user ID you pass it over that or products you want a product details so when you click on it it is passing your product ID so that has to be done using your activated route and router link parameters that will be covering in our next tutorial or part two of your angular routing tutorial any questions regarding this tutorial you can always post it in the comment section and for getting notified for new tutorials you can like And subscribe our channel for getting tutorials on All Information Technology subjects thank you

Channel: itcodes

Views: 136

Keywords: AngularRotuing, RouterOutlet, RouterLink, angulartraining, angulartutorial, learnangular, What is angular routing, Angular Navigation, Angular Routing, angular Tutorial, Angular Routing Basics

Id: iA4AJBuoSlo

Length: 32min 14sec (1934 seconds)

Published: Sat Dec 23 2023