1 00:00:00,150 --> 00:00:04,110 In this lecture, we are going to add navigation links to our app. 2 00:00:04,380 --> 00:00:07,290 It's the next step after registering some routes. 3 00:00:07,530 --> 00:00:14,100 At the moment, we aren't able to switch between pages unless we manually type the URL in the address 4 00:00:14,100 --> 00:00:14,490 bar. 5 00:00:14,850 --> 00:00:18,540 It's not common to navigate an app by typing the URL. 6 00:00:18,840 --> 00:00:22,230 Most apps provide links to switch to different pages. 7 00:00:22,500 --> 00:00:25,440 We should add links for a better user experience. 8 00:00:25,860 --> 00:00:29,820 One solution for adding links to an app is through the anchor elements. 9 00:00:29,860 --> 00:00:31,230 Each attribute? 10 00:00:31,650 --> 00:00:34,260 Let's open the navigation template file. 11 00:00:36,800 --> 00:00:42,050 Inside this template, we are going to update the links for the home and about pages. 12 00:00:42,320 --> 00:00:47,570 Now that we have the rules for these pages, we should add links for them, for the home page. 13 00:00:47,690 --> 00:00:52,910 We can find the link under a comment that says app name on the anchor element. 14 00:00:52,970 --> 00:00:57,290 We will update the h ref attribute to a forward slash character. 15 00:00:59,810 --> 00:01:05,060 As for the about page, we can find the link for this page towards the bottom of the template. 16 00:01:05,390 --> 00:01:09,080 We will update the ref attribute to Slash about. 17 00:01:11,660 --> 00:01:14,030 Let's give our links a test in the browser. 18 00:01:16,570 --> 00:01:21,670 In our app, we can click on the links to switch between the home and about pages. 19 00:01:21,970 --> 00:01:24,580 Our solution works, but it's not ideal. 20 00:01:24,850 --> 00:01:27,610 The page is refreshing, which is a big problem. 21 00:01:27,970 --> 00:01:32,560 If you look closely at the refresh icon, it changes on every page load. 22 00:01:32,860 --> 00:01:36,460 This behavior indicates the browser is refreshing the page. 23 00:01:36,730 --> 00:01:43,570 The user is forced to download the assets we need to switch between pages without refreshing the page. 24 00:01:43,840 --> 00:01:45,850 The routing module has us covered. 25 00:01:46,150 --> 00:01:50,410 It will export a directive for handling navigation between pages. 26 00:01:50,650 --> 00:01:51,730 Let's check it out. 27 00:01:52,030 --> 00:01:56,080 Head back to the editor on the anger element for the About page. 28 00:01:56,200 --> 00:02:00,640 We will swap the ref attribute with a directive called Router Link. 29 00:02:03,120 --> 00:02:08,820 The router linked DirecTV will redirect the user to a different route in our app without refreshing 30 00:02:08,820 --> 00:02:09,479 the page. 31 00:02:09,780 --> 00:02:14,070 The value for this DirecTV must be a path registered with our app. 32 00:02:14,490 --> 00:02:18,990 This directive is capable of generating a link that points to the correct route. 33 00:02:19,320 --> 00:02:21,180 We don't need to update the value. 34 00:02:21,360 --> 00:02:22,770 It's good, as is. 35 00:02:23,220 --> 00:02:28,260 Let's update the link for the home page with this directive on the anchor element. 36 00:02:28,380 --> 00:02:32,250 Replace the RF attribute with the router link directv. 37 00:02:34,710 --> 00:02:37,620 Next, let's refresh the page in the browser. 38 00:02:40,030 --> 00:02:46,780 We can click on the links to navigate around the app as we do, so keep an eye on the refresh icon next 39 00:02:46,780 --> 00:02:47,920 to the address bar. 40 00:02:48,160 --> 00:02:49,300 It never changes. 41 00:02:49,600 --> 00:02:56,620 Regardless, Angular can render the correct component that corresponds to the URL under the hood. 42 00:02:56,830 --> 00:03:02,230 Angular is using the history API we can go back and forth between pages. 43 00:03:02,500 --> 00:03:05,290 Angular is smart enough to update the page. 44 00:03:05,560 --> 00:03:09,550 We don't need to add a directive or component to get this behavior. 45 00:03:09,730 --> 00:03:11,440 It works out of the box.