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

Ef16c122bdbe053704f2307cea255867?s=128

Dan McClain

May 08, 2013
Tweet

Other Decks in Programming

Transcript

  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

    http://jsbin.com/ovirep/12/edit
  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