Angular Routing Tutorial for Beginners | Routing and Navigation | Angular Tutorial | Edureka

[Music] routing in general decides the path and sequence of operations to be performed on job from one machine to another the purpose of routing is to establish the optimum sequence of operation so that the manufacturer of the finish item is performed at the lowest cost and the fastest time hi guys today i bavita welcome you to the session on angular routing but before we get started let us look into the agenda for today we're going to begin the session by looking at and discussing about some of the developer tools and guidelines used in angular further we understand why we need routing in angular and then study about routing and navigation in angular discuss about some of the common routing tasks next we'll move on on single page application routing techniques and finally we have router references to touch upon and then get into the hands-on part with a demonstration so before we get started make sure you subscribe to edureka youtube channel also to stay updated about the most trending technologies hit the notification bell now if you are looking for an online training certification do check out the link given in the description box below angular is used by over 40 percent of front-end developers given its widespread popularity it is always a good idea to know a few of the best practices before we get started with our coding with that said let's take a brief look at a few angular cli when designing apps with angular it is one of the most powerful accessibility tools available angular cli makes it simple to build an application with adhering to best practices now basically it is a command line interface tool for initializing developing scaffolding maintaining testing and even debugging your angular applications next we have file structure conventions as you know maintainability and readability are greatly aided by naming conventions which basically will help you give consistent manner to locate stuff briefly now within the project consistency is critical since it aids significant efficiency hence it is highly advisable to maintain a good filing and folder system style vocabulary each guideline explains a good or harmful practices they're all presented in the same way so basically a strength of each recommendation is indicated by the phrasing of each guideline now there are vocabularies such as do consider avoid and you can even use y in case of questions for vocabularies so usage of these vocabularies actually make the coding style more efficient typescript as you already know for angular application development typescript is the primary language it's a subset of javascript with type safety and tooling support at design time javascript was basically replaced by typescript while the angular versions kept upgrading hence using it will increase your coding compatibility single responsibility it's crucial not to have several components services directives you know it will actually burden your coding style so do not have all of this in a single file every file should actually be in charge of only one function we keep our files tidy readable and maintained by doing so now component structures if you have a piece of ui that you need in multiple places throughout your application create a component out of it and use it actually this will save you a lot of time if ui needs to be altered for whatever reasons now you don't have to go around updating ui code everywhere in such instance instead you can actually change the code in that component itself so this way your component structure comes in handy we have lazy loading so whenever feasible lazy load modules in angular applications basically with this when something is loaded slowly it is only loaded when it is needed so by avoiding the useless modules the size of the application load initial time will be reduced and the application boot time will be improved documentation as you already know that documentation helps and comes in handy in many places make sure to document the code as much as possible it will assist a new developer in understanding the logic and readability of a project now documenting each variable and procedure is a good idea methods must be defined using multi-line comments that indicate what tasks the method actually does again this goes the same with all the parameters etc now again there are some more developer guidelines like naming conventions or directive selectors unit test file names application structure ng modules some of them will actually come across as in when we start coding now let's move ahead and take a look at why we need routing in angular so basically angular routing is nothing but a technique for directing users to appropriate webpage so they can complete their tasks in other words you can say a single angular application may contain several components now as you can see here there are multiple components which actually comprises of a angular application now understanding some more needs of using routing and navigation it's basically that if you enter a url in address bar for corresponding page it will navigate to the corresponding browser now again clicking links on page the browser navigates to new page and browser navigates backward and forward throughout the history of pages as you may wish with that said let's understand and learn more about routing and navigation so what is routing in angular basically routing is a process of partitioning and applications ui using urls and it's very essential functionality for every front-end framework it enables programmers to create modern single page applications with numerous views that may be loaded once by a browser now once a browser is loaded a single page application should be viewed in different and numerous ways and routing comes in handy with that so let me give you some instance of actions that user do while browsing through an application now it could be like you type a url into address bar the browser will take you to appropriate page or the browser navigates to new page when you click links on page it can also be like browser navigates backward and forward throughout history pages like i mentioned before now this is where angular routing enables navigation from one view to another and this can be done to perform user task adding on routing actually allows to display specific views of your application depending on your url path to add this functionality to your sample application you need to update the app as you can see here there are two views each view has specific urls which is associated with each of the views as in when the application is updated the views associated to the url is displayed now with all that said we shall take a look at the architecture or the life cycle of our routing and navigation as to how it takes place to start with there are five major operations for angular routing when angular router receives a url it does first task that is apply redirects or as you can see your url redirects the applied this means when the user clicks on a link or updates the location bar directly the router receives a url so the router's initial action with this url is to apply any redirections next we move on to the statuses of router so the first step in statuses is recognizing status of a router the router here will actually use url to generate a router state now to comprehend how does this step works we must first comprehend how router matches the url so that's where the third step comes into picture executing guards and data resolutions or process cards and resolvers we currently have a future router state now the router will then verify that switching to the new state is permissible so with this we will accomplish using running guards now we suffice it to say that guard is a router function that ensures that navigation to a specific url which is permitted is occurred coming to the fourth step that is activate view user router outlet which means it enables all required components here the router can now activate this mode by bringing up all of the required components and plugging them into proper router sockets now this will take us to the fifth step the final step which will navigate and update browsers location so the router has constructed a router state and it has also instantiated the components at this stage right after that what we must be able to do is we must be able to move from one router state to another now there are two ways to do this the first way is imperatively using router navigate function or we have another way that is declaratively using router link directive we'll get into it further when we get into the demo part with that i think we can proceed and go ahead and learn about common routing tasks now this command here actually uses angular cli the first step is to generate an application with routing enabled so angular cli is used to generate a basic angular application with application routing module called app routing module this is basically an ng module where you can figure your routes this is basically your ng module now the next step in generating an application is to add components for routing so let's see how we can do that to use the angular router an application needs to have at least two components so that you can actually navigate from one to another to create component using angular cli you need to enter these comments the first one being ng generate component first for your first component and second for your second component next we are importing new components in generating a new application for that these comments come in handy so to use new components we need to import them from app routing module which is of course at the top of your file with that said actually there are many more steps involved in common routing tasks like defining a basic route for starters there are three fundamental building blocks to create a route so an angular cli actually performs step by step for you however if you are creating an application manually or working with existing non-cli application make sure you verify the imports and configure if all of them are correct now getting root information so often what happens is user navigates your application now when you want to pass information from one component to another this basically happens so for example consider an application that displays a shopping list for your grocery items so each item in the list has a unique id right to edit an item user clicks on edit button now this will open something called as edit grocery component so you can actually if you want retrieve this id from this component for your grocery item so that it can display the right information to the user now we will take a look at it in our demonstration going ahead we have a setting up wildcard routes now a well functioning application should gracefully handle when users attempt to navigate to part of your application like this does not happen normally so to add to this functionality your application should be set up in a wild wildcard route this means the angular router selects this route anytime the requested url doesn't match any route paths next we have displaying a 404 pages so to display a 404 you need to set up a wildcard with component property and to set this you can actually use 404 pages displaying methods like the traditional methods itself and then we have using relative paths so basically relative parts what it will do is it will allow you to define paths that are you know relative to current url segment so the first component and second component are at same level here in the tree as we saw we created two components right with that they will be in the same level however the second component is situated within the first component because obviously you create the first component first and the second component definitely has to be located inside meaning the router has to go up a level and then into a second directory to find the second component so this is where your relative paths will come into picture now you also have something called as choosing a routing category like you should make sure that you choose a routing strategy early in your development of your project because once the application is in production visitors to your site use and depend only on application url references i think next we can go ahead and see how single page application routing techniques works so in order to understand single page app routing techniques we need to create an application and following we'll be seeing the techniques for creating this application and the steps to create them and the first one is creating a sample application so to create a sample application we need to create an angular project called angular routing sample or anything as you may wish but here let's say we create an application called angular router sample the next command we need to be using is generating a component where we need to create a component now for that i have used a component name as crisis list next component name i have used as heroes list and then we use ngsurf in order to see our compilation and output now again the steps here is theoretically explained i will get into the practical part and the demonstration in our demonstration section now next we have defining the roots here basically what we do is from our code editor we open app module ts typescript file and then we locate at ng module section and we type the following comments here next on updating the components we search app.component.html and then we give our router outlet tag now this is a directive just so i mentioned here next moving on we have control navigation with ui elements here again in app.component.html we create a tag in app.component.html and we add these following html components both are the button tags as you can see and next we have app.component.css file here we go to the css file and add these code lines so we'll get into the demonstration part and here we can get a thorough look at what we are doing next in order to identify the active routes from our code editor again we need to open app.component.html and then give the following tags we also need to update our anchor tag in order to include router link active directive now here a router link active directive is a particular directive just to mention again next we'll see how we can actually add 404 page so in order to add 404 page as we discussed that we should be doing this we can actually give this command known as ng generate component to generate our page not found when we do that we'll find one such page now finally we have reached our final section of today's session that is a router reference so here the first thing that we have is a router imports so in order to make sure that we import our router services in our angular application we need to make sure that we give this particular command so basically the angular router is an optional service and that again presents a particular component view for our given url now it is not part of angular core that's why it's in its own library package that's why you're supposed to be using at angular slash router now next in order to configure there is a bunch of code structure that you have to follow so basically a rooted angular application has one singleton instance of router service now when the browser url changes the router looks for corresponding route from which it can actually determine the component to display next speaking of router outlet like i've mentioned before it is a directive from a router library that is used like a component now it acts as a placeholder that marks the spot in the template where the router should display the components for that particular outlet now speaking of router events there are actually several events for us to know during each navigation the router emits the navigation evens through router event property these events range from when navigation starts to navigation ending now there are many more points in between some of them again like i said start of the navigation and cancel or end of the navigation there is navigational error root config load start or load end again there are a couple of more events that you can look up for with that said let's dive into the demonstration part now for the demonstration i'm going to consider visual studio code here so firstly what i'm going to have to do to start with our routing project is we need to generate a routing project for that i'm gonna take terminal and in a new terminal i'm gonna say this command where it goes like ng new and any project name that you're creating now say i will create a project name called angular routing you can select any name that you want with this i'm gonna have to give a command dash dash routing indicating that this is a routing project now i say enter now this might take a while to create a project as there are too many packages to be installed now when this project is created we have to dive into the next part but before that as you can see it is asking for the styling sheet that you want to choose you can choose anything that you want i'll say css and when i say enter it's going to start with installing all the packages and creating our project now once the project has been created as you can see it says the project is being created now let's open the folder we have angular routing demo the folder is right here and once you do this let's go into the source code app as you can see there is a folder created called app routing module type script file and then you have html component file all sorts of file which we'll get into later the first step here what you're supposed to do is you're supposed to go into index.html and once you go here as you can see you have title being created called angular routing demo let's make it a little visible now once you have done that the base tag should be mentioned with href now let's get into the app routing module typescript file now let me save this before i do that here as you can see it contains the routing module for our application and this is where we have to configure our routes for our application here we're supposed to make sure that we have imported our angular core and our routing module now with that we can step into the next step that is we supposed to look into the module typescript file here we have to make sure that a routing module has been imported with our routing module file and then as you can see there is an ng module and also declaration should be made for our app routing module as we have imported our routing module the declaration should also be made now with that we have generated a routing project the next step is generating component in our routing project now to generate a new component we're supposed to consider a following comment but before that let's get into our directory that we have just now created now you might take a long time to type such huge project name so you can create a easier one so we have gotten into our directory now let's go ahead and create our component the command is ng g is for generate you can actually write generate as i've mentioned in the ppt earlier and here i'm going to consider c that is for component again you can use component instead of c and then i'm just going to give an example list or component you can again consider anything you want and the command goes like dash i t that is for inline text and dash i s that is for inline style i say enter a component is been created also similarly you're supposed to create one more component i say teacher list so an example again inline style and say enter our components have been created also make sure you import your components here now that we've created the components let's go ahead and configure our routes for our application so to configure our routes we're supposed to get into this file routing.module it's a typescript file so here all the routes used in this application are actually called here and in each route it is actually considered as an object so basically each route is considered as object and so i'm gonna go ahead and create an object style since this is an object let's go ahead and create this also you have to remember there is a path present in the url for this particular object because we need our routers to redirect through this path or via this path so what i'm going to do here is i'm going to say path colon and students since i have said student list and there is also component for this and the component is because you need to render this particular component that you have just created over here so i'm going to say component colon our student list here you go it's a student list component now this is for students creating for teachers the same thing path i say teachers component and again here teacher list component once this is done save it and now also with this you have to go ahead and mention the same even as your import doing this we will actually create redundancy as it is present in both app module and also in our routing module so now here since we have created in both routing module file and app module file i don't want it to be here in app module so i'm going to create an export class over here i just say export const because i'm calling this particular constant routing components and i create an array over here so here if i create an array both these things will be called inside so i say student list component and we have our teacher list component i say save now let's go ahead and import it that should be done in our app module typescript file so what i'm going to do here is i'm just gonna import my routing components which i have just declared i save this and i have to remove this since i have declared it already there and here just going to say routing components save doing this it is a really good practice as redundancy will be avoided and you don't have to going on creating components here as well as here so you just can go ahead and create an array of components here and just mention our routing components which will be a good practice now to display the view and routing we need to open this file it is an app.html file which has some a redundant code let's not consider about that let's go ahead and this tag router outlet tag helps us display our output now we have to make sure that this is always there so let's just remove this unwanted code we just don't want all these now now this will be created as soon as you create a new application so i'll just say this and let's create a normal html tag to display our routing output i'll say style and i say one heading tag maybe this is called routing tutorial just maintain the code i say save and once i save just come to your command prompt and say npm start and once you do that you can go ahead and look into your local host 4200 you'll see our output so let's see if this is configured so since this is still compiling let's wait and see if the local host will work now since the configuration and the compilation is all done as you can see our routing tutorial has been displayed now in order to jump into our students and teachers list that we just created i'm just going to have to say students i say enter it says student list work and instead of that i say teachers says teacher works but obviously the user cannot type the url hence let's go ahead and add the buttons over here into our html file so here what i'm going to do is i'm going to create an anchor tag so let's say navigation because i need our user to be navigated and inside navigation i create an anchor tag now here what i'm going to do is i need to relink our student url into a button so for that i'm just going to say router link which will say that our students must be linked into a button so i'm just going to go ahead and add a button over here i say button now this will keep it enabled we want our student to be displayed here and similarly i say router link for our teachers i close the tag and once i have finished this adding anchor and button tags i'll just save let's go ahead and see this as you can see clicking on this buttons this works now this is what we do in our routing tutorial we can also do this in our existing application we can implement it we can modify it but this is the basic works of all the routing tutorial here i hope this was useful now with that this will bring us to the end of today's session now i hope that was useful and you learned something about routing and navigation today this will bring us to the end of today's session i hope this video was useful and until we meet again happy learning i hope you have enjoyed listening to this video please be kind enough to like it and you can comment any of your doubts and queries and we will reply them at the earliest do look out for more videos in our playlist and subscribe to edureka channel to learn more happy learning you

Channel: edureka!

Views: 2,608

Keywords: yt:cc=on, angular routing, angular router, routing and navigation, angular 5 routing, angular routing tutorial, angular advanced routing, angular routerlink, angular 4 routing, angular 12 routing, angular navigation, routing in angular, routing and navigation in angular, router techniques, what is angular routing, angular, angular tutorial, edureka angular routing, angular tutorial edureka, edureka

Id: Idg55ZJtcjU

Length: 33min 28sec (2008 seconds)

Published: Tue Jul 13 2021