Angular routing and navigation

this is part three of angular crud tutorial in this video well discuss setting up routing for our sample application so here is what you want to do we want to display a navigation menu on top of the page as you can see right here when we click on the less navigation menu item we want to navigate to employee list component along the same lines when we click on create we want to display create employee component at the moment we don't have create employee component so first let's go ahead and generate that they're going to make use of angular CLI for that so here is the command ng which stands for angular CLI itself g4 generate C for component and let's call a component create employee component we don't want a speck file to be generated for this component so I'm going to set spec option to false and we want this component to be flat so I'm going to set the flat option to true when I mean flat we want this great employee component to be created in this employees folder without its own dedicated folder so when we look at our project notice we already have the employees folder within that we already have list employees component so we want our create employee component also to be created in this employees folder we don't want a dedicated folder of its own there we go our component is created and the route app module is also updated now if we take a look at the employees folder within our project notice along with list employees component we also have create employee component now as far as setting up routing is concerned the first step is to define a base path and we do that within our application host page which is usually this in X dot HTML file so if we take a look at this file notice we already have a base path defined so this base href element is set to a single four slash by default when we create this angular project using the angular CLI this base href element tells the angular router how to compose navigation URLs well the significance of the Space Age development in detail in our next video for now let's leave it with its default value a single four slash next we need to import the router module the router module contains all the angular routing features that we need such as the router service and routing directives like router link router link active router outlet etc we'll discuss the significance of these routing directives in just a bit but first let's go ahead and import router module and we do that within our application route module which is present in this file app dot module dot yes so in this file let's include the required import statement just like how we have imported browser module ng module we are also going to import router module and we need to make it part of the imports array right here just like how we have browser module next let's configure the application routes for that I'm going to import a type called routes from the same angular router package and right here let's create a constant I'm going to call this a Prout's and the type for this is going to be the routes type that we have just imported from the anla router package so this one equal to an array of routes so this array is going to contain route objects and here is our first route notice within the route object since we have specified at type for this constraint when i press control space here look at that i can see all the properties a route object can have we'll discuss most of these properties in our upcoming videos for now to define our out we are going to use just two properties the first one is the path property and I'm going to set the path to list so basically this means in the address bar if we see that path list then what is the component that we want to display in our case we want to display list employees component so when we see this part list in the URL we want the employee list component to be displayed so we specify that like this using the component property and similarly let's define another route so when we see this part create so when we click on the create navigation menu item the URL is going to change to create so when we see create in the URL we want to display create employee component so let's change the component here to create employee component and the path here is going to be create notice at the moment we have got four red squiggly lines here and if I hover the mouse over one of these squiggly lines we have a message saying missing whitespace and this is reported by this ts lint tool but discussed what is lending and thus TS lint tool can do for us in our angular CLI course so if you are new to linting please check out our angular CLI course now to fix these errors that we have all we need to do is introduce a space between the property and its crisp morning values let's do it at these four places at this point we have all of our lending errors fixed now let's create another route so let's make a copy of this route object paste it right here and I'm going to set the path to an empty string and instead of using the component property I'm going to use this redirect to property and set its value to four slash lists so when the path is an empty string meaning in the address bar we don't have any client side portion of the URL like less store create we navigated to the root URL so when the path is empty we want to redirect to the list route which is going to display the list of employees so that's what this empty path route does and for this empty path route to work we have to include another property that is the part match property and I'm going to set that to a value of full because we want to do a full part match the other possible value for this property is prefix but liscus the difference between these two values in our upcoming videos for now let's set this property to follow this completes configuring our routes next we need to let the angular router know about our configured routes and the way we do that is by using for route method of the router module so on this router module right here we call the for root method notice there are actually two methods for route and for chair let's use the for root method and to this method we pass our configured routes we know a configured routes are present in this constant so let's pass that to this for route method now we have another method that is the fourth change method well discuss the difference between these two methods in our upcoming videos next we need to create the navigation menu itself and tie these configured routes to our navigation menu and remember we want our navigation menu to be always displayed so the ideal location for our navigation menu is our root component AB component and our root component is present in this file AB dat component or TS that's our typescript file and the butan plate is in this file app component dot HTML so I'm going to replace this HTML with our navigation menu HTML to create the navigation menu we are going to use bootstrap navbar component if you're new to bootstrap please check out our bootstrap course so let's replace this HTML with nav element and we're going to use to bootstrap classes navbar and nav bar - default both of these classes are used for styling and inside this nav element let's create an unordered list and we are going to use two more classes on this unordered list the first one is the nav class and we are going to use another class never - nav so all these for bootstrap classes they used for styling our navigation menu in our navigation menu we want two menu items list and create so within the unordered list let's create a list item and inside this let's create an anchor element and the text is going to be list when we click on this list navigation menu item we want to go to list route and we tell that to the angular router using a directive called router link and this router link directive is provided by the router module that we have imported so we said this router linked directly to the route that we want to navigate to we want to navigate to list route along the same lines let's include another list item and this navigation menu item is going to display this text create and when we click on that link we want to go to the create route next we need to specify where we want the routed component butan plate to be displayed when we click on these navigation menu items we want that respective router component view template to be displayed just below the navigation menu so we have this navigation menu within our root component suggest below this navigation menu I'm going to include another directive and that is the router outlet directive again this router out--all directive is provided by the router module that we have imported so this is the location where we will have the routed component view template displayed for example when we navigate to the list route list employees component view template is displayed at this location where we have the router outlet directive and at this point if we navigate to the create route the create employee component is displayed in the location where we have the router outlet directive so they create employee component 3 places the list employees component this way the navigation menu is always displayed but depending on the route that is active that respective route butan plate is displayed at the location where we have this router outlet directive at the moment we are routing to this list employees component so we don't need its selector so let's go back to list employees component and then remove the selector that we have right here let's save all our changes and run our Anglo project by using this command ng serve - Oh notice the navigation menu is displayed as expected by the moment we are on the list route and we see list employees component view template at this point when we click on this create navigation menu item the route changes to create and we see the create employee component view template now if we navigate to the fruit URL without list or create we specified that with this empty path route we want to redirect to the list route so at this point when I hit and I look at what happens to the URL it automatically redirects us to the list route and we see the list employees component view template at the moment our application is using the entire width of the browser and we don't want that so I'm going to wrap all the HTML that we have within our route component inside another development with this bootstrap class container so let's move the closing div to the end save our changes and take another look at the browser notice now our application is not occupying the entire width of the browser in our next video well discuss the significance of the base href element that we have in our index dot HTML to display this navigation menu that we have right here by using the bootstrap navbar component and here is our route configuration at the moment the list route is active so this list employees component view template is displayed at this location where we have the router outlet directive thank you for listening and have a great day

Channel: kudvenkat

Views: 91,113

Keywords: angular 4 routes example, angular 4 routing application, angular 4 routing concept, angular 4 routing example, angular 4 routing navigation, angular 4 routing outlet, angular 4 routing step by step, angular 4 routing tutorial, angular 4 routing youtube, angular router outlet, router outlet in angular 4, angular 5 routing, angular 5 routing example, angular 4 routing and navigation, angular 4 routes tutorial

Id: pcOaAU_iaD4

Length: 12min 50sec (770 seconds)

Published: Thu Dec 14 2017