1 00:00:00,120 --> 00:00:05,130 In this section, we're going to start adding routing capabilities to our application. 2 00:00:05,490 --> 00:00:10,200 Most applications have pages for housing different types of resources. 3 00:00:10,500 --> 00:00:15,300 We can access a specific resource through the address bar in the browser. 4 00:00:15,750 --> 00:00:21,630 Inside this part of the browser, we can modify the URL to move to a different page. 5 00:00:24,190 --> 00:00:29,680 The concept of serving different resources based on a URL is called routing. 6 00:00:30,010 --> 00:00:36,640 Some examples of a resource can be the home page images, videos and icons from our app. 7 00:00:36,970 --> 00:00:40,090 Traditionally, routing is handled on the back end. 8 00:00:40,390 --> 00:00:44,620 Routing is a standard feature in a majority of backend frameworks. 9 00:00:47,110 --> 00:00:53,110 Wikipedia is a site that implements routing on the back end, we can click on the links to move around 10 00:00:53,110 --> 00:00:57,160 the site as we do so, the entire page gets refreshed. 11 00:00:57,460 --> 00:01:01,660 You can look at the refresh icon in the browser to see this in action. 12 00:01:01,990 --> 00:01:06,040 Every time the icon changes, the browser refreshes the page. 13 00:01:06,520 --> 00:01:10,470 Static assets like CSS or JavaScript need to be read. 14 00:01:10,480 --> 00:01:16,960 Downloaded under the developer tools, we can view a list of files downloaded in the network panel. 15 00:01:17,320 --> 00:01:21,310 Navigating around Wikipedia will cause the list to refresh. 16 00:01:23,900 --> 00:01:27,050 Some of the files are the same from page to page. 17 00:01:27,260 --> 00:01:31,910 It's redundant to download the same files as the years have gone by. 18 00:01:32,090 --> 00:01:35,420 Developers have discovered a better way to implement routing. 19 00:01:35,720 --> 00:01:40,840 Browsers have evolved to shared the responsibility of routing with backend frameworks. 20 00:01:41,180 --> 00:01:46,640 After a few meetings, a new API was introduced called the History API. 21 00:01:46,970 --> 00:01:50,570 It's a standardized API in most popular browsers. 22 00:01:51,080 --> 00:01:55,730 We can navigate to different URLs with JavaScript by doing so. 23 00:01:55,910 --> 00:01:58,520 The browser will not reload the assets. 24 00:01:58,790 --> 00:01:59,960 Let's give it a try. 25 00:02:00,200 --> 00:02:02,610 Switch over to the console panel. 26 00:02:02,900 --> 00:02:07,610 We will add the following function history dot push state. 27 00:02:10,220 --> 00:02:14,360 The push state function will update the path in the URL. 28 00:02:14,780 --> 00:02:18,980 It's essential to make a distinction between the domain and path. 29 00:02:20,760 --> 00:02:24,690 You URLs are made up of different components, for this example. 30 00:02:24,780 --> 00:02:28,290 We are going to look at the two most important components. 31 00:02:28,770 --> 00:02:31,260 First and foremost, we have the domain. 32 00:02:31,710 --> 00:02:35,070 The domain has a hostname and domain extension. 33 00:02:35,400 --> 00:02:40,800 In this example, example, dot com is considered the domain portion of the URL. 34 00:02:41,490 --> 00:02:43,470 After the domain is the path. 35 00:02:43,800 --> 00:02:46,590 The path can point to a specific resource. 36 00:02:46,920 --> 00:02:51,330 Paths allow us to point to individual files or pages. 37 00:02:52,590 --> 00:03:00,330 The push state function allows us to modify the path we can't modify the domain, otherwise we would 38 00:03:00,330 --> 00:03:02,430 receive a cross origin error. 39 00:03:02,700 --> 00:03:06,150 Luckily, we don't need to redirect to different URLs. 40 00:03:06,420 --> 00:03:08,640 This function has three arguments. 41 00:03:08,880 --> 00:03:11,820 The first argument is the data for the new page. 42 00:03:12,060 --> 00:03:15,700 We are going to pass in null for this demonstration. 43 00:03:15,720 --> 00:03:17,670 We don't need to pass on data. 44 00:03:18,300 --> 00:03:20,640 The next argument can be set to null. 45 00:03:21,090 --> 00:03:23,430 This argument is ignored by browsers. 46 00:03:23,610 --> 00:03:25,110 It's not worth learning about. 47 00:03:25,530 --> 00:03:30,960 The most important argument is the third argument is the path to navigate to. 48 00:03:31,260 --> 00:03:32,910 Let's pass in pizza. 49 00:03:35,510 --> 00:03:40,620 Before you run this function, keep an eye on the address bar and refresh icon. 50 00:03:40,940 --> 00:03:45,350 After running this function, the path has been updated to the new path. 51 00:03:45,710 --> 00:03:48,980 Most importantly, the page has not been refreshed. 52 00:03:49,250 --> 00:03:55,310 In addition, the push state function has added the URL to the user's browsing history. 53 00:03:55,820 --> 00:03:58,580 We can press the backward and forward buttons. 54 00:03:58,910 --> 00:04:02,450 These actions do not cause the browser to refresh, either. 55 00:04:02,780 --> 00:04:06,860 We can leverage the history API to navigate around the app. 56 00:04:07,250 --> 00:04:10,910 There are some advantages to allowing the client to handle routing. 57 00:04:11,270 --> 00:04:18,440 We benefit by providing a better user experience, lowering bandwidth costs and boosting performance. 58 00:04:18,890 --> 00:04:24,020 However, there is one caveat if we look at the page, nothing has changed. 59 00:04:24,350 --> 00:04:27,320 The history API modifies the URL. 60 00:04:27,620 --> 00:04:29,480 It doesn't manage the documents. 61 00:04:29,810 --> 00:04:32,210 This task is left to us to handle. 62 00:04:32,510 --> 00:04:36,890 Fortunately, angular ships a separate package for handling routing. 63 00:04:37,250 --> 00:04:42,980 In the resource section of this lecture, I provide a link to the angular router package. 64 00:04:43,520 --> 00:04:50,600 Angular can manage swapping components, updating the URL and monitoring changes under the hood. 65 00:04:50,690 --> 00:04:56,120 It uses the history API, therefore it's compatible with most browsers. 66 00:04:56,540 --> 00:05:00,560 This package does not come installed with the default angular package. 67 00:05:00,980 --> 00:05:03,620 We have the option of installing it manually. 68 00:05:03,950 --> 00:05:08,930 Alternatively, we can include this package during the creation of our project. 69 00:05:09,170 --> 00:05:10,970 In fact, that's what we did. 70 00:05:11,330 --> 00:05:17,540 If you can recall, we enabled routing for our project when creating it with the angular Seelye. 71 00:05:17,840 --> 00:05:20,150 It has been configured in our project. 72 00:05:20,690 --> 00:05:24,860 This entire section will be devoted to learning about the router package. 73 00:05:25,160 --> 00:05:28,220 Let's look at the configuration in the next lecture.