Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Routing in Ember.js

Routing in Ember.js

This presentation goes over the basics of the Ember.js Router


Dan McClain

May 08, 2013

Other Decks in Programming


  1. Routing in Ember.js Dan McClain

  2. Routing? Wat? • With a web application, URLs are the

    main user interface • Ember.js uses URLs to manage states (where am I? What do I want to do? • Sharing a URL shares the current state (sort of) • Preserves the back button (unless you disable it) http://jsbin.com/ewumic/1/edit
  3. Defining Routes

  4. Router Types • By default, uses hash urls: #/articles/1 •

    You can use the History API (if the user’s browser supports it): /articles/1 • You can disable the browser’s URL entirely by using ‘none’ http://jsbin.com/ewumic/1/edit
  5. this.route(‘about’) Route AboutRoute Controller AboutController Template about Generated Objects

  6. this.route() • Used for singular pages • Can take a

    path http://jsbin.com/amicax/1/edit
  7. this.resource(‘articles’) Route ArticlesRoute Controller ArticlesController Template articles

  8. this.resource(‘articles’,function(){ this.route(‘new’) }); • Passing function to resource creates an

    articles.index route • Routes defined by this call • articles/index • articles/new • Renders the articles template first, with the nested route within its outlet
  9. this.resource(‘articles’,function(){ this.route(‘new’) }); Route ArticlesIndexRoute Controller ArticlesIndexController Template articles/index /articles/index

  10. this.resource(‘articles’,function(){ this.route(‘new’) }); Route ArticlesNewRoute Controller ArticlesNewController Template articles/new /articles/new

  11. this.resource() • Resources manage multiple routes • Can have dynamic

    segments • Can have nested routes and resources http://jsbin.com/ovirep/12/edit
  12. Route Hooks • model • setupController • activate • deactivate

    • renderTemplate
  13. Specifying Models • Ember will call the model function of

    the current route • Dynamic segments will be passed in on an object provided to the function http://jsbin.com/ovirep/13/edit
  14. Setting up controllers • Called when the route changes •

    Set properties on the controller, fetch additional resources http://jsbin.com/ecocen/1/edit
  15. Activate & Deactivate • Activate is called when you enter

    a route for the first time, not when the model changes • Deactivate is called when you completely exit a route
  16. Rendering Templates • Router’s main job is to render the

    correct template • Defining a renderTemplate function to change the template used or to render it in a different outlet http://jsbin.com/itofom/3/edit
  17. Questions? • More information - http://emberjs.com/guides/routing/ • http://danmcclain.net • http://github.com/danmcclain

    • @_danmcclain