Understanding the Application.html File

Locked lesson.

Upgrade

About this lesson

What is the Application.html file and what is it used for?

Quick reference

Understanding the Application.html File

In this video, we'll discuss the Application.html.erb file and why it is important.

When to use

Any time you'd like to add something to every single page of your app, you can place it in the Application.html.erb file and it will appear on every page of your app.

Instructions

The application.html.erb file is the central hub of all your web pages. It is the main template that all pages will use.

Whenever you add something to that file, it will appear on all the pages of your site.

This makes it a great place to put your site's navigation, because if you make a change to your navigation in the future, that change will appear instantly on all the pages of your site, without you needing to manually update all the pages.

Hints & tips

  • Application.html.erb is located in the app/views/layouts directory
  • Anything you add to Application.html.erb will show up on all pages of your site
  • It's a great place to put your site's navigation
Login to download
  • 00:05 In this video, I wanna talk about something called the application.html
  • 00:08 file, and we'll talk about how it relates to the pages we've created so far.
  • 00:13 So take a look at any of the pages we've created.
  • 00:15 We've created an About Us page and an Index page.
  • 00:17 And if I'll right-click here and
  • 00:20 click View Page Source we can see all this HTML stuff.
  • 00:25 And then this is, right here, if we come back here and
  • 00:29 click on our Views > About page.
  • 00:33 This is the only HTML we've given our file and that shows up right here but
  • 00:39 where's all the rest of this stuff come from and what is it?
  • 00:42 Well, that has to do with the application.html file.
  • 00:46 And if we go to our views directory and our app directory,
  • 00:50 we have two things here, we have our home directory and this layouts thing.
  • 00:53 If we click on this layouts, and then double-click this application file, we see
  • 00:58 this is exactly the stuff that shows up right here.
  • 01:04 See this workspace, all these things there.
  • 01:09 And this yield right there.
  • 01:11 This little yield tag?
  • 01:13 Well, that's all of this stuff.
  • 01:15 And it's also all of this stuff.
  • 01:19 So what Rails does is, whenever anybody comes to our website and wants to go to
  • 01:24 a web page on our website, Rails will run over and grab this application file.
  • 01:31 And then it will take whatever file the person is looking for, for
  • 01:35 instance this About page, it'll grab this stuff and
  • 01:39 it will shove it in right here and then it will output all of this onto the screen.
  • 01:44 So if we change this title from work space to say Pinteresting.
  • 01:49 And save this.
  • 01:51 If we come back here and click reload.
  • 01:53 Now it says Pinteresting at the top for our title.
  • 01:57 Also right here.
  • 01:59 And then if we go to our index page, we get the same thing.
  • 02:04 So every single page of our website will have all of this stuff shoved on it.
  • 02:10 For instance, if we come here, and let's do a page break,
  • 02:14 or a line break, and then type in HIYA!
  • 02:17 And then save this.
  • 02:18 If we come back and
  • 02:19 hit reload that's gonna show up on our Index page, hit reload.
  • 02:24 It's gonna show up on our About Us page.
  • 02:26 It's gonna show up on every single page of our website.
  • 02:29 So that's kinda interesting.
  • 02:30 That's a neat sorta tool that we can use for all kinds of different things, and
  • 02:34 you're gonna see some interesting ways to use this.
  • 02:37 Going further in this course.
  • 02:38 For right now just understand this is sort of the method that Rails
  • 02:43 uses to create webpages.
  • 02:44 So we know now how to create a webpage, how to create a controller and
  • 02:49 a route and a HTML page.
  • 02:51 We understand that the application.html file is the hub of everything,
  • 02:57 and this yield is where all this stuff gets generated.
  • 03:01 A little bit complicated,
  • 03:02 a little bit weird to think about, but actually very useful.
  • 03:04 And you'll see as we go on all kinds of cool things that we can do with this.
  • 03:08 So that's all for this video, in the next video, we'll talk about building links.

Lesson notes are only available for subscribers.

Gift this course