Angular Tutorial - 23 - Routing and Navigation

alright guys in this video let's start learning about routing and navigation in angular now any angular application you build is going to have multiple components each component with its own mu so we need a way to navigate between the different views as and when the user performs some action and for this purpose we make use of angular's router I want to mention here that even though we did learn about services I am NOT going to use services while explaining the different concepts of crowding I want to focus on routing and routing alone so we will be using hard coded data for our examples and there is a lot to learn about angular sprouter so let's learn one concept at a time in this video we are going to learn how to navigate between two different views with button clicks so when the user navigates to the URL localhost colon 4200 we display a title that says routing and navigation and below the title we are going to have two buttons the first one says departments the second says employees if we navigate to the URL localhost colon 4200 slash departments or click on the departments button we display a list of departments if we navigate to the URL localhost colon 4200 slash employees or click on the employees button we display a list of employees so based on the URL or which button the user clicks we navigate to the appropriate view now to implement this requirement here are the steps first we generate a new project using angular CLI with the routing option second step we generate the department list component and employee list component these are the components we want to display in the view third step we configure the routes for our application this will allow us to navigate to the routes from the URL third step we add buttons and use directives to navigate to the configured roads so let's begin with step one generating a new application I'm going to go back to visual studio code and I am in the angular project folder open the integrated terminal and type the command in G new followed by the project name I'm going to call this project routing demo and since this is an application with routing we also include the routing option - - routing alright so the project was successfully created now we might not always generate a new application with the routing option we might want to add routing to our existing application as well so let me go over what the routing option does and you can replicate the exact same code in your existing application as well now the first thing you need to include is the base tag in your index dot HTML file so in the source folder open index dot HTML and as a child to the head tag add a base tag and set the value of hrf attribute to a forward slash this is required so that the application knows how to construct the URLs while navigating next in the app folder create a new file app - routing dot module dot PS this file contains the routing module for our application this is where we configure the different routes we will come back to this in a bit finally import a protic module in app module so in AB dot module dirtiest import a protic module and add it to the imports array so that it is part of the routing demo application alright so that is our first step generate a new angular application with the routing option the second step is to generate the department list and employee list components that we will be navigating to so in the terminal navigate inside the project folder see the routing demo run the command ng g4 generate C for component department - list - IT for inline template - is for inline style similarly ng g4 generate C for component employee - list - IT for inline template - is for inline style so that is our second step generating the two components the third step is to configure the routes for the application and we do that in the app routing module so we have a constant route which is strongly typed - routes from the router package here we define all possible routes for our application and each route is nothing but an object the object contains a path which is reflected in the URL and the component to be rendered when we navigate to that corresponding path now we need to configure two routes for our application the first one is Department and the second one is employees so in the first route enter the path as department and in the second route and that the path as employees if we navigate to Department we need to display the department list component to specify the component property similarly if we navigate to employees we need to display the employee list component make sure to import the two components as well but by doing so we are duplicating the import statements we have the same import statements in both a protic module and app module so what I like to do is create an array of all the routing components export it and then import it in the module so I'm going to create a new constant and exported export Const routing component and this is going to be equal to an array of the two components Department list component and employee list component and then in the app module we imported so import a protic module and routing components from a browsing dot module type script file I'm gonna remove the two import statements and in the declarations array I'm going to replace them with the routing components so now any time we add a new component for routing you just have to specify in the routing module so this is a good practice and I recommend you do the same all right the routes have been configured if you navigate to localhost 4200 slash department we display the department list component and localhost 4200 slash employees we display the employee list component but hang on how are we specifying where these components have to be displayed the answer is the router outlet directive so if we take a look at app component HTML at the very bottom you see this directive router outlet this directive is available from the router package and it marks where the router displays a view so you can say that the router view goes here now let me also simplify the app component HTML we don't need these unwanted HTML markup so I'm going to remove it remove the h2 tag as well remove the image and instead of welcome to title our title is going to be routing and navigation all right now our application is ready to be tested let's save this and run the application npm start open your browser and navigate to localhost colon 4200 and you should be able to see routing and navigation if I change the URL to slash depart you can see the department list component being displayed and if I change the URL to slash employees you can see that the employee list component being displayed so routing is working as expected based on the URL we navigate to the corresponding component is displayed but we cannot expect the user to navigate to the components by typing out the URL so let's add some buttons to navigate between these views let's go back to app component HTML I'm gonna add a nav tag and within the nav tag two anchor tags department employees to make routing possible with these anchor tags we use two special directives from the router package the first one is the router link directive which specifies the path to which we want to navigate to so when we click on the department's button we want to navigate to the departments tab similarly when we click on the employees button we navigate to the employees path the second directive is the router link active directive this directive lets you specify one or more CSS classes that will be applied when the corresponding router link is active or in simpler terms you click on the anchor tag and the class specified over here gets applied to the anchor tag for our example I'm going to use the active class if you take a look at Stiles dot CSS you can see that for the active class we just change the color and the code is available on my github repo so don't worry about the rest of the classes here and let me add the directive to the employees button as well now let's save this and take a look at the browser so localhost 42-hundred and we see the title routing and navigation and the two buttons Department and employees if I click on Department the URL changes and the Department list component is displayed you can also see that the button font color is changed because the active class is now applied to this anchor tag if I click on employees the URL changes to slash employees and the employee list component is displayed the active class is now applied to this anchor tag and hence you see the change in font color so we have implemented basic routing in our angular application let me quickly remind you of the steps in index dot HTML at the base tag and set href to a forward slash in the aprotic module configure the routes each route has a path and the corresponding component once you have the routes defined pass it as an argument to the for route method of the router module export the aprotic module and the routing components imported in the app module and included in the imports array and the declarations array with this setup you can navigate to the particular route by directly typing in the URL to navigate via buttons use the router link directive and specify the path to change the style of the active route use the router link active directive alright so that is how you navigate between different views using button clicks thank you guys for watching don't forget to subscribe I'll see you guys in the next video

Channel: Codevolution

Views: 662,836

Rating: 4.8713531 out of 5

Keywords: Angular, Angular Tutorial for Beginners, Routing and Navigation, Angular Tutorial, Angular 5, Angular 5 Tutorial, Angular 5 Routing, Angular 6, Angular 6 Tutorial

Id: Nehk4tBxD4o

Length: 12min 50sec (770 seconds)

Published: Mon Jan 15 2018