rarwe.tar.gz

Ember

Ember-copy

ember2

embercss

rarwe

Ember-copy-5yvdqv

Ember-copy-5yvdqv-copy

Ember-Acceptest

Ember-Acceptest-copy

Ember-unitest

rarwe-copy

Ember-Acceptest-challenge

Ember-helper-challenge

In this course, you begin with an introduction to Ember.js, a JavaScript framework for building client-side applications.

After that, the course guides you through the steps of building a real application so that you can see how the concepts are applied in practice. You'll learn about the building blocks of Ember one by one, in a way that crushes the allegedly steep learning curve of the framework.

The application will get shinier (and/or more robust) with each chapter. By the end, we will have a decent app, and you'll have a great new skill you can add to your resume.

Developing Robust Ember.js Applications

# Changes in `router.js`
Here's the command we used in `Ember-CLI` in the previous lesson:
```shell
ember g route bands/band --path=':id'
```
It generates the following code in `router.js`. The highlighted lines of code are the new generated code.

// app/router.js
import EmberRouter from '@ember/routing/router';
import config from 'rarwe/config/environment';

export default class Router extends EmberRouter {
  location = config.locationType;
  rootURL = config.rootURL;
}
Router.map(function() {
  this.route('bands', function() {
    this.route('songs');

    this.route('band', {
      path: ':id'
    });
  });
});

So, let's fix this up to have the following shape:

The removed code is commented and the newly added code is highlighted.

// app/router.js
import EmberRouter from '@ember/routing/router';
import config from 'rarwe/config/environment';

export default class Router extends EmberRouter {
  location = config.locationType;
  rootURL = config.rootURL;
}
Router.map(function () { 
  this.route('bands', function () {
    //  this.route('songs');
     
    //  this.route('band', {
    //    path: ':id'
    this.route('band', { path: ':id' }, function () { 
      this.route('songs');
    }); 
  });
});

By defining a dynamic segment, one that starts with a `:`, as `path`, our router now maps every possible band URL to a route object in our application. With this in place, the following paths are all mapped:

* `/`
* `/bands`
* `/bands/pearl-jam`
* `/bands/led-zeppelin`
* `/bands/pearl-jam/songs`
* `/bands/led-zeppelin/songs`

Furthermore, any band ID that goes in the middle segment is also mapped by virtue of the `band` segment being dynamic.

Assigning a route level to a particular band also makes our route map and, consequently, our application more extensible.  Should we decide to also display albums for bands down the road, it is simply a matter of adding a nested route under the `band` route.

Then, our app will handle URLs for albums just like for songs:

* `/bands/pearl-jam/albums`
* `/bands/led-zeppelin/albums`

You might wonder why we don't have a `path` option for the other routes, like `bands`. The `path` option tells Ember's router what URL path to generate for that route. By default, `path` is the route's name so `this.route('bands')` is the same as `this.route('bands', { path: 'bands' }`, only shorter.

Should you want a different, non-dynamic name, you can just path it. I mean, pass it as `this.route('bands', { path: 'les-bandes'})`. If you do this, the app will handle the following routes:

* `/`
* `/les-bandes`
* `/les-bandes/pearl-jam`
* `/les-bandes/led-zeppelin`
* `/les-bandes/pearl-jam/songs`
* `/les-bandes/led-zeppelin/songs`

# Full route names

So far, we referred to routes by their short names, the string that is the first parameter in route definitions, like `bands`, `band`, and `songs`. All routes also have a full, canonical name that the Ember router uses to identify them.

The full name of a route is the concatenation of the short names on the path used to reach it. For example, the `songs` route can be reached by following the `bands`, `band`, and then `songs` route so it's full name is `bands.band.songs`.

Full names are crucial to understand because they are used both in Ember code to target routes, like the parameter of `link-to calls,` and as the module name, and thus file path, generated for the route.

The route object for the `bands.band.songs` route should be placed in `app/routes/bands/band/songs.js` and the template in `app/templates/bands/band/songs.hbs`. Most of the time, Ember-CLI generators relieve you from having to know this as they generate entities correctly based on the router map, but it is still important to understand this concept as misplacing code can lead to situations where the app doesn't behave as expected simply because the code is not executed.

We will continue to use short route names in explanations unless the point we want to get across is better demonstrated by using full names, which is going to be the case in most of this chapter.


You’ll learn how to change URLs according to the requirements of the application in this lesson.

Modifying URLs With Nested Routes

Changes in router.js

Changes in `router.js`