title
Routing and Navigation in Angular | Mosh
description
🔥Get the COMPLETE COURSE (60% OFF - LIMITED TIME): https://programmingwithmosh.com/courses/angular
Learn how to build a SPA (Single Page Application) with Angular.
This video is part of my COMPLETE Angular course with 30 hours of high-quality content, where you'll learn everything about Angular from the basic to the advanced topics.
TABLE OF CONTENT
00:00 Introduction
00:30 Routing in a Nutshell
01:35 Configuring Routes
08:23 RouterOutlet
10:52 RouterLink
16:34 RouterLinkActive
18:27 Accessing Route Parameters
RELATED VIDEOS
Angular 4 Tutorial for Beginners
https://youtu.be/k5E2AVpwsko
Angular Version History
https://youtu.be/9AaRJ8COXdM
Angular Material
https://youtu.be/wPT3K3w6JtU
Angular Animations
https://youtu.be/ra5qNKNc95U
MY OTHER COURSES
I have several other courses on web and mobile application development. You can find them all here:
http://programmingwithmosh.com/courses
STAY IN TOUCH
https://www.facebook.com/programmingwithmosh/
https://twitter.com/moshhamedani
detail
{'title': 'Routing and Navigation in Angular | Mosh', 'heatmap': [{'end': 1221.837, 'start': 1206.124, 'weight': 1}], 'summary': 'Covers implementing routing and navigation in angular, configuring routes, single page applications, working with route and query parameters, programmatic navigation, and adding navigation to angular apps. it also explains the usage of angular router module, defining routes, and optimizing single page applications for improved performance.', 'chapters': [{'end': 230.927, 'segs': [{'end': 37.513, 'src': 'embed', 'start': 2.113, 'weight': 0, 'content': [{'end': 5.635, 'text': "In this section, we're going to look at implementing routing and navigation.", 'start': 2.113, 'duration': 3.522}, {'end': 7.957, 'text': 'So, by the end of this section,', 'start': 6.256, 'duration': 1.701}, {'end': 15.241, 'text': "you will have an in-depth understanding of how routing works in Angular and you'll be able to add navigation to your Angular apps.", 'start': 7.957, 'duration': 7.284}, {'end': 22.706, 'text': "More specifically, you're going to learn about configuring routes, implementing single page applications,", 'start': 15.962, 'duration': 6.744}, {'end': 26.769, 'text': 'working with route and query parameters and programmatic navigation.', 'start': 22.706, 'duration': 4.063}, {'end': 28.41, 'text': "Now, let's get started.", 'start': 27.409, 'duration': 1.001}, {'end': 37.513, 'text': 'So far, you have seen a few of the built-in modules in Angular.', 'start': 34.051, 'duration': 3.462}], 'summary': 'Learn angular routing for spas, configure routes, query parameters, and programmatic navigation.', 'duration': 35.4, 'max_score': 2.113, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/tUCa3JcFILI/pics/tUCa3JcFILI2113.jpg'}, {'end': 72.183, 'src': 'embed', 'start': 48.401, 'weight': 2, 'content': [{'end': 55.326, 'text': 'So in this module, we have a bunch of directives and services that we use for implementing navigation in our applications.', 'start': 48.401, 'duration': 6.925}, {'end': 58.148, 'text': "You're gonna learn about this module throughout this section.", 'start': 55.986, 'duration': 2.162}, {'end': 61.931, 'text': 'Now, there are three steps to implement navigation.', 'start': 58.848, 'duration': 3.083}, {'end': 65.695, 'text': 'First, we need to configure the route in our application.', 'start': 62.751, 'duration': 2.944}, {'end': 72.183, 'text': 'Each route determines what component should be visible when the user navigates to a certain URL.', 'start': 66.656, 'duration': 5.527}], 'summary': 'Module covers directives and services for implementing navigation with three steps: configure route, determine visible component per url.', 'duration': 23.782, 'max_score': 48.401, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/tUCa3JcFILI/pics/tUCa3JcFILI48401.jpg'}, {'end': 157.071, 'src': 'embed', 'start': 128.846, 'weight': 1, 'content': [{'end': 135.453, 'text': 'the first one is the username and the second one is the user id, and after that we have a query string.', 'start': 128.846, 'duration': 6.607}, {'end': 139.658, 'text': 'so we have a question mark with one query string parameter which is full.', 'start': 135.453, 'duration': 4.205}, {'end': 146.443, 'text': "so you're going to learn how to implement routes with multiple parameters and query strings in this section.", 'start': 140.479, 'duration': 5.964}, {'end': 157.071, 'text': 'now we also have another link on our navigation bar, that is posts, which takes us to our posts page and note that the url is slash posts.', 'start': 146.443, 'duration': 10.628}], 'summary': 'Learning to implement routes with multiple parameters and query strings, and navigating to a posts page', 'duration': 28.225, 'max_score': 128.846, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/tUCa3JcFILI/pics/tUCa3JcFILI128846.jpg'}, {'end': 242.127, 'src': 'embed', 'start': 205.238, 'weight': 5, 'content': [{'end': 208.1, 'text': 'Very simple markup that I copied from bootstrap website.', 'start': 205.238, 'duration': 2.862}, {'end': 213.062, 'text': 'So on this navigation bar, we have two links, followers and posts.', 'start': 208.76, 'duration': 4.302}, {'end': 222.182, 'text': 'Now back in app module, The other components here are home component, GitHub profile component, and not found component.', 'start': 213.842, 'duration': 8.34}, {'end': 224.223, 'text': 'These are really basic components.', 'start': 222.862, 'duration': 1.361}, {'end': 225.104, 'text': 'There is no code.', 'start': 224.243, 'duration': 0.861}, {'end': 226.124, 'text': 'There is no markup.', 'start': 225.184, 'duration': 0.94}, {'end': 230.927, 'text': 'I simply generated these with Angular CLI for the purpose of this section.', 'start': 226.585, 'duration': 4.342}, {'end': 242.127, 'text': 'Now, one more thing I want you to pay attention to is that here we have an import statement to import the router module from Angular slash router.', 'start': 231.628, 'duration': 10.499}], 'summary': 'Transcript discusses basic angular components and import statement for router module.', 'duration': 36.889, 'max_score': 205.238, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/tUCa3JcFILI/pics/tUCa3JcFILI205238.jpg'}], 'start': 2.113, 'title': 'Angular routing and navigation', 'summary': 'Covers implementing routing and navigation in angular, including configuring routes, single page applications, working with route and query parameters, programmatic navigation, and adding navigation to angular apps. it also delves into implementing routes with multiple parameters and query strings, configuring routes in app.module, and introducing new components for navigation and pages.', 'chapters': [{'end': 102.23, 'start': 2.113, 'title': 'Angular routing and navigation', 'summary': 'Covers implementing routing and navigation in angular, providing an in-depth understanding of configuring routes, implementing single page applications, working with route and query parameters, and programmatic navigation, ultimately enabling the addition of navigation to angular apps.', 'duration': 100.117, 'highlights': ['The chapter covers implementing routing and navigation in Angular, providing an in-depth understanding of configuring routes, implementing single page applications, working with route and query parameters, and programmatic navigation, ultimately enabling the addition of navigation to Angular apps. In-depth understanding of how routing works, ability to add navigation to Angular apps', 'The module contains directives and services for implementing navigation in applications, which will be covered throughout this section. Introduction to router module, explanation of directives and services for navigation', 'The three steps to implement navigation include configuring routes, adding a router outlet, and adding links, each of which will be explored in detail throughout the next few lectures. Steps to implement navigation: configure routes, add router outlet, add links']}, {'end': 230.927, 'start': 103.211, 'title': 'Angular navigation and routing', 'summary': 'Covers implementing routes with multiple parameters and query strings, configuring routes in app.module, and introducing new components for navigation and pages.', 'duration': 127.716, 'highlights': ['The chapter covers implementing routes with multiple parameters and query strings It explains how to implement routes with multiple parameters and a query string, demonstrating the practical application of this concept.', 'Configuring routes in app.module The transcript explains the process of configuring routes in the app.module, providing a practical demonstration for the audience.', "Introducing new components for navigation and pages New components such as navbar, home, GitHub profile, and not found are introduced, providing an overview of the components' purpose and generation method through Angular CLI."]}], 'duration': 228.814, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/tUCa3JcFILI/pics/tUCa3JcFILI2113.jpg', 'highlights': ['The chapter covers implementing routing and navigation in Angular, providing an in-depth understanding of configuring routes, implementing single page applications, working with route and query parameters, and programmatic navigation, ultimately enabling the addition of navigation to Angular apps.', 'The chapter covers implementing routes with multiple parameters and query strings It explains how to implement routes with multiple parameters and a query string, demonstrating the practical application of this concept.', 'The module contains directives and services for implementing navigation in applications, which will be covered throughout this section. Introduction to router module, explanation of directives and services for navigation', 'Configuring routes in app.module The transcript explains the process of configuring routes in the app.module, providing a practical demonstration for the audience.', 'The three steps to implement navigation include configuring routes, adding a router outlet, and adding links, each of which will be explored in detail throughout the next few lectures. Steps to implement navigation: configure routes, add router outlet, add links', "Introducing new components for navigation and pages New components such as navbar, home, GitHub profile, and not found are introduced, providing an overview of the components' purpose and generation method through Angular CLI."]}, {'end': 387.531, 'segs': [{'end': 259.374, 'src': 'embed', 'start': 231.628, 'weight': 2, 'content': [{'end': 242.127, 'text': 'Now, one more thing I want you to pay attention to is that here we have an import statement to import the router module from Angular slash router.', 'start': 231.628, 'duration': 10.499}, {'end': 244.49, 'text': 'So we have imported our router module.', 'start': 242.828, 'duration': 1.662}, {'end': 246.613, 'text': 'Now we are ready to define our routes.', 'start': 244.851, 'duration': 1.762}, {'end': 251.259, 'text': "So let's go to the imports array right here.", 'start': 247.174, 'duration': 4.085}, {'end': 259.374, 'text': "we're going to call router module dot for root.", 'start': 253.251, 'duration': 6.123}], 'summary': 'Imported router module from angular slash router to define routes.', 'duration': 27.746, 'max_score': 231.628, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/tUCa3JcFILI/pics/tUCa3JcFILI231628.jpg'}, {'end': 310.464, 'src': 'embed', 'start': 280.545, 'weight': 0, 'content': [{'end': 284.888, 'text': "then, instead of using for root, we're going to use for child.", 'start': 280.545, 'duration': 4.343}, {'end': 288.59, 'text': "you're going to see this later in the course, so for now, don't worry about it.", 'start': 284.888, 'duration': 3.702}, {'end': 290.711, 'text': 'so back to for root.', 'start': 288.59, 'duration': 2.121}, {'end': 293.373, 'text': 'here we pass an array of routes.', 'start': 290.711, 'duration': 2.662}, {'end': 301.137, 'text': 'each route is an object with two properties one is path and the other is component.', 'start': 293.373, 'duration': 7.764}, {'end': 310.464, 'text': "With this we're telling Angular Router that whenever the browser address changes to this path, display this component.", 'start': 302.881, 'duration': 7.583}], 'summary': "Using 'for child' instead of 'for root' in angular router to define routes with path and component properties.", 'duration': 29.919, 'max_score': 280.545, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/tUCa3JcFILI/pics/tUCa3JcFILI280545.jpg'}, {'end': 387.531, 'src': 'embed', 'start': 356.212, 'weight': 1, 'content': [{'end': 360.273, 'text': 'So slash, and to add a parameter we use colon.', 'start': 356.212, 'duration': 4.061}, {'end': 362.854, 'text': 'And then we add the name of the parameter.', 'start': 361.173, 'duration': 1.681}, {'end': 364.534, 'text': 'So username.', 'start': 363.274, 'duration': 1.26}, {'end': 371.696, 'text': 'So in this path, we have a parameter called username that will be placed dynamically at runtime.', 'start': 365.714, 'duration': 5.982}, {'end': 373.796, 'text': "You're going to see this later in this section.", 'start': 372.156, 'duration': 1.64}, {'end': 380.285, 'text': 'Now the component should be GitHub profile component.', 'start': 374.957, 'duration': 5.328}, {'end': 384.669, 'text': 'Okay Now we can reformat this code.', 'start': 381.486, 'duration': 3.183}, {'end': 387.531, 'text': "It's cleaner, easier to the eyes.", 'start': 385.85, 'duration': 1.681}], 'summary': 'Discusses adding a parameter in a path and reformatting code for github profile component.', 'duration': 31.319, 'max_score': 356.212, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/tUCa3JcFILI/pics/tUCa3JcFILI356212.jpg'}], 'start': 231.628, 'title': 'Angular router module', 'summary': 'Explains the usage of the angular router module, including defining routes using forroot method with an array of routes, and adding parameters to paths for dynamic content.', 'chapters': [{'end': 387.531, 'start': 231.628, 'title': 'Angular router module', 'summary': 'Explains the usage of the angular router module, including defining routes using forroot method with an array of routes, and adding parameters to paths for dynamic content.', 'duration': 155.903, 'highlights': ['The forRoot method is used to define the routes for the application, with each route represented by an object containing path and component properties.', 'The usage of parameters in paths is demonstrated, where a parameter like username is added using a colon, allowing dynamic content placement at runtime.', 'Importing the router module from Angular slash router is demonstrated as the initial step in defining routes for the application.']}], 'duration': 155.903, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/tUCa3JcFILI/pics/tUCa3JcFILI231628.jpg', 'highlights': ['The forRoot method defines routes with path and component properties.', 'Demonstrates usage of parameters in paths for dynamic content placement.', 'Importing the router module from Angular/router is the initial step in defining routes.']}, {'end': 733.274, 'segs': [{'end': 448.551, 'src': 'embed', 'start': 422.577, 'weight': 2, 'content': [{'end': 428.5, 'text': 'This represents a wildcard, and this basically catches any URLs in the browser address bar.', 'start': 422.577, 'duration': 5.923}, {'end': 433.567, 'text': "So here I'm going to change the component to not found component.", 'start': 429.926, 'duration': 3.641}, {'end': 437.388, 'text': 'Now the order of this route is important.', 'start': 434.767, 'duration': 2.621}, {'end': 445.75, 'text': 'So if I put this last route at the beginning of our routes array, this pattern, this wildcard is going to catch any routes.', 'start': 438.168, 'duration': 7.582}, {'end': 448.551, 'text': "And we're only going to see the not found page.", 'start': 446.37, 'duration': 2.181}], 'summary': 'Changing route component to not found catches any urls.', 'duration': 25.974, 'max_score': 422.577, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/tUCa3JcFILI/pics/tUCa3JcFILI422577.jpg'}, {'end': 508.457, 'src': 'embed', 'start': 477.203, 'weight': 0, 'content': [{'end': 480.225, 'text': 'So we need to put the more specific routes on the top.', 'start': 477.203, 'duration': 3.022}, {'end': 483.606, 'text': "So I'm going to move this on top of the followers route.", 'start': 480.845, 'duration': 2.761}, {'end': 486.188, 'text': 'So cut from here and paste it here.', 'start': 484.046, 'duration': 2.142}, {'end': 489.153, 'text': 'So now the first route is more specific.', 'start': 487.233, 'duration': 1.92}, {'end': 495.735, 'text': 'And if you have a URL with this pattern, this route will be active and GitHub profile component will be displayed.', 'start': 489.714, 'duration': 6.021}, {'end': 498.315, 'text': 'So this is how we define routes.', 'start': 496.655, 'duration': 1.66}, {'end': 500.856, 'text': "Next, we're going to look at router outlet.", 'start': 498.955, 'duration': 1.901}, {'end': 508.457, 'text': 'So we have defined our routes here in app module.', 'start': 506.077, 'duration': 2.38}], 'summary': 'Adjust routes to prioritize specific routes, define router outlet, and configure routes in app module.', 'duration': 31.254, 'max_score': 477.203, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/tUCa3JcFILI/pics/tUCa3JcFILI477203.jpg'}, {'end': 565.559, 'src': 'embed', 'start': 534.416, 'weight': 1, 'content': [{'end': 540.221, 'text': "And that's where Angular router is going to display the component that is associated with the current route.", 'start': 534.416, 'duration': 5.805}, {'end': 544.177, 'text': "So let's go to app.html.", 'start': 541.656, 'duration': 2.521}, {'end': 547.999, 'text': 'So currently we only have the navigation bar.', 'start': 545.938, 'duration': 2.061}, {'end': 553.542, 'text': "Now below that I'm going to add a router outlet element.", 'start': 548.9, 'duration': 4.642}, {'end': 557.704, 'text': 'This is a directive that is defined in the router module.', 'start': 554.322, 'duration': 3.382}, {'end': 565.559, 'text': "When Angular sees this, it's going to render the component associated with the current route after this router outlet.", 'start': 558.356, 'duration': 7.203}], 'summary': 'Angular router displays the associated component with the current route in the app.html using a router outlet element.', 'duration': 31.143, 'max_score': 534.416, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/tUCa3JcFILI/pics/tUCa3JcFILI534416.jpg'}, {'end': 648.943, 'src': 'embed', 'start': 617.131, 'weight': 5, 'content': [{'end': 624.258, 'text': 'if i change this to followers slash one we get the profile page perfect.', 'start': 617.131, 'duration': 7.127}, {'end': 627.281, 'text': 'so our more specific route is working.', 'start': 624.258, 'duration': 3.023}, {'end': 633.615, 'text': 'now, if i change this to posts, get our posts page beautiful.', 'start': 627.281, 'duration': 6.334}, {'end': 640.639, 'text': 'and finally, if i change this to an invalid url, we get the not found page.', 'start': 633.615, 'duration': 7.024}, {'end': 643, 'text': 'so all the routes are working properly.', 'start': 640.639, 'duration': 2.361}, {'end': 648.943, 'text': 'next we need to add links, so as we click on these links in the navigation bar, we get the right page.', 'start': 643, 'duration': 5.943}], 'summary': 'Successfully implemented specific routes for profile, posts, and not found pages, and will add navigation links next.', 'duration': 31.812, 'max_score': 617.131, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/tUCa3JcFILI/pics/tUCa3JcFILI617131.jpg'}, {'end': 733.274, 'src': 'embed', 'start': 706.898, 'weight': 6, 'content': [{'end': 711.581, 'text': 'But note that when I click on the links in the navigation bar, the page is going to flicker.', 'start': 706.898, 'duration': 4.683}, {'end': 715.963, 'text': 'so i click on followers.', 'start': 712.401, 'duration': 3.562}, {'end': 717.744, 'text': 'did you see the page flickered?', 'start': 715.963, 'duration': 1.781}, {'end': 720.285, 'text': 'it went blank for a split second.', 'start': 717.744, 'duration': 2.541}, {'end': 721.305, 'text': "you're going to see this again.", 'start': 720.285, 'duration': 1.02}, {'end': 722.886, 'text': "so i'm going to click on posts.", 'start': 721.305, 'duration': 1.581}, {'end': 726.007, 'text': 'look now, this was too fast.', 'start': 722.886, 'duration': 3.121}, {'end': 727.548, 'text': "you probably didn't see it.", 'start': 726.007, 'duration': 1.541}, {'end': 733.274, 'text': 'let me click on followers one more time, this kind of navigation.', 'start': 727.548, 'duration': 5.726}], 'summary': 'Navigation bar links cause page flicker, blank for a split second, and fast transitions.', 'duration': 26.376, 'max_score': 706.898, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/tUCa3JcFILI/pics/tUCa3JcFILI706898.jpg'}], 'start': 391.84, 'title': 'Vue and angular routing', 'summary': 'Discusses configuring vue router and creating a not found page using wildcard route, while also explaining the importance of defining specific routes, the purpose of a router outlet, and the successful implementation of routing in an angular application.', 'chapters': [{'end': 448.551, 'start': 391.84, 'title': 'Vue router configuration', 'summary': 'Discusses configuring vue router by adding routes for different urls and creating a not found page using wildcard route, ensuring proper order of routes to display the not found page.', 'duration': 56.711, 'highlights': ['By adding routes for different URLs and creating a not found page using wildcard route, the chapter demonstrates the configuration of Vue router.', 'The wildcard route, represented by two asterisks, catches any URLs in the browser address bar, ensuring that the not found component is displayed for invalid routes.', 'The order of routes is crucial, as placing the wildcard route at the beginning of the routes array ensures that it catches any routes, thus displaying the not found page.']}, {'end': 733.274, 'start': 449.331, 'title': 'Angular routing and router outlet', 'summary': 'Explains the importance of defining specific routes, the purpose of a router outlet, and the successful implementation of routing in an angular application, which resulted in all routes working properly and the need to add proper links to the navigation bar.', 'duration': 283.943, 'highlights': ['The need to put more specific routes on top for proper matching of URLs and rendering of the associated components. Moving the more specific routes to the top ensures that the correct component is displayed based on the URL pattern, resulting in improved routing functionality.', 'The process of adding a router outlet in the app.html file to display the component associated with the current route. Adding a router outlet in the app.html file allows Angular router to render the appropriate component associated with the current route, ensuring proper display and functionality.', 'Successful implementation of routing in the Angular application, resulting in all routes working properly. Testing different routes, such as followers, posts, and invalid URLs, confirmed the proper functionality of all defined routes in the Angular application.', 'The need to add proper links to the navigation bar to ensure correct page navigation without flickering. Adding proper links to the navigation bar will enhance user experience by providing seamless page navigation without flickering or unexpected behavior.']}], 'duration': 341.434, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/tUCa3JcFILI/pics/tUCa3JcFILI391840.jpg', 'highlights': ['The need to put more specific routes on top for proper matching of URLs and rendering of the associated components. Moving the more specific routes to the top ensures that the correct component is displayed based on the URL pattern, resulting in improved routing functionality.', 'The process of adding a router outlet in the app.html file to display the component associated with the current route. Adding a router outlet in the app.html file allows Angular router to render the appropriate component associated with the current route, ensuring proper display and functionality.', 'By adding routes for different URLs and creating a not found page using wildcard route, the chapter demonstrates the configuration of Vue router.', 'The wildcard route, represented by two asterisks, catches any URLs in the browser address bar, ensuring that the not found component is displayed for invalid routes.', 'The order of routes is crucial, as placing the wildcard route at the beginning of the routes array ensures that it catches any routes, thus displaying the not found page.', 'Successful implementation of routing in the Angular application, resulting in all routes working properly. Testing different routes, such as followers, posts, and invalid URLs, confirmed the proper functionality of all defined routes in the Angular application.', 'The need to add proper links to the navigation bar to ensure correct page navigation without flickering. Adding proper links to the navigation bar will enhance user experience by providing seamless page navigation without flickering or unexpected behavior.']}, {'end': 1468.685, 'segs': [{'end': 802.246, 'src': 'embed', 'start': 733.274, 'weight': 0, 'content': [{'end': 739.639, 'text': 'every time we click on a link, the entire page is downloaded and the angular app is reinitialized.', 'start': 733.274, 'duration': 6.365}, {'end': 743.182, 'text': "that's why the page goes blank for just a split second.", 'start': 739.639, 'duration': 3.543}, {'end': 750.848, 'text': 'as your application grows, as you have more code, the cost of startup is going to be higher, so that delay will be even more now,', 'start': 743.182, 'duration': 7.666}, {'end': 752.569, 'text': 'if you look at the browser network tab.', 'start': 750.848, 'duration': 1.721}, {'end': 759.572, 'text': 'So every time we click on any of these links here, all the resources in our application are redownloaded.', 'start': 753.61, 'duration': 5.962}, {'end': 765.694, 'text': 'So as an example, you can see all our JavaScript bundles are redownloaded every time we click on a link.', 'start': 760.012, 'duration': 5.682}, {'end': 768.855, 'text': 'This is something we want to avoid at all costs.', 'start': 766.495, 'duration': 2.36}, {'end': 772.817, 'text': 'Otherwise, there is no point using Angular to build modern applications.', 'start': 769.236, 'duration': 3.581}, {'end': 781.74, 'text': 'When we click on a link, we want only the content for the new page to be downloaded, not the entire application, not all the resources.', 'start': 774.197, 'duration': 7.543}, {'end': 789.599, 'text': "So to fix this problem, instead of the href attribute, we're going to use a directive called router link.", 'start': 783.015, 'duration': 6.584}, {'end': 794.181, 'text': "So I'm going to replace this with router link.", 'start': 790.439, 'duration': 3.742}, {'end': 798.724, 'text': 'And similarly here, router link.', 'start': 795.942, 'duration': 2.782}, {'end': 802.246, 'text': 'This directive is also defined in the router module.', 'start': 799.544, 'duration': 2.702}], 'summary': 'Redownloading all resources on link click increases startup cost. using router link directive can fix this issue.', 'duration': 68.972, 'max_score': 733.274, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/tUCa3JcFILI/pics/tUCa3JcFILI733274.jpg'}, {'end': 1231.67, 'src': 'heatmap', 'start': 1206.124, 'weight': 1, 'content': [{'end': 1212.749, 'text': 'You can see that here we need to pass a function that takes a parameter of type param map and returns void.', 'start': 1206.124, 'duration': 6.625}, {'end': 1218.474, 'text': "So let's add an arrow function here, param map, or we can call it params.", 'start': 1213.65, 'duration': 4.824}, {'end': 1221.837, 'text': "It's shorter, goes to a code block.", 'start': 1218.714, 'duration': 3.123}, {'end': 1226.446, 'text': "Now let's log this on the console and see what is inside this object.", 'start': 1223.004, 'duration': 3.442}, {'end': 1229.008, 'text': 'So console.log params.', 'start': 1226.786, 'duration': 2.222}, {'end': 1231.67, 'text': 'Save Back in the browser.', 'start': 1230.009, 'duration': 1.661}], 'summary': 'Pass arrow function with param map, log params on console, and save in browser.', 'duration': 25.546, 'max_score': 1206.124, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/tUCa3JcFILI/pics/tUCa3JcFILI1206124.jpg'}, {'end': 1320.238, 'src': 'embed', 'start': 1293.867, 'weight': 2, 'content': [{'end': 1301.913, 'text': 'We use getAll to get the value of all route parameters and has to see if we have a parameter by the given name in this object.', 'start': 1293.867, 'duration': 8.046}, {'end': 1313.256, 'text': 'so here, to get the value of the username parameter, we call the get method like this get user name, and, by the way,', 'start': 1303.073, 'duration': 10.183}, {'end': 1316.777, 'text': "what we have here is actually not username, it's user id.", 'start': 1313.256, 'duration': 3.521}, {'end': 1320.238, 'text': 'so always pay great attention to naming your route parameters,', 'start': 1316.777, 'duration': 3.461}], 'summary': 'Using getall to retrieve all route parameters and get method for specific parameter value, emphasizing the importance of accurate parameter naming.', 'duration': 26.371, 'max_score': 1293.867, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/tUCa3JcFILI/pics/tUCa3JcFILI1293867.jpg'}, {'end': 1435.12, 'src': 'embed', 'start': 1405.048, 'weight': 5, 'content': [{'end': 1408.152, 'text': 'This makes it a little bit hard to access these parameters.', 'start': 1405.048, 'duration': 3.104}, {'end': 1410.395, 'text': "How come we don't have an API like this?", 'start': 1408.713, 'duration': 1.682}, {'end': 1415.959, 'text': 'so this.route of id.', 'start': 1411.636, 'duration': 4.323}, {'end': 1418.381, 'text': 'this would be much easier, right?', 'start': 1415.959, 'duration': 2.422}, {'end': 1423.784, 'text': 'or potentially we could have this.route.param map of id.', 'start': 1418.381, 'duration': 5.403}, {'end': 1427.146, 'text': 'this is easier to work with than an observable.', 'start': 1423.784, 'duration': 3.362}, {'end': 1429.288, 'text': "so in the next lecture i'm going to answer this question.", 'start': 1427.146, 'duration': 2.142}, {'end': 1435.12, 'text': 'Hi, thank you for watching my Angular tutorial.', 'start': 1432.799, 'duration': 2.321}], 'summary': 'Discussing the difficulty of accessing parameters and the potential for an easier api in angular.', 'duration': 30.072, 'max_score': 1405.048, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/tUCa3JcFILI/pics/tUCa3JcFILI1405048.jpg'}], 'start': 733.274, 'title': 'Angular router optimization and single page applications', 'summary': 'Discusses the inefficiency of redownloading the entire application when a link is clicked in angular, and introduces the solution of using the router link directive to download only the content for the new page, reducing startup costs and improving application performance. it also explains single page applications, navigation behavior, the use of router link and router link active directives, extracting route parameters, parameter naming importance, and the definition of route parameters as observables.', 'chapters': [{'end': 802.246, 'start': 733.274, 'title': 'Angular router link optimization', 'summary': 'Discusses the inefficiency of redownloading the entire application every time a link is clicked in angular, and introduces the solution of using the router link directive to only download the content for the new page, reducing startup costs and improving application performance.', 'duration': 68.972, 'highlights': ['Redownloading entire application and resources Every time a link is clicked, all the resources in the application are redownloaded, leading to increased startup costs and page blanking for a split second.', 'Introduction of router link directive The solution to the problem of redownloading the entire application is using the router link directive instead of the href attribute, which only downloads the content for the new page, reducing costs and improving performance.', 'Impact of application growth on startup cost As the application grows and more code is added, the cost of startup will be higher, resulting in even greater delays, as observed in the browser network tab.']}, {'end': 1468.685, 'start': 803.207, 'title': 'Single page applications and route parameters', 'summary': 'Discusses single page applications, explaining how resources are downloaded, navigation behavior, and the use of router link and router link active directives. it also covers extracting route parameters and the importance of parameter naming. additionally, it hints at further explanation on why route parameters are defined as observables.', 'duration': 665.478, 'highlights': ['The chapter discusses single page applications, explaining how resources are downloaded, navigation behavior, and the use of router link and router link active directives. It details the behavior of single page applications, highlighting the efficient resource downloading process and the navigation behavior that only reloads the content area. It also explains the use of router link and router link active directives for dynamic URL rendering.', 'It covers extracting route parameters and the importance of parameter naming. It explains the process of extracting route parameters and emphasizes the importance of naming parameters to avoid confusion for developers and minimize maintenance costs.', 'Additionally, it hints at further explanation on why route parameters are defined as observables. It hints at an upcoming explanation about the reasons behind defining route parameters as observables and the potential ease of use if they were not defined as observables.']}], 'duration': 735.411, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/tUCa3JcFILI/pics/tUCa3JcFILI733274.jpg', 'highlights': ['Introduction of router link directive The solution to the problem of redownloading the entire application is using the router link directive instead of the href attribute, which only downloads the content for the new page, reducing costs and improving performance.', 'The chapter discusses single page applications, explaining how resources are downloaded, navigation behavior, and the use of router link and router link active directives. It details the behavior of single page applications, highlighting the efficient resource downloading process and the navigation behavior that only reloads the content area. It also explains the use of router link and router link active directives for dynamic URL rendering.', 'It covers extracting route parameters and the importance of parameter naming. It explains the process of extracting route parameters and emphasizes the importance of naming parameters to avoid confusion for developers and minimize maintenance costs.', 'Redownloading entire application and resources Every time a link is clicked, all the resources in the application are redownloaded, leading to increased startup costs and page blanking for a split second.', 'Impact of application growth on startup cost As the application grows and more code is added, the cost of startup will be higher, resulting in even greater delays, as observed in the browser network tab.', 'Additionally, it hints at further explanation on why route parameters are defined as observables. It hints at an upcoming explanation about the reasons behind defining route parameters as observables and the potential ease of use if they were not defined as observables.']}], 'highlights': ['The chapter covers implementing routing and navigation in Angular, providing an in-depth understanding of configuring routes, implementing single page applications, working with route and query parameters, and programmatic navigation, ultimately enabling the addition of navigation to Angular apps.', 'The need to put more specific routes on top for proper matching of URLs and rendering of the associated components. Moving the more specific routes to the top ensures that the correct component is displayed based on the URL pattern, resulting in improved routing functionality.', 'The process of adding a router outlet in the app.html file to display the component associated with the current route. Adding a router outlet in the app.html file allows Angular router to render the appropriate component associated with the current route, ensuring proper display and functionality.', 'Introduction of router link directive The solution to the problem of redownloading the entire application is using the router link directive instead of the href attribute, which only downloads the content for the new page, reducing costs and improving performance.']}