Hi guys, welcome back to another video by Simply Learn. In today's session, we're going to learn all about Angular Routing. I also suggest you go through our previous videos in the Angular series on our channel. And before beginning, I'd love it if you could subscribe to our channel and hit the bell icon to never miss an update. So without further delay, let's begin.
First, let's have a look at the basics of routing. Now, I'm sure that you've observed that the URL changes every time you click on a particular link or on an icon on the user interface. Correct? Now, this basically indicates that you are navigating throughout the application.
Now, to achieve this navigation, we use a mechanism called routing. Routing is essentially used to navigate through a website or a web application. But how is it achieved in Angular?
Especially in Angular, routing plays a major role. It is used to create single-page applications. Now these applications are loaded just once and new content is added dynamically.
Applications like Google, Facebook, Twitter, and Gmail are a few examples of single-page applications. The best part of using single-page applications is that it provides an excellent user experience and you don't even have to wait for new pages to load, which by extension makes single page applications extremely fast. But how is this new content loaded?
Enter routing. Now routing is the mechanism that as discussed earlier that is used to navigate through the application and load new content. Routing helps Angular configure the route and the component that needs to be displayed.
Now I'm sure you're going to understand the concept of routing better. when you work on it hands-on. So in the demo, we're going to be navigating to the login and the home pages of a web application with the help of routing.
So let's head to our Visual Studio code. So basically the objective of our application is to navigate to home and the login pages. So when I click on the login icon here, it loads the login page and here you can see the extension And similarly with home, once you click on it, some new information gets added and the URL changes with the slash home appended.
All right. So this is the main objective of our application. So to create it, let's head back to our VS code. All right.
So here I've created a folder called demo underscore angular, and I've created a file called demo routing. Now the first thing you want to do. is open the index.html file and make sure that the base tag is added.
Now although this is generally added when your app is created if it is not then add a base tag with href attribute which is set to a forward slash. Alright now this is generally done to tell angular to construct the url while navigating with a forward slash. Alright and the next thing you want to do is open your app.module.ts file and check if the app routing module has been imported. If not, go ahead and import it and then also mention it in your imports array.
With that, the initial setup is done. Now to create the navbar, the code that I'm going to be using is already explained in the previous video that is Angular Bootstrap. I highly suggest you go through that video before watching this.
So the code is already available. I'm just going to create a component and write the code for it and paste the code in it. So let's do that.
Let me say ng-gc navbar. Alright so this component is now created. I'll just get rid of this and paste the code for the navbar. So here we go. I've pasted the code for the navigation bar and back in my app.component.html file, I'll just remove all the unwanted code here and just specify the custom HTML tag for my navbar.
So, let me just create one here. Alright, let me save this. Let me just run the application and see if it's displaying correctly.
Alright, so when I open the browser, the navigation bar has been created along with these different options that's home, about services and login. Alright and we also have the Simply Learn icon here. Alright, now the next step is to generate the components to display the login page content and the home page content.
Now again, I have used Bootstrap to define the user interface for these files. You can easily find the code online, just search for Bootstrap login templates and depending on your requirements, you can choose the appropriate one. So first, let's create the components for my two files, that is for the home component and the login component. So let's go ahead and do that.
NGGC, I'm just going to call it login for my login component. All right. And then I'm going to say NGGC home for the home component.
All right. So I'm just going to copy the code for the login component. So back in my login.html file, I'll just paste the code here.
Okay. Also note that I've added the Simply Learn logo in my assets folder and then just provided the source for it here. in my login component.
Alright, so next up is the home component. And if you've seen the previous video that is angular bootstrap, you might have seen that we created three different components that is intro courses and footer, which included the content for the intro message for the courses and the footer message. Correct.
So here we're going to just paste the code for all of these three and then just displayed when the home button is clicked. Alright, so what I'm going to do is I'll just paste it here. So this basically has all the content. One thing I want to tell you is that in the previous video, we made sure that the code was written in three different components. However, for this, I've just added all the code in the same component.
Now I agree that this is not the best practice. So if you want, you can go ahead and create three different components. and separate the code into these three components and just add the custom HTML tags in your home component.
I'm just hoping you're following me right now. And also here in my assets folder, I've added a video and the YouTube logo that needs to be displayed when the home icon is clicked. Alright, so now that we've created the home and the login components, the next step is to configure the routes for the application. Alright. So here you can see that we have a file called app routing module.ts file.
So here we have the routes and the router module that is imported and we also have a constant called routes which is strongly typed to routes from the router package. Alright now this array is used to define all the possible routes in the application. Now each route is basically an object with a path.
So here in my routes array, I'm just going to go ahead and create the paths. That is, we have two different routes, right? One is for login and one is for home.
So I'm just going to create a path object. So let's say path. I'm sorry, within curly braces, I say path. And then the path that I'm going to give is login. This is basically what will appear.
on the URL. Alright, and the component that needs to be navigated to is nothing but the login component. So let me just say login component. As you can see the login component has been automatically imported. Now same with the home path.
So let me just say path home and the component that needs to be rendered is the home component. Alright, now the next step is to link these routes to a button in the navbar that is the home and the login button, right? So we're going to make use of the nav tag and an anchor tag for this.
You can see that we have a nav tag and an anchor tag which encloses the login and the home components. Alright, now we're going to make use of two directives from the router package called router link and router link active. Now these are specified within the anchor tag.
The router link basically holds the path to the page and the latter that is the router link active specifies one or more CSS classes that will be applied when the router link is active. Alright, so to do that let me just add router link, alright in our case it is home here and we're gonna have another directive called router link active and we're just gonna say active here alright same for the login icon here let me just copy this and instead of home, the path we created for this was login. Alright, so this is how you can bind the route to your specific button on your UI. Now, despite of all this, how are we specifying where these components are to be displayed?
Right, the answer to this is using the router outlet directive. Now again this directive is available in the router package. So we have to add that in our app component.html file.
So here just go ahead and type router outlet. Alright so with that we've created a simple navigation bar which has different options. that is home about services and link and once the user clicks on the home icon, it displays the content that is in the home component.html file and once the user clicks on the login component, it displays the content in the login.html file. Alright, it's as simple as that. So now let's go to the browser and see if it executes correctly.
So alright, we have the navigation bar. And once I click on the home icon here, all right, yes, we see that all the content has been loaded. You can see we have the intro section, we have the courses section and the footer section as discussed. And the most important part is that here in our URL, you can see that slash home has been appended. This shows that a route has been created that navigates to the home component.
So We've successfully created a route here and for login component when I click on this icon, you can see that the path changes here and the login component gets displayed. Alright, so this is how routing is achieved in Angular and with that we come to the end of this session. I hope you understood Angular routing.
If you have any doubts or queries regarding this topic, let us know in the comment section. And I'm sure it's a little confusing as to how the code is working, so please go through our previous video as well. So thank you so much for being here and watch out for more videos on the Angular series. Until then, keep learning and stay tuned to Simply Learn.