Join Kai Gittens for an in-depth discussion in this video Understanding routes, part of Learning Ember.js.
I want to repeat what I said at the end of the last movie. The better you understand Ember Routes, the better you'll understand Ember overall. Ember does have a learning curve, but once you are armed with a firm understanding of routes, this curve will be greatly reduced. The core Ember development team takes routes very seriously. They work with the philosophy that the web is essentially a network of links connected to all sorts of content, and everyone that uses the web is used to this idea.
So the core team is always refining Ember's route capability and doing a great job of it. Because of this, we'll be doing a detailed review of Ember Routes in this movie and the Ember Inspector will help us. At the beginning of this course, we saw that Ember is a convention over configuration framework, meaning that it lets you write smaller pieces of code that will automatically create and execute bigger pieces of code. While Ember does this within many parts of its code base, the routes are the most important part.
In Ember, a route is a URL configuration. It defines a URL that points to a specific section of your web app, and you can can think of these specific sections as single pages because that's mostly how I'll be referring to them for the rest of this course. All the routes need to be grouped in what's known as a router. As soon as you create an Ember route inside a router, Ember uses some very strict naming conventions to create code behind the scenes and make some assumptions.
It creates a route object which is used to assign some model data to a page. So for example in the next chapter when we talk about components, we'll create a collections page. That page will have a route assigned to it and it will also need to load in some predefined model data. When that route loads the page into a web browser, it needs to know what that data is and that's what the collections route object will do. It will tell the route what the specific model data is for the page it's loading.
The creation of a route also creates a controller and again in the MVC pattern, the controller is what sends the model data to the view. Now in this course we won't be discussing actual views, but we will certainly be discussing templates and as discussed earlier, templates are smaller versions of views. They're views subsets. So instead of a controller passing model data to a view, it will pass into a template instead. That template will have its own ID and Ember automatically assumes that the ID will be the name of the route you create.
So as an example, we're going to create a Collections page soon and we're going to load in some content into its template. That page will have a route named Collections and the template will also have its own ID. Ember will automatically assume that the route name we create and the template ID will match in name. In other words, we name the route Collections, so the template will also be named Collections. And lastly when a route is created, it also assumes that a certain URL address will be assigned to it.
This URL will have a pound sign in it or what's commonly referred to in web development, as a hash. So staying with the collections example, when we create the collections route, Ember will automatically assume that the URL looks like hash, forward slash, collections. While we're about to create some routes, it's important to note that Ember already has one created for us and that's the one for the index page, or the home page. And if we look at this page in the Ember Inspector, it will clarify all these bullet points that we just discussed.
- Installing Ember Inspector
- Reviewing routes with Ember Inspector
- Loading templates with routes
- Creating links with the link-to helper
- Adding component templates
- Loading model data
- Customizing components
- Building nested routes and route objects
- Loading data with object and array controllers
- Creating interfaces