In this lecture, we're going to load some static assets for our theme.
There are two missing assets.
The first asset is the Roboto Google font.
This asset comes from an external source.
The second asset is a video for the interest section on the home page.
Unlike the Roboto font, this asset is stored locally.
We all get an opportunity to learn how to load assets from external and local sources.
Let's start with the Google Fonts.
We can link external style sheets and scripts by simply adding them to the index that each email file
in the source directory.
Any changes we apply to the index HTML file will be reflected in the bundle if we want to load extra
files through link and script tags.
We should add them to this file.
This practice should only be applied to external resources.
If we have a file stored locally on our system, we should opt to import them.
It'll allow Angular to process the files for optimization.
We can find the Google Fonts in any of the static template files.
Inside the head tags, let's copy the link tags at the bottom.
Next, we will paste them into the head section of our app.
The first link tag will instruct the browser to connect with the server, storing the font file by default,
the browser has to predict which servers it needs to connect to four files whenever we link files.
The pre connect tag gives us the power to instruct which servers the browser should connect to.
Establishing this connection early will boost the performance of our app.
Files will load faster.
The server we're connecting to stores the fonts from Google.
After adding this tag, we're linking a style sheet for loading the Roboto font we're finished with
loading the font.
Let's move on to the video.
The introduction section on the home page has a background video on autoplay in the app template.
Let's take a look at this sections.
HTML.
Nested inside this section, we will come across the location of the video, you can find this part
of the template by searching for a comment that says VIDEO These source TAGG is pointing to the assets
slash video slash hero, dot, web and file.
If we try to grab a file, locally, Angular will search for the files in the assets directory.
Files stored in this directory will be copied over during production.
We need to move the video file from the template directory to our source slash assets directory in the
template slash assets directory.
Copy and paste the video folder over to the source slash assets directory.
After making those changes, everything should work, refresh the page in the browser.
The video background is loading perfectly.
We're finished with preparing the template we can move on to making it functional before we do.
There are two things I want to mention down below we have a couple of broken images.
We're not going to fix these right away.
The images in the static design are placeholders.
When we start working on uploading files, we are going to generate images from the videos.
It won't be necessary to have placeholder images.
Secondly, the video may break if we refresh the page if you're using Chrome like me.
The video may freeze.
This behavior is completely normal.
In the resource section of this lecture, I provide a link to the video policy rules.
According to Chrome, videos will not be auto played if the user does not interact with the app.
Refreshing the page is not an official user action.
The problem we're experiencing is not a problem with angular or our code.
It's completely out of our hands.
Luckily, we can force the video to play again after clicking a link.
For example, if I click on the logo, the page will refresh and the video plays again.
Clicking on links is considered a valid action, even if it leads to the same page.
All right.
With that covered, let's move on to the next lecture.