home
  • Blog
1.10
  • Getting Started
  • Getting Ember
  • Concepts
  • The Object Model
  • Application
  • Templates
    • The Application Template
    • Handlebars Basics
    • Conditionals
    • Displaying a List of Items
    • Binding Element Attributes
    • Binding Element Class Names
    • Links
    • Actions
    • Input Helpers
    • Development Helpers
    • Rendering with Helpers
    • Writing Helpers
  • Routing
  • Components
  • Controllers
  • Models
  • Views
  • Enumerables
  • Testing
  • Configuring Ember.js
  • Cookbook
  • Understanding Ember.js
  • Contributing to Ember.js
Old Guides - You are viewing the guides for Ember v1.10.0.
Go to v5.0.0

The Application Template

Edit pencil

The application template is the default template that is rendered when your application starts.

You should put your header, footer, and any other decorative content here. Additionally, you should have at least one {{outlet}}: a placeholder that the router will fill in with the appropriate template, based on the current URL.

Here's an example template:

<header>
  <h1>Igor's Blog</h1>
</header>

<div>
  {{outlet}}
</div>

<footer>
  &copy;2013 Igor's Publishing, Inc.
</footer>

The header and footer will always be displayed on screen, but the contents of the <div> will change depending on if the user is currently at /posts or /posts/15, for example.

For more information about how outlets are filled in by the router, see Routing.

If you are keeping your templates in HTML, create a <script> tag without a template name. Ember will use the template without a name as the application template and it will automatically be compiled and appended to the screen.

<script type="text/x-handlebars">
  <div>
    {{outlet}}
  </div>
</script>

If you're using build tools to load your templates, make sure you name the template application.

left arrow
Introduction
Handlebars Basics
right arrow
Team Sponsors Security Legal Branding Community Guidelines
Twitter GitHub Discord Mastodon

If you want help you can contact us by email, open an issue, or get realtime help by joining the Ember Discord.

© Copyright 2023 - Tilde Inc.
Ember.js is free, open source and always will be.


Ember is generously supported by
blue