1 00:00:00,150 --> 00:00:04,290 In this lecture, we're going to load some static assets for our theme. 2 00:00:04,680 --> 00:00:06,570 There are two missing assets. 3 00:00:06,810 --> 00:00:10,020 The first asset is the Roboto Google font. 4 00:00:10,320 --> 00:00:12,960 This asset comes from an external source. 5 00:00:13,320 --> 00:00:17,790 The second asset is a video for the interest section on the home page. 6 00:00:18,180 --> 00:00:22,230 Unlike the Roboto font, this asset is stored locally. 7 00:00:22,590 --> 00:00:28,470 We all get an opportunity to learn how to load assets from external and local sources. 8 00:00:29,070 --> 00:00:31,080 Let's start with the Google Fonts. 9 00:00:31,350 --> 00:00:38,010 We can link external style sheets and scripts by simply adding them to the index that each email file 10 00:00:38,010 --> 00:00:39,390 in the source directory. 11 00:00:42,010 --> 00:00:49,600 Any changes we apply to the index HTML file will be reflected in the bundle if we want to load extra 12 00:00:49,600 --> 00:00:52,180 files through link and script tags. 13 00:00:52,390 --> 00:00:54,190 We should add them to this file. 14 00:00:54,580 --> 00:00:58,480 This practice should only be applied to external resources. 15 00:00:58,870 --> 00:01:03,880 If we have a file stored locally on our system, we should opt to import them. 16 00:01:04,269 --> 00:01:08,350 It'll allow Angular to process the files for optimization. 17 00:01:09,130 --> 00:01:13,330 We can find the Google Fonts in any of the static template files. 18 00:01:15,800 --> 00:01:20,420 Inside the head tags, let's copy the link tags at the bottom. 19 00:01:22,970 --> 00:01:27,020 Next, we will paste them into the head section of our app. 20 00:01:29,670 --> 00:01:36,750 The first link tag will instruct the browser to connect with the server, storing the font file by default, 21 00:01:36,930 --> 00:01:43,590 the browser has to predict which servers it needs to connect to four files whenever we link files. 22 00:01:44,040 --> 00:01:49,830 The pre connect tag gives us the power to instruct which servers the browser should connect to. 23 00:01:50,310 --> 00:01:54,330 Establishing this connection early will boost the performance of our app. 24 00:01:54,630 --> 00:01:56,190 Files will load faster. 25 00:01:56,880 --> 00:02:00,210 The server we're connecting to stores the fonts from Google. 26 00:02:00,510 --> 00:02:06,450 After adding this tag, we're linking a style sheet for loading the Roboto font we're finished with 27 00:02:06,450 --> 00:02:07,410 loading the font. 28 00:02:07,680 --> 00:02:09,330 Let's move on to the video. 29 00:02:09,960 --> 00:02:16,560 The introduction section on the home page has a background video on autoplay in the app template. 30 00:02:16,680 --> 00:02:18,660 Let's take a look at this sections. 31 00:02:18,960 --> 00:02:19,530 HTML. 32 00:02:22,160 --> 00:02:28,340 Nested inside this section, we will come across the location of the video, you can find this part 33 00:02:28,340 --> 00:02:34,790 of the template by searching for a comment that says VIDEO These source TAGG is pointing to the assets 34 00:02:34,790 --> 00:02:38,570 slash video slash hero, dot, web and file. 35 00:02:38,870 --> 00:02:44,990 If we try to grab a file, locally, Angular will search for the files in the assets directory. 36 00:02:47,490 --> 00:02:51,810 Files stored in this directory will be copied over during production. 37 00:02:52,140 --> 00:02:59,370 We need to move the video file from the template directory to our source slash assets directory in the 38 00:02:59,370 --> 00:03:01,890 template slash assets directory. 39 00:03:02,040 --> 00:03:07,170 Copy and paste the video folder over to the source slash assets directory. 40 00:03:09,710 --> 00:03:14,960 After making those changes, everything should work, refresh the page in the browser. 41 00:03:17,530 --> 00:03:20,050 The video background is loading perfectly. 42 00:03:20,350 --> 00:03:26,230 We're finished with preparing the template we can move on to making it functional before we do. 43 00:03:26,290 --> 00:03:32,200 There are two things I want to mention down below we have a couple of broken images. 44 00:03:32,440 --> 00:03:34,570 We're not going to fix these right away. 45 00:03:35,020 --> 00:03:38,150 The images in the static design are placeholders. 46 00:03:38,410 --> 00:03:44,170 When we start working on uploading files, we are going to generate images from the videos. 47 00:03:44,440 --> 00:03:47,620 It won't be necessary to have placeholder images. 48 00:03:48,160 --> 00:03:54,100 Secondly, the video may break if we refresh the page if you're using Chrome like me. 49 00:03:54,250 --> 00:03:55,660 The video may freeze. 50 00:03:55,930 --> 00:03:57,970 This behavior is completely normal. 51 00:03:58,270 --> 00:04:03,700 In the resource section of this lecture, I provide a link to the video policy rules. 52 00:04:04,000 --> 00:04:09,700 According to Chrome, videos will not be auto played if the user does not interact with the app. 53 00:04:10,060 --> 00:04:13,210 Refreshing the page is not an official user action. 54 00:04:13,870 --> 00:04:18,700 The problem we're experiencing is not a problem with angular or our code. 55 00:04:19,089 --> 00:04:21,010 It's completely out of our hands. 56 00:04:21,190 --> 00:04:25,390 Luckily, we can force the video to play again after clicking a link. 57 00:04:25,720 --> 00:04:31,330 For example, if I click on the logo, the page will refresh and the video plays again. 58 00:04:31,810 --> 00:04:36,730 Clicking on links is considered a valid action, even if it leads to the same page. 59 00:04:37,270 --> 00:04:37,820 All right. 60 00:04:37,840 --> 00:04:40,990 With that covered, let's move on to the next lecture.