Defining an application route

When loading your application, the router looks at the URL and matches it to the route. We'll go over some basics on how this works.

How to do it...

The route map is used to define the URL mappings. Let's take a look at adding a new route using this.route.

  1. In a new application, open the router.js file in the app folder. To begin, we'll create a new route called about:
    // app/router.js
import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('about');
});

export default Router;

    Router.map in the preceding code handles the routing of the program. The this.route creates the about route. By default, the name of the route will be the same as the path to it. For example, the about route path would be located at /about. We can specifically set the path using path.

  2. Instead of having all requests go to /about, let's change the path so that they go to /me:
    // app/router.js
…
this.route('about',{ path: '/aboutme' });
…

    The new route about will be mapped to the URL /aboutme now.

  3. To test this, we can create a new template and add a link-to helper to our application route. First, we'll create the template:
    $ ember g template about

    The Ember CLI generated will create the template for us. This will create the about.hbs file in the app/templates folder.

  4. Add the link-to helper to the application.hbs file:
    // app/templates/about.hbs 
<h2 id="title">Welcome to Ember</h2>

{{outlet}}

{{#link-to 'about'}}about template{{/link-to}}

    The code creates a new link to the about template in the main application template.

  5. Add a new message to the about template that we just created:
    // app/templates/about.hbs
<br>Hello from the about route!<br>

    This text will be displayed only when we navigate to this new route.

  6. We can now run the server and check the output. Run ember server and click on the about template link. The about route will load and will look as follows:
    How to do it...

    Tip

    Application route

    When your app first boots up, the application route is loaded. Just like any other route, the application template will load by default. The application route is given for free and does not need to be added to the app/router.js file. The {{outlet}} will be used to render all other routes. It's a good idea to put the header, footer, and other decorative content here.

Working with nested routes in your application

At times, you may need multiple levels of routes. You might need templates within other templates. This can be accomplished using nested routes.

  1. Let's say that we had about with a nested location and job route:
    // app/router.js
import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('about', function() {
    this.route('location');
    this.route('job');
  });
});

export default Router;
  2. The router map has the highest-level route called about. Underneath this route is the location and job. Create two templates needed for location and job:
    $ ember g template about/location
$ ember g template about/job
$ ember g template about

    This will create the correct location.hbs and job.hbs files in the app/templates/about folder as well as the about.hbs file in the app/templates folder.

  3. For us to be able to access nested routes, we'll need to edit about.hbs and add outlet for the location and job nested routes:
    // app/templates/about.hbs
<br>Hello from the about route<br>
{{#link-to 'about.location'}}location{{/link-to}}<br>
{{#link-to 'about.job'}}job{{/link-to}}
<br>{{outlet}}<br>

    Note how the link-to helpers route to about.location. You can link nested routes with the dot notation. The location and job nested routes will render in {{outlet}}.

  4. Just to make things interesting, we'll update the job and location route templates:
    // app/templates/about/location.hbs
Hello from about/location route

// app/templates/about/job.hbs
Hi from the about/job route
  5. Finally, we'll add a link-to helper to the application route:
    // app/templates/application.hbs
<br>
<br>

{{#link-to 'about'}}Hello{{/link-to}}
{{outlet}}

    The link-to helper will route to about. This will be rendered in outlet.

  6. After running ember server, you'll have access to click on the links and go between the routes. It should look similar to the following image:
    Working with nested routes in your application

    If we click on the job link, the URL changes to http://localhost:4200/about/job. The {{outlet}} in the about template will then display the job template information.

Adding a wildcard

You can use wildcards in your routes. This allows you to create URLs that match multiple segments. Let's create a wildcard for any URL that isn't found.

  1. In a new project, update the router.js file in the app folder:
    // app/router.js
import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
    this.route('page-not-found', {path: '/*wildcard' });
});

export default Router;

    The /*wildcard path will catch all the undefined routes and route them to page-not-found.

  2. Create a new page-not-found template:
    $ ember g template page-not-found

// app/templates/page-not-found
<br>Not Found</br>

    This route will render in the application.hbs outlet whenever a user navigates to a URL that matches /* and no existing routes match.

Adding dynamic segments to our about application

One important responsibility of the route is to load a model. In this example, we'll create a simple dynamic segment in the router that lists multiple jobs for the about route.

  1. In a new project, edit the router.js file and add the following code:
    // app/router.js
import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
    this.route('about', function(){
        this.route('location', {path: '/about/:location_id'});
    });
});

export default Router;
  2. View the output, and we can see that the router map shows an about route and a nested location route below it. The location route is a dynamic segment that starts with : and is followed by an identifier. The :location_id identifier will retrieve the model information from the location model.

    For example, if a user navigates to /about/5, the route will set location_id of 5 so that the location model with the ID of 5 is loaded. We'll be going over the about routes in more detail in the next section.

    Note

    Index routes

    At every level of nesting, including the application layer, Ember.js automatically creates a route called index. You don't need to map this in router.js. Similar to the application route, it's already there. The index route will automatically be rendered in the outlet of its parent's template. For example, if you created an index.hbs file in the app/templates folder, it would automatically be rendered in the application.hbs outlet. Keep this in mind when you create routes.

How it works...

Routes in Ember.js are defined in the app/router.js file. The router map is used to define each route, and it tells the Ember application what path should be used in the URL. By convention, each route has a corresponding template with the same name. Wildcards and dynamic segments can make routes more versatile so that they can load specific data.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset