Join Justin Yost for an in-depth discussion in this video Explore routes, part of Ember.js Essential Training.
- [Narrator] Let's talk now about Ember.js routes. What is a route? The route for an Ember.js application is the URL that we see visible in the browser. This URL is how Ember makes decisions about your application. The route and the headers define the state of the application. HTTP as you might know is a stateless protocol. That means there is no information defined in the protocol that carries over from one action to the next in general. One request is isolated from other requests and to the server or to Ember, they're all just requests to be handled.
The route and the headers give us a way to answer questions about the application and what the request is asking of Ember. A post request to the bookmark's URL, including some post-data, means here is a new bookmark, add this into our system. A get request to Bookmarks One, is asking for the bookmark with ID One to be returned. The point of this is demonstrating that in Ember the route is paramount. The route is the thing that you use to start everything else off of.
All begins from the route, the model layer, the view layer, the state of the application, all this gets determined based upon the route. Recall once we are in a route, what all we can do. We can render a template, like we've done earlier. We can load in a model, which is then passed to the template, and again, we've already observed that aspect. We can also redirect to a new route as needed, depending on some particular information that we have. You have a routes.js file in the App Folder, that defines the routes for your application.
You can also, as we earlier observed, add manual routes, using the Ember generate CLI interface. The router class in Ember has a map, that you define adding new routes to. You can paths to create aliases for a route. So in this case, the path to favorites in the URL will show up as /favs, as opposed to /favorites. Routes are complicated. At the same time they are the key to building our Ember application.
So let's build some routes. First off, we'll switch over to our terminal, and we'll build some routes using the pattern that we've established before. First, we'll open up the terminal in the root of our project and run the command, Ember G, again for generate, route bookmarks. This command does a few things. It adds a file to the routes directory, matching our named route, and it adds a template for the users route. It also updates the core application router, to notify it, about this new route.
Let's open up the routes file. Go over to your text editor, and open up the routes file, at App, Routes, Bookmarks.js. You'll see that we import Ember and export a default route. It's in this extend code block that we can modify our route to do things, like creating nested or dynamic routes or loading the appropriate model data. Now, let's look at the template which is at App, Templates, Bookmarks.hbs.
Notice how similar the patterns are. We have routes loaded in the routes folder, templates in the templates folder, and notice the naming of these files, is matching the pattern that we see in other directories. This is making it really easy for us to navigate around our project. This template is currently just an outlet block. This outlet is a child template block that would be displayed for routes, that are child paths of the bookmark's template. Such as bookmark add or something similar.
Let's see it in action. Remember to have your Ember application being served up, and visit in your browser, localhost port 4200/bookmarks, and well currently it doesn't do anything, and that's fine, but we now have a route and a matching template. This is the start of our application. Let's add some stuff to our template to verify that it's working correctly. Go back to our text editor and at the top of our bookmarks template file, we'll add an h2, labeled Bookmarks, and we'll go back to our browser and we'll see that our page is already updated to reflect the change.
This is one of the many benefits of using Ember. Notice we didn't have to refresh the page. We didn't have to restart a server. We just went back to the browser and our page was automatically updated. That's the basics of routing in Ember.
- Why choose Ember?
- Installing Ember.js and Ember Inspector
- Defining the model
- Creating nested and dynamic routes
- Loading templates with routes
- Rendering different templates
- Displaying collections
- Working with Ember components
- Building forms
- Creating, editing, and deleting records
- Configuring Ember.js applications
- Testing your Ember application
- Installing add-ins
- Upgrading an Ember application