Ember.js: Tutorial — Part 1: Building Pages


  1. Define a route
  2. Use route's template
  3. Customize a URL
  4. Link pages with <LinkTo> component
  5. Pass arguments and attributes to a component

1. Define a route

1.1. Generate about route

1.2. Check router


By default, about route is served at /about URL.

2. Use route's template

2.1. Edit about template


Visit localhost:4200/about to see About Super Rentals and its description.

3. Customize a URL

3.1. Generate contact route

3.2. Edit router


path option helps keep original URL and template while using a new route.

3.3. Edit contact template


Visit localhost:4200/getting-in-touch to see Contact Us and its description.

4-5. Link pages with <LinkTo> component


This section include lessons for:

  • 5. Pass arguments and attributes to a component

4-5.1. Edit templates


  • Visit localhost:4200 to navigate URLs
    • e.g. from / to /about to and from /getting-in-touch
  • <LinkTo> is an example of a component that links a route
    • A component is a custom tag that supplements built-in tags of the browser
    • It can accept regular HTML attributes just like regular tags
    • Under to hood, it is an <a> tag that links href to correct route
    • A plain <a> tag makes a full-page refresh that <LinkTo> intercepts
  • @route is an example of a component argument
    • A component argument starts with @ symbol


Show Comments