In the last chapter, we learned about the Ember.js template layer. We learned how to use the Ember.js template markup, expression, and helpers to create complex templates. In this chapter, we will focus on the Ember.js routes. We will see how to manage your application state, using the Ember.js router.
In this chapter, we will cover the following topics:
- Application state
- Creating your first route
- Resources and nested templates
- Injecting the model for your template
- Making routes dynamic
- Setting up the controller
- Customizing templates to render
- The location API
URL, or Uniform Resource Locator, is one of the most important parts of any web application. With time, URLs have evolved from just referring a static resource on the server to identifying and managing the complete state of modern web applications.
State, as defined by FOLDOC (http://foldoc.org/state), is how something is—its configuration, attributes, condition, or information content. An application state is created when the user first requests the URL for the web application. As the user interacts with the application, the state of web application changes.
In Ember.js, the URL represents each of the possible states in your application. It can be thought as the serialization of application current state. As the user interacts with the application, the URL governs what the user is presented on screen. This means that there is a direct mapping between the URL and the state of the application. The router in Ember.js is responsible for maintaining this mapping.
When an Ember.js application first loads up, the router is responsible for setting up application state that corresponds to the current URL. The application state for an Ember.js application involves loading data for a specific route, setting up the model and controller, displaying the handlebars template corresponding to the route, and more.