Learning Ember.js Part 2: Routes
In my last post, I gave a brief introduction to Ember.js and some of its core concepts. In this post, I am going to give a quick tutorial for some of the basics for one of those concepts, Routing. This piece is essential to how the Ember.js framework allows for the building of single-page web applications.
For the purposes of this tutorial, I have built a new Ember project creatively titled blog-demo using Ember version 2.3.0. When looking at the project folders (shown above), the most important directory for our purposes today, is the app directory. This directory will eventually contain all of the folders and files for routes, templates, models, components, and styles written for the project.
Routing
Routing is one of the two main pieces of the Ember framework enabling simple development of single-page web applications. Ember routers function by mapping the current URL defined by the user to one or more route handlers. Route handler serve four main functions:
- Rendering templates
- Loading models and making them usable by templates
- Redirecting users to different routes (useful for restricting user access to certain content)
- Handling user initiated actions which necessitate changes to to models or transitions to new routes
For the purposes of this post, I will be focusing on the first of the four (I will address the others in more detail in later post when covering models and components).
By default, the main router for any Ember application is the router.js file found in the app directory. The router class uses the map() method to define the URL mappings.
The default mapping of any path will be the same as the route name. For example, a route by the name of “helloworld” will have a URL of “/helloworld” (as shown above). However, it is also possible to define your own desired URL for any given route. By adding {path: ‘/hello’} to the route mapping (as shown below) we can change the URL from “/helloworld” to “/hello”.
Nesting
It is also possible to nest multiple routes together by modifying the route handler (as shown below) and adding an {{outlet}} handler to the parent template. The content of the child template will be loaded in the location of the {{outlet}} handler. The new URL of the example below will be “hello/goodbye”. Note in order for this to work, the template file of the child must be in a subfolder of templates with the same name of the parent route (not the URL), in this case app/templates/helloworld/goodbye.hbs.
Default Routes
The Ember framework defines two default route mappings for any application. The first of these is the application route, which is the default route that is loaded on system startup. All other application routes are nested within this route. For this reason, best practice would dictate that things such as main headers, footers, navigation bars, and any other content you wish to always be displayed, should be placed in the application template. The application route is the “single-page” to which all other content is loaded in a single-page Ember web application. Because of this, the Ember framework does not require you to define the application route (as all of the above examples show).
The second default route defined by the Ember framework is the index route. The index route is the default route at the top of every layer of nesting mapped to the “/” URL. By default, should an index route be created, it will load with the application route at system start-up. Like the application route, Ember handles index automatically, and as such no manual routing is required for index templates.
Wildcards
The last element of routing I wish to cover is Wildcard mapping. This functionality allows you to match multiple URLs to one route. This is particularity useful for handling 404 page not found errors. Below is an example of mapping a route to a Wildcard URL.
Thank you for reading this simple Ember.js routing tutorial. In the next post I will cover Ember templates. For more information on all things Ember, feel free to go to their website at http://emberjs.com/.
Dan Lavigne
